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表示元素,2表示文本
其它根据英文就能搞懂的:
- 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 好用,因为「不一致」。