DOM（Document Object Model），文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。————————引用自官网
js操作网页，会把整个网页变成节点树，通过dom操作节点树，从而实现对网页的操作，节点树分类如下：
类型
描述
节点值（NodeValue）
节点名称（NodeName）
节点类型（NodeType）
文档节点
Document //整个文档
Null
#document
9
元素节点
Element //html标签
Null
HTML
1
文本节点
Text //文本
文本内容(空格和换行也算文本内容)
#Text
3
注释节点
Comment //注释
N/A
N/A
N/A
属性节点
Attr //属性
属性值
属性名
2
属性
描述
parentNode
返回当前节点的父节点
childNodes
返回当前节点的所有子节点
children
返回当前节点的所有元素子节点
firstChild
返回当前节点的第一个子节点
firstElementChild
返回当前节点的第一个元素子节点
lastChild
返回当前节点的最后一个子节点
lastElementChild
返回当前节点的最后一个元素子节点
nextSibling
返回当前节点的下一个节点
nextElementSibling
返回当前节点的下一个元素节点
prevSibling
返回当前节点的上一个节点
prevElementSibling
返回当前节点的上一个元素节点
document.body
定位到body标签
示例
描述
取值方式
document.getElementById(“ID名称” )
返回一个节点对象，可以通过对象取值方式获取内容
document.getElementById(“ID名称” ).键名
示例
描述
取值方式
document.getElementByName(“名称” )
返回一个节点列表，可以通过数组下标方式获取内容
document.getElementsByName(“名称” )[下标]
示例
描述
取值方式
document.getElementsByClassName(“类名” )
返回一个节点列表，可以通过数组下标方式获取内容
document.getElementsByClassName(“类名” ) [下标]
示例
描述
取值方式
document.getElementsByTagName(“标签名” )
返回一个节点列表，可以通过数组下标方式获取内容
document.getElementsByTagName(“标签名” ) [下标]
注意
示例
描述
取值方式
document.querySelector(“标签名” )
返回一个dom节点对象，没有返回Null
document.querySelector(“标签名” ).键名
document.querySelectorAll(“标签名” )
返回一个数组，没有返回空数组
document.querySelectorAll(“标签名” ) [下标]
document.getElement… & document.querySelector… 区别
document.getElement： //获取的元素是静态的，不随文档的变化而变化document.querySelector： //获取的元素是动态的
示例
描述
creatTextNode
创建文本节点
creatElement
创建元素节点
示例
描述
父节点.appendChild(“子节点”)
添加子节点 （如果添加的子节点已经存在，添加相当于移动）
示例
描述
父节点.removeChild(“子节点”)
删除子节点
更多DOM学习，请参考官网文档 https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction