2.1 获取元素的方法
在操作网页文档时，DOM（Document Object Model）导航是一项重要任务。JavaScript 提供了许多用于查找和访问文档元素的方法。这些方法让开发者可以轻松找到需要的元素并进行操作。
1. 方法 getElementById()
方法 getElementById() 返回具有指定 id 属性值的元素。这是最简单、最常用的方法之一。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="content">这是内容</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // 输出: This is the content
</script>
</body>
</html>
2. 方法 getElementsByClassName()
方法 getElementsByClassName() 返回一个包含所有具有指定类名的元素的集合。该集合是“活的”，这意味着在 DOM 发生变化时它会自动更新。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p class="text">段落 1</p>
<p class="text">段落 2</p>
<p class="text">段落 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // 输出: 3
</script>
</body>
</html>
3. 方法 getElementsByTagName()
方法 getElementsByTagName() 返回一个包含所有指定标签的元素的集合。这个集合也是“活的”。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p>段落 1</p>
<p>段落 2</p>
<p>段落 3</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // 输出: 3
</script>
</body>
</html>
4. 方法 querySelector()
方法 querySelector() 返回与指定 CSS 选择器匹配的第一个元素。这是一个非常强大且灵活的方法。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>段落 1</p>
<p class="highlight">段落 2</p>
<p>段落 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // 输出: Paragraph 2
</script>
</body>
</html>
5. 方法 querySelectorAll()
方法 querySelectorAll() 返回一个静态（不可变）集合，包含所有与指定 CSS 选择器匹配的元素。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>段落 1</p>
<p class="highlight">段落 2</p>
<p>段落 3</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.container p');
console.log(paragraphs.length); // 输出: 3
</script>
</body>
</html>
2.2 节点导航
DOM 还提供了一些用于在相对于当前元素的节点之间导航的方法。
1. 属性 parentNode
属性 parentNode 返回当前节点的父节点。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="container">
<p>段落</p>
</div>
<script>
const paragraph = document.querySelector('p');
const parent = paragraph.parentNode;
console.log(parent.id); // 输出: container
</script>
</body>
</html>
2. 属性 childNodes
属性 childNodes 返回当前节点的所有子节点的集合，包括文本节点。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.childNodes;
console.log(children.length); // 输出所有子节点的数量，包括文本节点
</script>
</body>
</html>
可能你还在想为什么结果是 7？
就像上面说的，childNodes 属性返回当前节点的所有子节点的集合，包括文本节点（空格、字符、换行符等）。HTML 标记里在 <li> 元素之间有空格和换行符，也被当作单独的节点。
在上面的例子中，<ul> 标签和第一个 <li> 之间有换行（可能还有空格），被视为文本节点。同样的情况发生在所有的 <li> 之间和最后一个 <li> 之后。因此，除了三个列表项，childNodes 还包括这些文本节点，总数为 7。
想要仅获取元素节点（忽略文本节点），可以使用 children 属性，它只返回子元素：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.children;
console.log(children.length); // 3
</script>
</body>
</html>
3. 属性 firstChild 和 lastChild
属性 firstChild 和 lastChild 分别返回第一个和最后一个子节点。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstChild;
const last = list.lastChild;
console.log(first.textContent);
console.log(last.textContent);
</script>
</body>
</html>
你可能惊讶地发现控制台没有显示任何东西。这不是这样的。显示的是最后一个子节点 项目 1 和 项目 3（换行符）。如果你被这个问题困扰，请再阅读一下2. 属性 childNodes
4. 属性 nextSibling 和 previousSibling
属性 nextSibling 和 previousSibling 返回与当前节点在同一层级上的下一个和上一个节点。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextSibling;
const prev = secondItem.previousSibling;
console.log(next.textContent); // 输出: 项目 3
console.log(prev.textContent); // 输出: 项目 1（如果忽略文本节点）
</script>
</body>
</html>
2.3 元素节点导航
5. 属性 nextElementSibling 和 previousElementSibling
这些属性返回与当前节点在同一层级上的下一个和上一个元素节点（跳过文本和注释）。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextElementSibling;
const prev = secondItem.previousElementSibling;
console.log(next.textContent); // 输出: 项目 3
console.log(prev.textContent); // 输出: 项目 1
</script>
</body>
</html>
6. 属性 firstElementChild 和 lastElementChild
这些属性返回第一个和最后一个子元素节点（跳过文本和注释）。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstElementChild;
const last = list.lastElementChild;
console.log(first.textContent); // 输出: 项目 1
console.log(last.textContent); // 输出: 项目 3
</script>
</body>
</html>
GO TO FULL VERSION