JavaScript中的getElementsByTagName方法详解|极客笔记

JavaScript中的getElementsByTagName方法详解

1. 引言

在Web开发中，我们经常需要通过JavaScript来操作DOM，对于需要操作多个元素的情况，很多时候我们会用到getElementsByTagName方法。本文将详细介绍getElementsByTagName方法的使用方法、返回值以及一些使用示例。

2. getElementsByTagName方法概述

getElementsByTagName是JavaScript中的一个DOM方法，它用于通过标签名获取指定文档中的所有元素。该方法可以获取到指定标签名的所有元素节点，返回的结果是一个类数组对象NodeList。

该方法的语法如下所示：

elementCollection = object.getElementsByTagName(tagName);

其中，

elementCollection是一个NodeList对象，表示获取到的元素集合；
object是指定在哪个元素中获取元素集合；
tagName是一个字符串，用于指定标签名。

注意：getElementsByTagName方法是大小写敏感的，所以传入的tagName参数需要按照实际标签名的大小写来指定。

3. 返回值

getElementsByTagName方法的返回值是一个NodeList对象，它表示了获取到的元素集合。NodeList是一个类数组对象，可以通过索引访问每一个元素。

NodeList对象有以下特点：

它是一个即时的集合，即当查询DOM时，返回的NodeList对象立即反映查询结果，而不管之后DOM的变化。
它是只读的，不能使用数组的方法（如push、pop等）改变其中的内容。
它是动态的，即可以自动更新，当DOM发生变化时，NodeList会自动反映最新的查询结果。

我们可以通过以下方式来访问NodeList对象中的元素：

nodeList[index]; // 获取索引为index的元素
nodeList.item(index); // 获取索引为index的元素
nodeList.length; // 获取元素数量

下面是一个示例，演示如何使用getElementsByTagName方法获取元素并对其进行操作：

<!DOCTYPE html>
<html>
<body>

<p>Click the button to change the background color of all <p> elements with tag name "p".</p>

<button onclick="changeBackground()">Change Background</button>

<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>

<script>
function changeBackground() {
  var elements = document.getElementsByTagName("p");
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "yellow";
  }
}
</script>

</body>
</html>

在上面的示例中，点击按钮后，将会获取到页面中所有的p元素，并将它们的背景色改为黄色。

4. 使用示例

下面给出一些常见的使用示例，帮助大家更好地理解getElementsByTagName方法的用法。

4.1 获取所有的图片元素

var images = document.getElementsByTagName("img");
console.log(images); // NodeList(3) [img, img, img]

4.2 获取所有的链接元素

var links = document.getElementsByTagName("a");
console.log(links); // NodeList(4) [a, a, a, a]

4.3 修改特定标签的样式

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.fontSize = "16px";
  paragraphs[i].style.color = "red";
}

4.4 获取指定元素内部的标签

var element = document.getElementById("container");
var innerElements = element.getElementsByTagName("p");
console.log(innerElements); // NodeList(3) [p, p, p]

4.5 获取document中的所有元素

var allElements = document.getElementsByTagName("*");
console.log(allElements); // NodeList(23) [html, html, head, ...

5. 结论

getElementsByTagName是JavaScript中常用的DOM方法之一，它能够通过标签名快速获取到文档中的元素集合。

JavaScript中的getElementsByTagName方法详解