document.getElementsByTagName

document.getElementsByTagName 是 JavaScript 中的一个方法，用于获取文档中所有具有指定标签名的 HTML 元素。它返回一个 HTMLCollection（HTML集合），这是一个动态的、可迭代的集合，包含了所有匹配的元素。

基本语法

JavaScript复制

let elements = document.getElementsByTagName(tagName);

• tagName：要查找的元素的标签名，例如 "div"、"p"、"a" 等。如果传入 '*'，则会返回文档中所有的元素。
• 返回值：一个 HTMLCollection，其中包含了所有匹配的元素。

特点

1. 动态集合：HTMLCollection 是动态的，如果文档中元素发生变化（比如新增或删除元素），集合中的内容也会自动更新。
2. 索引访问：可以通过索引访问集合中的元素，例如 elements[0]。
3. length 属性：可以通过 elements.length 获取集合中元素的数量。

示例代码

示例 1：获取所有 <p> 元素

JavaScript复制

let paragraphs = document.getElementsByTagName("p");

for (let i = 0; i < paragraphs.length; i++) {
    console.log(paragraphs[i].textContent); // 打印每个段落的文本内容
}

示例 2：获取所有元素

JavaScript复制

let allElements = document.getElementsByTagName("*");
console.log(`Total elements: ${allElements.length}`);

示例 3：动态更新集合

HTML复制

<div id="container">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>
<script>
    let paragraphs = document.getElementsByTagName("p");
    console.log(paragraphs.length); // 输出：2

    // 动态添加一个新的 <p> 元素
    let newParagraph = document.createElement("p");
    newParagraph.textContent = "Paragraph 3";
    document.getElementById("container").appendChild(newParagraph);

    console.log(paragraphs.length); // 输出：3，集合自动更新
</script>

注意事项

1. 区分大小写：tagName 是区分大小写的，但通常在 HTML 文档中使用小写。
2. 不支持 CSS 选择器：getElementsByTagName 只能通过标签名获取元素，如果需要更复杂的选择器（如类名、ID 或属性），可以使用 document.getElementsByClassName、document.getElementById 或 document.querySelectorAll。
3. 性能问题：如果文档中元素非常多，getElementsByTagName 的返回集合可能会很大，需要注意性能优化。

替代方法

• document.querySelectorAll：返回一个静态的 NodeList，支持 CSS 选择器，功能更强大。

  let paragraphs = document.querySelectorAll("p");

• document.getElementsByClassName：通过类名获取元素。

  let elements = document.getElementsByClassName("my-class");

• document.getElementById：通过 ID 获取单个元素。

  let element = document.getElementById("my-id");