DOM树常用术语解释
DOM树常用术语解释
1. 节点（Node）
节点是DOM树中的基本单元，每个节点代表文档的一部分，如元素、属性、文本等。节点之间通过父子关系和兄弟关系形成树形结构。
2. 元素（Element）
元素节点是DOM树中最常见的节点类型，代表HTML或XML标签。元素可以包含属性和其他节点（如文本节点和子元素）。
<div id="example">Hello, World!</div>
在上述HTML中，<div>是一个元素节点。
3. 文档节点（Document Node）
文档节点是整个DOM树的根节点，代表整个文档。通过document对象访问文档节点。
var doc = document;
4. 属性节点（Attribute Node）
属性节点代表元素的属性，包含属性名和属性值。在现代DOM中，属性节点一般通过元素节点直接访问。
<div id="example" class="container"></div>
id和class是属性节点。
5. 文本节点（Text Node）
文本节点代表元素或属性中的文本内容，是DOM树的叶子节点，不包含子节点。
<p>Hello, World!</p>
"Hello, World!" 是一个文本节点。
6. 父节点（Parent Node）
父节点是DOM树中直接包含其他节点的节点。每个节点（除了文档节点）都有一个父节点。
<div id="parent"> <p id="child">Hello, World!</p> </div>
<div id="parent">是<p id="child">的父节点。
7. 子节点（Child Node）
子节点是DOM树中直接被其他节点包含的节点。一个节点可以有多个子节点。
<div id="parent"> <p id="child1">Hello</p> <p id="child2">World</p> </div>
<p id="child1">和<p id="child2">是<div id="parent">的子节点。
8. 兄弟节点（Sibling Node）
兄弟节点是共享同一个父节点的节点。
<div id="parent"> <p id="child1">Hello</p> <p id="child2">World</p> </div>
<p id="child1">和<p id="child2">是兄弟节点。
9. 根节点（Root Node）
根节点是DOM树的最顶层节点。在HTML文档中，根节点是<html>元素。
<html> <head></head> <body></body> </html>
<html>是根节点。
10. 祖先节点（Ancestor Node）
祖先节点是某个节点的所有上层节点，包括父节点、父节点的父节点，依此类推。
<div id="grandparent"> <div id="parent"> <p id="child">Hello</p> </div> </div>
<div id="grandparent">和<div id="parent">都是<p id="child">的祖先节点。
11. 后代节点（Descendant Node）
后代节点是某个节点的所有下层节点，包括子节点、子节点的子节点，依此类推。
<div id="ancestor"> <div id="parent"> <p id="descendant">Hello</p> </div> </div>
<div id="parent">和<p id="descendant">都是<div id="ancestor">的后代节点。
12. 节点类型（Node Type）
每个节点都有一个类型，用于表示节点的具体类别，如元素节点、文本节点、属性节点等。常见的节点类型有：
元素节点（Node.ELEMENT_NODE，值为1）
文本节点（Node.TEXT_NODE，值为3）
注释节点（Node.COMMENT_NODE，值为8）
文档节点（Node.DOCUMENT_NODE，值为9）
var elementNode = document.getElementById('example');
console.log(elementNode.nodeType); // 输出113. 文档片段（Document Fragment）
文档片段是一个轻量级的文档对象，作为一个容器，可以包含多个节点。操作文档片段不会触发页面重新渲染，常用于批量操作DOM以提高性能。
var fragment = document.createDocumentFragment();
var newDiv = document.createElement('div');
fragment.appendChild(newDiv);
document.body.appendChild(fragment);14. 事件（Event）
事件是用户与浏览器交互时发生的特定行为，如点击、键盘输入、鼠标移动等。DOM提供了事件处理机制，可以监听和响应这些事件。
document.getElementById('example').addEventListener('click', function() {
alert('Element clicked!');
});
需要购买本课才能留言哦~