本文详细介绍了HTML DOM的基本概念，包括document、HTMLDocument和Document之间的关系，以及DOM结构树。重点讲解了如何选择文档节点，如getElementById、getElementsByTagName等方法，并探讨了节点的属性和遍历方式。此外，还涵盖了添加、删除和修改节点内容、属性及样式的各种方法，为深入理解HTML DOM提供了全面的知识框架。
目录
document、HTMLDocument、Document之间的关系
document.getElementsByTagName('div')
document.getElementsByClassName('a')
document.getElementsByName('a')
div.firstElementChild/lastElementChild
div.setAttribute('class','demo')
div.style.height/div.style.backgroundColor/div.style.borderRadius等
document、HTMLDocument、Document之间的关系
document对象代表整个文档，document是由HTMLDocument（）构造函数构造(document.__proto__===HTMLDocument.prototype)，HTMLDocument.prototype对象是由Document（）构造函数构造（HTMLDocument.prototype.__proto__===Document.prototype），Document（）还构造XMLDocument.prototype对象。
DOM结构树图
图中大写的单词都是构造函数，例如文本对象就是有Text构造函数构造，继承了Text.prototype上面的方法和属性，根据上面Document和HTMLDocument的关系，我们可以类推下图的关系，例如CharacterData（）构造函数构造了Text.prototype对象和Comment.prototype对象（CharacterData.prototype===Text.prototype.__proto__）。然后下图中Document实际上是对应HTMLDocument和XMLDocument，Element实际上是对应HTMLElement和XMLElement。HTMLHeadElement是head标签的构造函数，依次类推，HTMLBodyElement是body标签的构造函数等。当我们想要某类所有的标签都具有某项方法时，我们便可以直接在它的构造函数的原型上进行编程。
document
首先由于在html中存在唯一的body和head标签，document上以选取好了body和head（document.body和document.head为html中对应的body和head标签）。然后下面将介绍一些document的方法或属性。
选择文档节点
document.getElementById('a')
通过id选择器选择id='a'的文档对象。
该方法定义在Document.prototype上（XML也可以使用）。
document.getElementsByTagName('div')
通过标签选择器选择所有div标签文档对象，注意选择出来的对象是一个类数组，不能直接操作，要使用时需选取其中一个对象进行操作。
该方法定义在Document.prototype和Element.prototype上（XML、元素节点也能使用该方法，代表在该元素下选取符合条件的内容）。
document.getElementsByClassName('a')
通过类选择器选择所有class='a'（相当于css中.a选取元素，该元素可以有多个类名，其中一个为'a'即可）的文档对象，注意选择出来的对象是一个类数组，不能直接操作，要使用时需选取其中一个对象进行操作。
该方法定义在Document.prototype和Element.prototype上（XML、元素节点也能使用该方法，代表在该元素下选取符合条件的内容）。
document.getElementsByName('a')
通过属性选择器选择所有name='a'的文档对象，注意选择出来的对象是一个类数组，不能直接操作，要使用时需选取其中一个对象进行操作，常用于表单对象。
该方法定义在HTMLDocument.prototype上。
document.querySelector('')
通过CSS任何选择器选择，注意只选择符合选择器的第一个对象且不是实时的（如果选择后文档变动，增加了或减少了符合要求的对象，之前的选择结果不会改变）。
该方法定义在Document.prototype和Element.prototype上（XML、元素节点也能使用该方法，代表在该元素下选取符合条件的内容）。
document.querySelectorAll('')
通过CSS任何选择器选择，注意选择所有符合选择器的对象并传入类数组，也不是实时的，除了querySelector的两个方法其他都为实时的。
该方法定义在Document.prototype和Element.prototype上（XML、元素节点也能使用该方法，代表在该元素下选取符合条件的内容）。
节点
节点的4个属性
- nodeName：元素的标签名，以大写形式表示，只读。
- nodeValue：Text节点或Comment节点的文本内容，可读写。
- nodeType：该节点的类型，只读。
- attributes：Element节点的属性集合,以类数组的方式存储，索引位和长度对应的是显式设定的属性。
节点类型
- 元素节点，nodeType为1。
- 属性节点，nodeType为2。
- 文本节点，nodeType为3。
- 注释节点，nodeType为8。
- document，nodeType为9。
- new DocumentFragment()，nodeType为11。
基于节点遍历
div.parentNode
div的直接父节点，最顶端为document。
div.childNodes
div的所有直接子节点（不包括子孙等），并存储在类数组中。
div.firstChild/lastChild
div的第一个/最后一个直接子节点。
div.nextSibling
div的下一个兄弟节点。
div.previousSibling
div的前一个兄弟节点。
div.hasChildNodes()
判断div是否有孩子节点。
基于元素节点遍历
div.parentElement
div的直接父元素节点，最顶端为document。
div.children
div的所有直接子元素节点（不包括子孙等），并存储在类数组中。
div.firstElementChild/lastElementChild
div的第一个/最后一个直接元素子节点。
div.nextElementSibling
div的下一个兄弟元素节点。
div.previousElementSibling
div的前一个兄弟元素节点。
添加和删除节点
document.createElement('div')
创建div元素节点，但未插入document文档中。
document.createTextNode('')
创建文本节点。
document.createComment('')
创建注释节点。
div.appendChild()
在div的最后一个直接子元素后插入节点（相当于push），当div是html中的节点，则相当剪切操作，先删除了后插入。
div.insertBefore(a,b)
div为b的直接父节点，在b节点之前插入a节点。
div.removeChild(a)
删除div的直接子节点a，并返回a节点。
div.remove()
删除div节点。
div.replaceChild(a,b)
div为a，b的直接父节点，用a节点替换b节点，返回b节点。
改变节点内容
div.innerHTML
查看div中的内容，返回字符串形式，可以赋值改变（写入html的字符串形式能被识别为html结构）。
div.innerText
查看div中的所有文本节点，并全部连接成一个字符串返回，可以赋值改变（赋值时，是把div中所有内容替换文本）。
改变节点属性
div.setAttribute('class','demo')
给div标签设置class='demo'。
div.getAttribute('id')
取出div标签上属性id值。
div.id/div.className
直接表示div标签的id/class的值，可以直接赋值修改
改变节点样式
div.style.height/div.style.backgroundColor/div.style.borderRadius等
查看div的height/background-color等属性(注意是查看html中的行间样式属性，无法查看css中写的，即行间样式中没有显式写的返回空串；另外该属性不一定会和显示出来的真实样式一样)，可以直接赋值修改（赋字符串形式且直接写在行间样式上），注意css中以-连接的属性，改为直接大写字母开头；css中的保留字，前面加css并大写单词，例如float则改为cssFloat。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
