深入理解DOM：节点操作与层级关系

版权申诉

65 浏览量更新于2024-08-23 收藏 217KB PDF 举报

"DOM（二）.pdf - 介绍DOM中的节点基础、节点层级以及如何创建、添加、删除和复制节点的详细知识" 在DOM（Document Object Model）中，HTML文档被视为一个由各种节点构成的树形结构。节点是DOM的核心组成部分，它们代表了HTML文档中的每一个元素、属性和文本。每个节点都有特定的属性，如nodeType表示节点类型，nodeName表示节点名称，nodeValue则表示节点的值。常见的节点类型包括： 1. 元素节点（nodeType为1）：如HTML标签，如`<div>`或`<span>`。 2. 属性节点（nodeType为2）：HTML元素的属性，如`class`或`id`。 3. 文本节点（nodeType为3）：包含HTML中的文本内容，包括空格和换行。节点之间的层级关系构成了DOM树。理解这些关系对于操作DOM至关重要： - 根节点：HTML文档的最顶层节点，通常是`<html>`标签。 - 父节点：一个节点的直接上级节点，例如在`<div class="box">`和`<span class="child">`的例子中，`<div class="box">`是`<span class="child">`的父节点。 - 子节点：一个节点的直接下级节点，如`<span class="child">`是`<div class="box">`的一个子节点。 - 兄弟节点：拥有相同父节点的节点，例如`<span class="child">`与`<div class="box">`内的其他元素是兄弟节点。通过JavaScript，我们可以访问、修改、删除和创建这些节点。例如，`child.parentNode`用于获取当前节点`child`的父节点，即`<div class="box">`。而`child.childNodes`返回包含所有子节点的集合，包括元素和文本节点。如果只想获取元素节点，可以使用`child.children`属性。获取子节点的方法有： - `parentNode.firstChild`：返回第一个子节点，包含所有类型的节点。 - `parentNode.lastChild`：返回最后一个子节点，同样包含所有类型的节点。 - `parentNode.children[index]`：返回索引位置的子元素节点。此外，还有`appendChild()`方法用于在父节点的末尾添加新子节点，`insertBefore(newNode, referenceNode)`用于在指定参考节点之前插入新节点，`removeChild(node)`用于删除指定节点，以及`cloneNode(deep)`用于复制节点，`deep`参数决定是否深拷贝（包括子节点）。理解并熟练运用这些DOM操作技巧，可以帮助开发者动态地修改网页内容，实现交互效果，如响应式设计、数据绑定和事件处理等。

目录目录
一、节点基础
1.什么是节点
二、节点层级 
 1.父节点
 2.子节点的获取
 3.兄弟节点的获取
 三、创建节点
四、添加和删除节点
 五、复制节点
一、节点基础一、节点基础
1.什么是节点什么是节点
HTML文档可以看作是一个节点树，网页中的所有内容都是节点（node），一般来说，节点至少拥有nodeType（节点类
型）、nodeName（节点名称）和nodeValue（节点值）这3个基本属性。
HTML中DOM树中的所有节点均可通过JavaScript进行访问、修改、删除和创建
下面列举常见的节点类型：
元素节点，nodeType为1
属性节点，nodeType为2
文本节点，nodeType为3，文本节点包含文字、空格、换行等
二、节点层级二、节点层级 
DOM根据HTML中各节点的不同作用，可将其分别划分为标签节点（元素节点）、文本节点和属性节点。节点之间的层级关系如下：
根节点：<html>标签是整个文档的根节点，有且仅有一个
父节点：指的是某一个节点的上级节点
子节点：指的是某一个节点的下级节点
兄弟节点：两个节点同属于一个父节点 
 1.父节点父节点
<body>
 <div class="demo">
   <div class="box"><span class="child">span元素</span></div>
 </div>
 <script>
   var child = document.querySelector('.child'); // 获取类名为child的span元素
   console.log(child.parentNode); // 输出离child元素最近的父级节点(box) 
 </script>
</body>
打印结果如下： 
 2.子节点的获取子节点的获取
子节点的获取可以使用childNodes属性或者children属性