深入理解 ruanyf/jstutorial 中的 DOM 节点模型-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01170/article/details/148505392

深入理解 ruanyf/jstutorial 中的 DOM 节点模型

jstutorial Javascript tutorial book 项目地址: https://gitcode.com/gh_mirrors/js/jstutorial

什么是 DOM？

DOM（Document Object Model，文档对象模型）是 JavaScript 操作网页的核心接口。它将整个网页文档抽象为一个树状结构，使开发者能够通过编程方式访问和操作网页内容。简单来说，DOM 就是浏览器将 HTML 文档转换为 JavaScript 可以理解的对象模型。

节点（Node）基础概念

在 DOM 中，所有内容都被视为节点。节点是 DOM 树的基本构建块，就像树叶是树的组成部分一样。DOM 定义了七种不同类型的节点：

文档节点（Document）：代表整个文档的根节点
文档类型节点（DocumentType）：如 <!DOCTYPE html> 声明
元素节点（Element）：HTML 标签，如 <div>、<p> 等
属性节点（Attribute）：元素的属性，如 class="example"
文本节点（Text）：元素内的文本内容
注释节点（Comment）：HTML 注释 
文档片段节点（DocumentFragment）：轻量级的文档容器

节点树结构

DOM 将文档组织为树形结构，称为节点树或 DOM 树。这个树有一个顶层节点（文档节点），下面层层嵌套着各种子节点。

节点之间存在三种主要关系：

父节点（parentNode）：直接上级节点
子节点（childNodes）：直接下级节点
同级节点（sibling）：共享同一父节点的节点

核心节点属性

节点类型识别

node.nodeType  // 返回节点类型的数字代码
node.nodeName  // 返回节点名称
node.nodeValue // 返回或设置节点值

节点类型代码对照表：

1：元素节点
2：属性节点
3：文本节点
8：注释节点
9：文档节点
10：文档类型节点
11：文档片段节点

节点关系属性

node.parentNode      // 父节点
node.parentElement   // 父元素节点
node.childNodes      // 所有子节点的集合
node.firstChild      // 第一个子节点
node.lastChild       // 最后一个子节点
node.nextSibling     // 下一个同级节点
node.previousSibling // 上一个同级节点

内容相关属性

node.textContent // 获取或设置节点及其后代的文本内容
node.baseURI     // 返回节点的绝对基础URL
node.ownerDocument // 返回节点所属的文档对象

常用节点方法

节点操作

parentNode.appendChild(newNode)     // 在末尾添加子节点
parentNode.insertBefore(new, ref)   // 在指定节点前插入
parentNode.removeChild(node)        // 移除子节点
parentNode.replaceChild(new, old)   // 替换子节点
node.cloneNode(deep)               // 克隆节点，deep为true时克隆所有后代

节点查询与比较

node.hasChildNodes()       // 检查是否有子节点
node.contains(otherNode)   // 检查是否包含指定节点
node.isEqualNode(other)    // 检查节点是否相等
node.compareDocumentPosition(other) // 比较节点位置关系
node.normalize()           // 合并相邻文本节点，删除空文本节点

节点集合：NodeList 和 HTMLCollection

DOM 提供了两种集合类型来存储多个节点：

NodeList

通过以下方式获得：

element.childNodes
document.querySelectorAll()

特点：

可能是动态的（如 childNodes）或静态的（如 querySelectorAll 结果）
具有 length 属性和 forEach 方法
可通过 item(index) 或 [index] 访问成员

HTMLCollection

通过以下方式获得：

document.forms
document.images
document.links

特点：

总是动态的
只能包含元素节点
可通过 name 或 id 属性直接访问成员
有 length 属性和 item(index) 方法

实际应用示例

遍历 DOM 树

function traverseDOM(node, callback) {
  callback(node);
  node = node.firstChild;
  while (node) {
    traverseDOM(node, callback);
    node = node.nextSibling;
  }
}

// 使用示例
traverseDOM(document.body, function(node) {
  console.log(node.nodeName);
});

动态创建和插入内容

// 创建新元素
var newDiv = document.createElement('div');
newDiv.textContent = 'Hello World!';

// 插入到文档中
document.body.insertBefore(newDiv, document.body.firstChild);

// 克隆节点
var clonedDiv = newDiv.cloneNode(true);
document.body.appendChild(clonedDiv);

安全移除节点

function removeNode(node) {
  if (node && node.parentNode) {
    node.parentNode.removeChild(node);
  }
}

最佳实践

缓存查询结果：重复查询 DOM 会影响性能，应该将结果存储在变量中
批量操作：使用 DocumentFragment 进行批量 DOM 操作
事件委托：利用事件冒泡减少事件监听器数量
避免频繁重排：连续的 DOM 操作应该合并处理

理解 DOM 节点模型是前端开发的基础，掌握这些核心概念和方法将帮助你更高效地操作网页内容，构建交互丰富的 Web 应用。

jstutorial Javascript tutorial book 项目地址: https://gitcode.com/gh_mirrors/js/jstutorial

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考