DOM 节点的关系：父子、兄弟节点与属性访问

好的，各位前端同仁，后端大佬，以及还没入门但充满好奇的小伙伴们，欢迎来到今天的“DOM节点关系：父子、兄弟节点与属性访问”主题讲座！我是你们的老朋友，一位在代码海洋里摸爬滚打多年的老水手，今天就带大家一起探索DOM这座看似平静实则暗流涌动的岛屿。

开场白：DOM，前端世界的基石，HTML的灵魂伴侣

要说前端开发，DOM (Document Object Model) 绝对是绕不开的一座大山，哦不，是美丽的山峰！它就像我们盖房子的地基，或者说，像是HTML的灵魂伴侣，赋予了静态的HTML页面动态的生命力。没有DOM，我们的网页就只能像一幅静止的画，无法与用户互动，更别提那些炫酷的动画和复杂的功能了。

想象一下，没有DOM，我们怎么才能响应用户的点击事件？怎么才能修改页面上的文字？怎么才能根据用户输入动态地更新内容？简直是无法想象，对不对？ 😱

所以，毫不夸张地说，DOM是前端开发的基础，掌握DOM是成为优秀前端工程师的必经之路。而DOM节点之间的关系，更是理解DOM结构的钥匙。今天，我们就来一起解锁这把钥匙，打开DOM世界的大门！

第一章：家庭伦理剧？DOM节点的父子关系

在DOM的世界里，节点之间也存在着各种各样的关系，其中最基本也是最重要的，就是父子关系。就像现实生活中的家庭一样，DOM节点也组成了一个层次分明的家族树。

父节点（Parent Node）： 顾名思义，父节点就是“生”出子节点的那个节点。它就像家里的爸爸妈妈，对孩子负有养育和保护的责任。
子节点（Child Node）： 子节点就是被父节点“生”出来的节点。他们就像家里的孩子，依赖于父母的供养。

让我们用一段简单的HTML代码来举个例子：

<div id="container">
  <h1>Welcome to My Website!</h1>
  <p>This is a simple paragraph.</p>
</div>

在这个例子中，<div> 元素就是 <h1> 和 <p> 元素的父节点，而 <h1> 和 <p> 元素则是 <div> 元素的子节点。

我们可以用JavaScript代码来验证这一点：

const container = document.getElementById('container');
const h1 = container.querySelector('h1');
const p = container.querySelector('p');

console.log(container.parentNode); // 输出：<html> (container 的父节点是 html)
console.log(h1.parentNode); // 输出：<div id="container">
console.log(p.parentNode); // 输出：<div id="container">
console.log(container.childNodes); // 输出：NodeList(3) [text, h1, text, p, text] (包含文本节点!)

注意点：

一个节点可以有多个子节点，但只能有一个父节点（除非它是根节点）。
document.documentElement 是根节点，它的父节点是 null。
childNodes 返回的是一个 NodeList，它包含所有的子节点，包括元素节点、文本节点、注释节点等等。这也就是为什么上面的例子中，container.childNodes 返回的长度是 3，而不是 2。

实用技巧：

parentNode 属性可以用来快速访问父节点，非常方便。
childNodes 属性可以用来遍历所有的子节点。
firstChild 和 lastChild 属性可以用来访问第一个和最后一个子节点。
hasChildNodes() 方法可以用来判断一个节点是否包含子节点。

第二章：相爱相杀？DOM节点的兄弟关系

除了父子关系，DOM节点之间还存在着兄弟关系。兄弟节点是指拥有同一个父节点的节点。他们就像家里的兄弟姐妹，一起成长，一起玩耍，有时候也会争吵。

让我们继续用上面的HTML代码为例：

<div id="container">
  <h1>Welcome to My Website!</h1>
  <p>This is a simple paragraph.</p>
</div>

在这个例子中，<h1> 和 <p> 元素就是兄弟节点。

我们可以用JavaScript代码来验证这一点：

const h1 = document.querySelector('h1');
const p = document.querySelector('p');

console.log(h1.nextElementSibling); // 输出：<p>This is a simple paragraph.</p>
console.log(p.previousElementSibling); // 输出：<h1>Welcome to My Website!</h1>

注意点：

nextSibling 和 previousSibling 属性可以用来访问下一个和上一个兄弟节点，但是它们会包含文本节点和注释节点。
nextElementSibling 和 previousElementSibling 属性可以用来访问下一个和上一个兄弟元素节点，它们只会返回元素节点，更加常用。
如果一个节点没有下一个或上一个兄弟节点，那么 nextElementSibling 和 previousElementSibling 属性会返回 null。

实用技巧：

