JS核心之DOM

DOM：Document Object Model（文档对象模型）

指文档与对象的一种映射模型

文档像树一样，每个树杈节点都是一个对象

html元素是根元素，它属于Document对象

head,body,meta,title等等这些元素都属于Element对象

标题一、标题二、span属于Text对象

 

---

Node是Document（html）、Element（元素）、Text（文本）这三个对象以及其他不重要的对象的爸爸，也就是他们原型链的顶层。

 

DOM的主要功能：页面中的节点通过构造函数构造出一个个对象，需要操作页面中节点时只需调用构造出的对象的API即可

 

Node的接口

1、属性

一些特殊的：

• nextSibling 可能会获取到文本
• innerText与textContent 是有细微区别的
• nodeType 需要死记硬背，1表示元素，3表示文本

 

其它根据英文就能搞懂的：

• childNodes
• firstChild
• lastChild
• nodeName
• nodeValue
• outerText
• ownerDocument
• parentElement
• parentNode
• preiousSibling

 

2、方法

一些需要记的：

• cloneNode( ) 接受一个true或者false，如果是true则是深拷贝（包括节点中所有的子节点，会不断遍历直至全部找出）。false则是浅拷贝，只拷贝当前这个元素，不拷贝旗下的子节点。
• isEqualNode( ) 看起来相等，比如复制的一份
• isSameNode( ) 完全相等，完全是同一个，复制的则为false
• normailze( ) 常规化，将不正常的东西变为正常的东西，具体需要看文档

 

其它根据英文就能搞懂的：

• appendChild( )
• contains( )
• hasChildNodes( )
• insertBefore( )
• removeChild( )
• replaceChild( )

 

Document的接口

1、属性：

• body
• characterSet（字符编码，例如：UTF-8）
• childElementCount
• children
• doctype
• documentElement（thml，返回文档对象的根元素即html）
• domain（获取域名）
• head
• hidden
• images
• links（获取所有的a标签）
• location（获取location的这个对象）
• onxxxxxxxxx
• origin
• plugins（查询当前页面开启了哪些插件）
• readyState
• referrer（引荐，通过F12可查询到该资源从服务器获取是来自于哪个网页的引荐，也可指定引荐，非指定引荐不准调取资源）
• scripts
• scrollingElement（正在滚动的元素）
• styleSheets（获取所有的css）
• title（获取页面的title）
• visibilityState

2、方法：

• close()（关闭）
• createDocumentFragment()
• createElement()
• createTextNode()
• execCommand()（执行一个命令，一般在写富文本编辑器中用）
• exitFullscreen()
• getElementById()
• getElementsByClassName()
• getElementsByName()
• getElementsByTagName()
• getSelection()
• hasFocus()
• open()
• querySelector()（获取单个元素）
• querySelectorAll()（获取到指定元素中所有的元素，注意是获取的值是一个伪数组）
• registerElement()
• write() （写入，执行顺序open→write→close，尤其小心异步使用此方法，当使用时会冲掉原元素中的内容）
• writeln()（写入一行）

 

DOM API 主要就是干【增删改查】 但它的缺点就是写起来特别长，不好用。

之前用 document.getElementById, document.getElementsByTagName, document.getElementsByClassName 这些DOM API获取元素，

因为太反人类，于是有了 jQuery

后来 DOM API 终于抄袭 jQuery 提供了 document.querySelector 和 document.querySelectorAll

但是依然没有 jQuery 好用，因为「不一致」。