DOM（文档对象模型）深度解析
DOM 是 HTML/XML 文档的树形结构表示 ，提供了一套让 JavaScript 动态操作网页内容、结构和样式的接口。
节点（Node）类型
类型
值
说明
示例
ELEMENT_NODE1
元素节点
<div>, <p>
TEXT_NODE3
文本节点
元素内的文字
COMMENT_NODE8
注释节点
<!-- comment -->
DOCUMENT_NODE9
文档根节点
document
DOCUMENT_TYPE_NODE10
文档类型声明节点
<!DOCTYPE html>
DOM 树结构 <! DOCTYPE html > < html> < head> < title> </ title> </ head> < body> < h1> </ h1> < p> </ p> </ body> </ html> 对应的 DOM 树 ：
DOCUMENT_NODE (document)
├── DOCUMENT_TYPE_NODE (html)
└── ELEMENT_NODE (html)
├── ELEMENT_NODE (head)
│ └── ELEMENT_NODE (title)
│ └── TEXT_NODE ("DOM示例")
└── ELEMENT_NODE (body)
├── COMMENT_NODE ("主内容")
├── ELEMENT_NODE (h1)
│ └── TEXT_NODE ("标题")
└── ELEMENT_NODE (p)
└── TEXT_NODE ("段落")
节点查询
方法
返回内容
示例
document.getElementById()单个元素
document.getElementById('app')
document.querySelector()首个匹配元素
document.querySelector('.btn')
document.querySelectorAll()静态 NodeList
document.querySelectorAll('li')
element.getElementsByTagName()动态 HTMLCollection
div.getElementsByTagName('p')
节点遍历
属性
说明
示例
parentNode父节点
node.parentNode
childNodes所有子节点
node.childNodes
firstChild / lastChild首/末子节点
node.firstChild
previousSibling / nextSibling前/后兄弟节点
node.previousSibling
children仅元素子节点
node.children
节点修改
const newDiv = document. createElement ( 'div' ) ;
const newText = document. createTextNode ( 'Hello' ) ;
parent. appendChild ( newDiv)