nextElementSibling 和 previousElementSibling 属性可以用来快速定位到兄弟元素节点。
可以结合循环来遍历所有的兄弟节点。

第三章：挖掘宝藏？DOM节点的属性访问

除了节点之间的关系，我们还可以访问DOM节点的属性。DOM节点的属性就像是藏在节点里的宝藏，我们可以通过访问属性来获取节点的信息，或者修改节点的行为。

每个DOM节点都有一系列的属性，这些属性描述了节点的状态、特性和行为。我们可以通过JavaScript来访问和修改这些属性。

常见的属性：

属性	描述
`id`	元素的唯一标识符。
`className`	元素的类名。
`innerHTML`	元素内部的HTML内容。
`textContent`	元素内部的文本内容。
`style`	元素的样式对象，可以用来设置元素的样式。
`attributes`	元素的属性集合，可以用来访问元素的自定义属性。
`value`	表单元素的值。
`src`	`<img>` 元素的图片地址。
`href`	`<a>` 元素的链接地址。
`dataset`	可以通过 `data-*` 属性存储自定义数据，并通过 `dataset` 对象访问。例如，`<div data-user-id="123"></div>` 可以通过 `element.dataset.userId` 访问到 "123"。

让我们用一段代码来演示如何访问和修改DOM节点的属性：

<div id="myDiv" class="container">
  <p>This is a paragraph.</p>
  <img src="image.jpg" alt="My Image">
  <a href="https://www.example.com">Visit Example</a>
</div>

const myDiv = document.getElementById('myDiv');
const p = myDiv.querySelector('p');
const img = myDiv.querySelector('img');
const a = myDiv.querySelector('a');

// 访问属性
console.log(myDiv.id); // 输出：myDiv
console.log(myDiv.className); // 输出：container
console.log(p.textContent); // 输出：This is a paragraph.
console.log(img.src); // 输出：image.jpg
console.log(a.href); // 输出：https://www.example.com

// 修改属性
myDiv.className = 'new-container';
p.textContent = 'This is a new paragraph.';
img.src = 'new-image.jpg';
a.href = 'https://www.google.com';

实用技巧：

可以使用 getAttribute() 和 setAttribute() 方法来访问和修改元素的属性。
可以使用 removeAttribute() 方法来移除元素的属性。
可以通过 style 属性来修改元素的样式，例如 element.style.color = 'red'。
使用 dataset 可以方便地存储和访问自定义数据。

第四章：DOM操作的性能优化

DOM操作虽然强大，但是也比较耗费资源。频繁的DOM操作会导致页面性能下降，影响用户体验。因此，在进行DOM操作时，我们需要注意性能优化。

一些常用的性能优化技巧：

减少DOM操作的次数： 尽量一次性完成多个DOM操作，而不是多次单独操作。例如，可以使用 DocumentFragment 来批量添加节点。
缓存DOM节点： 将常用的DOM节点缓存起来，避免每次都重新获取。
使用事件委托： 将事件监听器绑定到父节点上，而不是绑定到每个子节点上，可以减少事件监听器的数量。
避免使用 innerHTML： innerHTML 会导致整个元素重新解析和渲染，效率较低。可以使用 createElement() 和 appendChild() 方法来手动创建和添加节点。
使用 requestAnimationFrame： 将动画相关的DOM操作放在 requestAnimationFrame 回调函数中执行，可以提高动画的流畅性。

举例说明：

假设我们需要向一个列表中添加100个新的列表项。

不好的做法：

const list = document.getElementById('myList');
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i + 1}`;
  list.appendChild(li);
}

这种做法会进行100次DOM操作，效率较低。

好的做法：

const list = document.getElementById('myList');
const fragment = document.createDocumentFragment(); // 创建一个文档片段

for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i + 1}`;
  fragment.appendChild(li); // 将列表项添加到文档片段中
}

list.appendChild(fragment); // 将文档片段一次性添加到列表中

这种做法只进行了一次DOM操作，效率更高。

总结：DOM，连接你我，改变世界

今天，我们一起探索了DOM节点之间的父子、兄弟关系，以及如何访问和修改DOM节点的属性。希望通过今天的学习，大家能够对DOM有更深入的理解，并在实际开发中灵活运用DOM，创造出更加精彩的网页应用。 🎉

DOM就像一座桥梁，连接着我们和用户，连接着前端和后端，连接着想象和现实。掌握DOM，就掌握了改变世界的力量！

记住，学习是一个持续的过程。希望大家能够继续学习，不断进步，成为更优秀的前端工程师！ 💪

最后的彩蛋：

下次讲座，我们将会探讨 DOM 事件，敬请期待！ 😉

发表回复 取消回复

发表回复取消回复