JavaScript getElementsByTagName
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 document.getElementsByTagName 方法。此方法对于 DOM 操作至关重要，它允许开发人员通过其标签名来访问元素。
基本定义
document.getElementsByTagName 方法返回一个具有给定标签名的元素的实时 HTMLCollection。与 getElementById 不同，它可以返回多个元素。
该集合是实时的，这意味着在文档更改时它会自动更新。默认情况下，该方法会搜索整个文档，但也可以在特定元素上调用以搜索其后代元素。
基本的 getElementsByTagName
此示例演示了如何访问文档中的所有段落元素。
<!DOCTYPE html>
<html>
<head>
<title>Basic getElementsByTagName</title>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<div>Not a paragraph</div>
<p>Third paragraph</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Outputs: 3
for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].textContent);
}
</script>
</body>
</html>
在此基本示例中，我们使用 getElementsByTagName('p') 检索所有段落元素。该方法返回一个我们可以迭代的 HTMLCollection。
该示例记录找到的段落数量，然后循环遍历它们以显示每个段落的内容。这展示了该方法的基本用法。
修改多个元素
此示例展示了如何一次性修改特定标签的所有元素。
<!DOCTYPE html>
<html>
<head>
<title>Modifying Multiple Elements</title>
</head>
<body>
<h2>Section 1</h2>
<h2>Section 2</h2>
<h2>Section 3</h2>
<button onclick="changeHeaders()">Change Headers</button>
<script>
function changeHeaders() {
const headers = document.getElementsByTagName('h2');
for (let i = 0; i < headers.length; i++) {
headers[i].style.color = 'blue';
headers[i].textContent = `Modified Section ${i + 1}`;
}
}
</script>
</body>
</html>
在这里，我们有多个 h2 元素和一个按钮。单击按钮时，按钮会使用 getElementsByTagName 更改所有 h2 元素的文本和颜色。
这展示了如何对相同类型的元素执行批量操作。实时集合确保任何新添加的 h2 元素也会被包含在内。
在元素内搜索
此示例演示了如何在特定容器内搜索元素。
<!DOCTYPE html>
<html>
<head>
<title>Searching Within Element</title>
</head>
<body>
<div id="container">
<span>Inner span 1</span>
<p>Paragraph inside container</p>
<span>Inner span 2</span>
</div>
<span>Outer span</span>
<script>
const container = document.getElementById('container');
const innerSpans = container.getElementsByTagName('span');
console.log(innerSpans.length); // Outputs: 2
for (let span of innerSpans) {
console.log(span.textContent);
}
</script>
</body>
</html>
在此示例中，我们首先获取一个容器元素，然后在该容器上使用 getElementsByTagName 来仅查找其中的 span 元素。
这表明如何将搜索范围限定在 DOM 树的特定部分。外部 span 不包含在结果中，这演示了作用域搜索。
处理表单
此示例展示了如何使用 getElementsByTagName 处理表单输入。
<!DOCTYPE html>
<html>
<head>
<title>Form Inputs</title>
</head>
<body>
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="checkbox" name="remember">
</form>
<button onclick="logInputs()">Log Inputs</button>
<script>
function logInputs() {
const form = document.getElementById('myForm');
const inputs = form.getElementsByTagName('input');
for (let input of inputs) {
console.log(`${input.name}: ${input.value}`);
}
}
</script>
</body>
</html>
在这里，我们使用 getElementsByTagName 检索特定表单中的所有输入元素。然后，我们记录每个输入的名称和值。
这展示了表单处理的实际用例。该方法有助于收集所有表单输入，无论其类型如何，以便进行处理或验证。
创建目录
此示例展示了如何从标题元素生成目录。
<!DOCTYPE html>
<html>
<head>
<title>Table of Contents</title>
</head>
<body>
<h1>Main Title</h1>
<h2>Section 1</h2>
<h2>Section 2</h2>
<h3>Subsection 2.1</h3>
<h2>Section 3</h2>
<div id="toc"></div>
<script>
const headings = document.getElementsByTagName('h2');
const toc = document.getElementById('toc');
let html = '<h3>Table of Contents</h3><ul>';
for (let heading of headings) {
html += `<li>${heading.textContent}</li>`;
}
html += '</ul>';
toc.innerHTML = html;
</script>
</body>
</html>
在此示例中，我们收集所有 h2 元素以自动生成目录。标题被收集并在无序列表中显示。
这展示了 getElementsByTagName 在内容组织方面的实际应用。如果将来动态添加标题，实时集合可以确保目录会更新。
来源
在本文中，我们展示了如何在 JavaScript 中使用 document.getElementsByTagName。此方法在 Web 开发中处理一组相似元素非常强大。
作者
列出 所有 JS DOM 教程。