29、JavaScript 文档对象模型（DOM）全面解析

pink7

于 2025-05-31 11:17:42 发布

阅读量13

点赞数

CC 4.0 BY-SA版权

分类专栏：深入浅出JavaScript核心原理文章标签： JavaScript DOM 文档对象模型

本文链接：https://blog.csdn.net/pink7/article/details/149567458

深入浅出JavaScript核心原理专栏收录该内容

81 篇文章 ¥399.00 ¥499.90

订阅专栏

超级会员免费看

JavaScript 文档对象模型（DOM）全面解析

1. 节点克隆与规范化方法

在 JavaScript 的文档对象模型 (DOM) 中， cloneNode() 方法用于复制节点，它有两种模式：深复制和浅复制。假设将 <ul> 元素的引用存储在变量 myList 中，以下代码展示了 cloneNode() 方法的两种模式：

var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length);     //3 (IE < 9) or 7 (others)

var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length);  //0

在这个例子中， deepList 是 myList 的深复制，包含了所有子节点；而 shallowList 是浅复制，不包含子节点。 deepList.childNodes.length 的差异是由于 Internet Explorer 8 及更早版本与其他浏览器处理空白字符的方式不同。IE 9 之前的版本不会为空白字符创建节点。

需要注意的是， cloneNode() 方法不会复制添加到