JavaScript 访问元素集合 - HTML

在 JavaScript 中，我们可以很方便地获取 HTML 页面中的元素集合。元素集合是指一组具有相同名称的 HTML 元素，例如所有的段落元素(p)、所有的图像元素(img)和所有的表格行(tr)。在本文中，我们将讨论如何使用 JavaScript 访问元素集合。

获取元素集合

我们可以使用 document.getElementsByTagName() 方法获取页面中的元素集合。该方法返回一个 HTMLCollection 对象，其中包含了与指定标签名匹配的所有元素。下面是该方法的语法：

document.getElementsByTagName(tagname)

其中 tagname 参数表示你想要获取的元素的标签名（例如 p、img 等等）。注意，tagname 参数是大小写敏感的。

以下是一个简单的示例，通过获取页面中所有的段落元素：

var paras = document.getElementsByTagName('p');

// 输出所有段落元素的文本内容
for (var i = 0; i < paras.length; i++) {
  console.log(paras[i].textContent);
}

在上面的示例中，我们使用 getElementsByTagName() 方法获取了页面中的所有段落元素，并将它们存储在 paras 变量中。然后，我们使用一个循环遍历所有的段落元素，并输出它们的文本内容。

元素集合的属性和方法

一旦我们有了一个元素集合，我们就可以使用它们的属性和方法来进行各种操作。以下是一些最常用的属性和方法：

• length：获取元素集合中元素的数量。
• item(index) 或 [index]：使用索引获取元素集合中的某个元素。
• namedItem(name) 或 ['name']：使用名称获取具有相同名称属性的元素集合中的某个元素。
• forEach(callbackFunction)：循环遍历元素集合中的所有元素，并对每个元素执行回调函数 callbackFunction。

下面是一个使用 forEach() 方法遍历页面中所有段落元素，为它们添加一个类的示例：

var paras = document.getElementsByTagName('p');

// 循环遍历所有段落元素，并为它们添加类名
paras.forEach(function(p) {
  p.classList.add('paragraph');
});

在上面的示例中，我们首先使用 getElementsByTagName() 方法获取所有段落元素，并将它们存储在 paras 变量中。然后，我们使用 forEach() 方法循环遍历所有段落元素，并为它们都添加一个名为 paragraph 的类。