JavaScript HTML DOM 集合(Collection)

JavaScript HTML DOM 集合（Collection）

HTML DOM 操作是 JavaScript 中最常用的操作之一，它提供了访问和操作 HTML 文档中的元素的功能，这些元素以一种层次化的形式组织在一起，形成了一个树形结构。

在 HTML DOM 中，当我们通过 JavaScript 获取到一个元素时，有时会得到返回类型为“集合（Collection）”，而不是单个元素对象。集合是由多个元素组成的数组，它提供了一些方法和属性，用于对多个元素进行操作。

获取集合

集合通常是通过 HTML DOM 中的以下属性或方法获取：

  • getElementsByTagName(tagname) 方法：获取所有指定标签名的元素并返回一个 HTMLCollection 对象（只读）；

  • getElementsByClassName(classname) 方法：获取所有指定类名的元素并返回一个 HTMLCollection 对象（只读）；

  • querySelectorAll(selector) 方法：获取所有满足指定选择器的元素并返回一个 NodeList 对象（只读）；

  • children 属性：获取所有子元素并返回一个 HTMLCollection 对象（只读）。

以上方法返回的集合对象包含了所有满足条件的元素对象，可以通过下标访问集合中的单个元素，例如：

var items = document.getElementsByTagName("li");
console.log(items[0]);

HTMLCollection 对象

HTMLCollection 是一个对象，它表示一个包含了特定标记名或类名的元素集合。

在 HTMLCollection 中每个元素有一个对应的索引号，并且它是类似数组的一个对象，也就是说，可以使用索引号来取得集合中的元素。除了数组的属性和方法之外，还可以使用下面的属性和方法：

  • length 属性：表示集合中元素的个数；

  • item(index) 和 [index] 属性：返回集合中指定索引位置的元素对象，其中 [index] 等价于 item(index)。

  • namedItem(name)方法：返回具有指定名称属性的元素对象。对于具有 id 属性的元素，我们可以直接使用 document.getElementById(id) 方法来获取对应的元素。

HTMLCollection 对象是只读的，也就是说不能使用 push() 和 pop() 等修改数组的方法，但可以使用常规数组的属性和方法。

NodeList 对象

NodeList 是一个对象，它表示一个包含了节点集合的文档中的所有节点。在 NodeList 中每个元素有一个对应的索引号，并且它是类似数组的一个对象，可以使用索引号来取得集合中的元素。除了数组的属性和方法之外，还可以使用下列属性和方法：

  • length 属性：集合中的节点个数；

  • item(index) 和 [index] 属性：返回集合中指定索引位置的节点对象，其中 [index] 等价于 item(index)。

与 HTMLCollection 对象不同，NodeList 中的元素对象既可以是元素节点对象，也可以是文本节点对象、注释节点对象等节点对象。

总结

JavaScript 中的 HTML DOM 集合提供了访问和操作多个元素的方法和属性，其中集合分为 HTMLCollection 和 NodeList 两种类型。通过访问这些集合的相关属性和方法可以方便地对多个元素进行操作，在我们的日常开发工作中是不可或缺的一项技能。

JavaScript HTML DOM 节点列表 JavaScript if...Else 语句