JavaScript - DOM 导航

你好，未来的JavaScript法师们！? 准备好踏上一段激动人心的DOM导航魔法世界之旅了吗？作为你友好的计算机科学老师，我非常兴奋能引导你们进行这次冒险。所以，拿起你的虚拟指南针，让我们开始探索吧！

JavaScript - DOM Navigation

DOM节点是什么？

想象一下DOM（文档对象模型）是你网页的家谱树。这个树中的每个元素都被称为一个节点。就像真实的家庭一样，这些节点之间存在着关系——父母、子女和兄弟姐妹。酷吧？

让我们来看一个简单的例子：

<html>
<head>
<title>我的精彩页面</title>
</head>
<body>
<h1>欢迎！</h1>
<p>这是一个段落。</p>
</body>
</html>

在这个“家庭”中，<html>元素是曾祖父母，<head>和<body>是它的孩子，以此类推。这些元素中的每一个都是我们DOM树中的一个节点。

HTML DOM节点之间的关系

既然我们理解了节点是什么，那么让我们来探索它们是如何相互关联的。在我们的DOM家谱树中：

父节点拥有子节点
子节点拥有父节点
兄弟姐妹节点是拥有相同父节点的节点

例如，在我们之前的HTML中：

<html>是<head>和<body>的父节点
<head>和<body>是兄弟姐妹
<h1>和<p>是<body>的子节点

使用JavaScript在节点之间导航

是时候戴上我们的探险帽子了！? JavaScript给我们提供了一些便捷的工具来在这些节点之间导航。让我们深入研究！

访问第一个子元素

要获取一个元素的第一个子元素，我们使用firstElementChild属性。下面是如何操作的：

let body = document.body;
let firstChild = body.firstElementChild;
console.log(firstChild.tagName); // 输出：H1

在这个例子中，我们在寻找<body>标签的第一个子元素，它是我们的<h1>元素。

访问最后一个子元素

类似地，我们可以使用lastElementChild来找到最后一个子元素：

let body = document.body;
let lastChild = body.lastElementChild;
console.log(lastChild.tagName); // 输出：P

在这里，我们在获取<body>的最后一个子元素，它是我们的<p>元素。

访问HTML元素的所有子元素

想要查看所有子元素？使用children：

let body = document.body;
let allChildren = body.children;
for(let child of allChildren) {
console.log(child.tagName);
}
// 输出：
// H1
// P

这段代码遍历<body>的所有子元素并记录它们的标签名。

访问HTML元素的父节点

要找到一个节点的父节点，我们使用parentNode：

let heading = document.querySelector('h1');
let parent = heading.parentNode;
console.log(parent.tagName); // 输出：BODY

在这里，我们在找到<h1>元素的父节点，它是<body>。

访问下一个兄弟节点

要找到下一个兄弟节点，使用nextElementSibling：

let heading = document.querySelector('h1');
let nextSibling = heading.nextElementSibling;
console.log(nextSibling.tagName); // 输出：P

这段代码找到在<h1>之后的兄弟节点，即<p>元素。

访问上一个兄弟节点

而对于上一个兄弟节点，使用previousElementSibling：

let paragraph = document.querySelector('p');
let prevSibling = paragraph.previousElementSibling;
console.log(prevSibling.tagName); // 输出：H1

在这里，我们在找到在<p>之前的兄弟节点，即<h1>。

DOM的根节点

每个家谱树都有它的根，在DOM中，我们有三个主要的根：

document.documentElement - 根元素（通常是<html>）
document.head - <head>元素
document.body - <body>元素

console.log(document.documentElement.tagName); // 输出：HTML
console.log(document.head.tagName); // 输出：HEAD
console.log(document.body.tagName); // 输出：BODY

DOM nodeName属性

每个节点都有一个名称，我们可以使用nodeName属性来访问它：

let heading = document.querySelector('h1');
console.log(heading.nodeName); // 输出：H1

DOM nodeValue属性

nodeValue属性给我们提供了节点的值。对于文本节点，这是文本内容：

let heading = document.querySelector('h1');
let textNode = heading.firstChild;
console.log(textNode.nodeValue); // 输出：欢迎！

DOM中的节点类型

并非所有的节点都是平等的！DOM中有不同类型的节点。以下是一些主要的类型：

节点类型	描述	nodeType值
元素节点	任何HTML元素（如`<p>`、`<div>`等）	1
属性节点	HTML元素的属性	2
文本节点	HTML元素内的文本	3
注释节点	HTML注释	8
文档节点	整个文档	9

DOM nodeType属性

我们可以使用nodeType属性来确定我们处理的是哪种类型的节点：

let element = document.querySelector('h1');
let textNode = element.firstChild;
let commentNode = document.createComment('这是一个注释');

console.log(element.nodeType); // 输出：1 (元素节点)
console.log(textNode.nodeType); // 输出：3 (文本节点)
console.log(commentNode.nodeType); // 输出：8 (注释节点)

就这样，伙计们！你已经像一个专业人士那样导航了DOM。记住，熟能生巧，所以不要害怕实验这些概念。在你意识到之前，你将比松鼠在坚果工厂里穿梭还要快地穿越DOM树！?️

快乐编码，愿DOM与你同在！?

Credits: Image by storyset