HTML | DOM getElementsByTagName() 方法(1)

📌 相关文章

📜 HTML | DOM getElementsByTagName() 方法(1)

📅 最后修改于: 2023-12-03 15:31:11.855000 🧑 作者: Mango

HTML | DOM getElementsByTagName() 方法

getElementsByTagName() 方法是 HTML DOM 中常用的函数之一，它可以通过标签名称返回文档中指定的元素节点集合，返回类型为 NodeList。

使用方法

// 通过标签名称获取元素
var elements = document.getElementsByTagName(tagname);

参数说明：

tagname：必需，要获取元素的标签名称，如 "div"、"p" 等。

返回值：

elements：NodeList 对象，包含指定标签名称的元素列表。

示例

以下示例演示如何使用 getElementsByTagName() 方法获取文档中的元素：

<!DOCTYPE html>
<html>
<body>
  
  <div>
    <p>这是一个段落。</p>
  </div>
  
  <p>这是另外一个段落。</p>
  
  <script>
    // 获取 p 元素集合
    var paragraphs = document.getElementsByTagName("p");
    
    // 遍历集合并修改样式
    for (var i = 0; i < paragraphs.length; i++) {
      paragraphs[i].style.color = "red";
    }
  </script>

</body>
</html>

以上示例中，我们通过 getElementsByTagName() 方法获取了文档中的所有 <p> 元素，然后遍历集合并修改了它们的文字颜色。

性能优化

由于 getElementsByTagName() 方法会返回所有指定标签名称的元素列表，因此如果文档中包含大量的元素，调用该方法可能会影响网页性能，因此在使用该方法时需要注意避免不必要的重复调用。例如：

// 不要反复调用 getElementsByTagName() 方法
for (var i = 0; i < 100; i++) {
  var elements = document.getElementsByTagName("p");
  
  // 一些操作
}

以上代码会在循环中反复调用 getElementsByTagName() 方法，这可能会导致浏览器频繁解析 DOM 树，从而影响性能。正确的做法应该是在外层使用变量来缓存获取到的元素列表：

// 正确的做法：缓存获取到的元素列表
var elements = document.getElementsByTagName("p");

for (var i = 0; i < 100; i++) {
  // 直接使用缓存的变量进行操作
  // 一些操作
}

参考链接

W3Schools