DOM编程艺术：创建、操作节点详解

需积分: 10 111 浏览量更新于2024-07-25 收藏 3.16MB PDF 举报

"JavaScript DOM编程艺术附录.pdf" 是一本关于JavaScript操作DOM的参考资料，主要涵盖了一系列与DOM节点操作相关的方法和属性。在DOM（Document Object Model）编程中，节点的操作是核心部分，用于构建、修改和遍历HTML或XML文档。本附录详细介绍了以下关键知识点： 1. 创建节点： - `createElement()` 方法允许开发者根据指定的标签名称创建新的元素节点。返回的是一个指向新元素节点的引用，但这个新节点不会自动插入到文档中。例如，创建一个`<p>`元素节点，并将其添加到`<body>`元素的末尾，需使用`appendChild()`方法。 2. 复制节点： - DOM提供了复制节点的能力，可以使用`cloneNode()`方法来创建现有节点的副本。这包括复制节点的所有属性和子节点。 3. 插入节点： - `appendChild()` 方法用于将新节点添加到父节点的末尾。 - `insertBefore()` 方法允许在特定子节点前面插入新节点。 - `replaceChild()` 方法用于替换父节点中的一个子节点。 4. 删除节点： - `removeChild()` 方法用来从父节点中移除指定的子节点。 5. 替换节点： - `replaceChild()` 方法用于替换现有子节点为另一个节点。 6. 处理节点： - 可以通过节点对象的各种属性（如`nodeValue`、`innerHTML`等）来修改节点的内容或属性。 7. 查找节点： - `getElementById()` 用于根据ID获取元素。 - `getElementsByClassName()` 和 `getElementsByTagName()` 分别通过类名和标签名查找元素。 - `querySelector()` 和 `querySelectorAll()` 提供更灵活的选择器语法来查找节点。 8. 节点的属性： - `nodeName` 返回节点的名称，对于元素节点通常是大写的标签名。 - `nodeType` 表示节点类型，如元素节点为1，文本节点为3。 - `parentNode` 指向父节点，`childNodes` 包含所有子节点的列表。 9. 遍历节点树： - 使用`nextSibling`、`previousSibling`、`firstChild` 和 `lastChild` 属性可以遍历和导航节点树。 - `childNodes` 和 `children` 属性分别提供子节点列表，区别在于`children`仅包含元素节点。这些方法和属性构成了DOM编程的基础，使得JavaScript能够动态地操作网页内容，实现交互性和动态效果。理解并熟练掌握这些知识对于进行前端开发至关重要。

288 附录 DOM 方法和属性

把被复制节点的子节点也一同复制到新建节点里去。如果这个参数是值是 true，新节点将包含

着与被复制节点完全一样的子节点。如果这个参数是值是 false，新节点将不包含任何子节点—

—如果被复制节点是一个元素节点，这意味着包含在被复制节点里的所有文本将不会被复制（那

些文本是一个子节点），但属性节点将被复制：

cloneNode()方法所返回的引用指针指向一个节点对象。新节点有着与被复制节点完全一样的

nodeType 和 nodeName 属性值：

在这个例子里，先创建了一个新的元素节点 para，然后通过复制 para 元素节点又创建了一个新

的元素节点 newpara。para.nodeType 返回的值将是 1（一个元素节点），newpara.nodeType 返回

的值也将是 1。

再来看一个例子：

在此例子中，我们先创建了一个新的文本节点 message，然后通过复制 message 文本节点又创建

了一个新的文本节点 newmessage。message.nodeType 返回的值将是 3（一个文本节点），

newmessage.nodeType 返回的值也将是 3 ； message.nodeName 返回的值将是"#text" ，

newmessage.nodeName 返回的值也将是"#text"。

在下面的例子里，给定节点和它的子节点都被复制到了新节点里：

因为在发出 para.cloneNode()调用时传递的参数是 true，所以新创建的元素节点 newpara 也将

有一个包含着文本“hello world”的子文本节点。

下面这段代码在复制节点时没有把子节点包括进来：

与被复制的 para 节点一样，新节点 newpara 也是一个元素节点。para 节点还有一个包含着文本

“hello world”的子文本节点，但 newpara 节点没有任何子节点。

用 cloneNode()方法复制出来的新节点不会被自动添加到文档里。新节点没有 nodeParent

剩余15页未读，继续阅读

w3funs

粉丝: 0
资源: 1

DOM编程艺术：创建、操作节点详解

JavaScript DOM编程艺术 附录

JavaScript+DOM编程艺术.pdf

JavaScript DOM编程艺术(中文第2版).pdf

JavaScript DOM编程艺术 第2版.pdf

JavaScript DOM编程艺术第二版（英文）.pdf

JavaScript DOM编程艺术（中文1st）.pdf

JavaScript DOM编程艺术(第2版pdf)+源代码

JavaScript DOM编程艺术【第2版&高清】.pdf

工具变量城市供应链创新试点数据（2007-2023年）.xlsx

基于Python django-simpleui开发的博客系统详细文档+资料齐全.zip

最新资源

JavaScript DOM编程艺术附录

JavaScript DOM编程艺术第2版.pdf