HTML | DOM 嵌入集合

简介

HTML（超文本标记语言）是一种用于创建网页的标记语言，DOM（文档对象模型）是一种用于访问和操作HTML文档的编程接口。DOM嵌入集合是指DOM中的一种数据结构，它允许开发人员将元素集合嵌入到其他元素中。

嵌入集合的类型

在DOM中，有多种类型的嵌入集合，包括：

1. HTMLCollection：这是一个由HTML元素组成的集合。
2. NodeList：这是一个由节点组成的集合，包括元素节点、属性节点、文本节点等。
3. NamedNodeMap：这是一个由属性节点组成的集合。

HTMLCollection

HTMLCollection是一种动态集合，它表示一个元素的集合。它可以通过元素的标签名、类名或标识符进行访问。HTMLCollection是类似数组的对象，它具有length属性和可以通过索引访问元素。

以下是使用HTMLCollection的示例：

const elements = document.getElementsByTagName('div');
console.log(elements.length); // 输出元素的数量

for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  console.log(element.textContent); // 输出元素的文本内容
}

NodeList

NodeList是一种静态集合，它表示一个节点的集合。它可以通过父节点的子节点列表或使用querySelectorAll函数进行访问。NodeList也是类似数组的对象，它具有length属性和可以通过索引访问节点。

以下是使用NodeList的示例：

const nodes = document.querySelectorAll('p');
console.log(nodes.length); // 输出节点的数量

for (let i = 0; i < nodes.length; i++) {
  const node = nodes[i];
  console.log(node.textContent); // 输出节点的文本内容
}

NamedNodeMap

NamedNodeMap是一种表示属性节点的集合。它可以通过元素节点的attributes属性进行访问。NamedNodeMap是类似对象的对象，它具有length属性和可以通过属性名称访问属性节点。

以下是使用NamedNodeMap的示例：

const element = document.getElementById('myElement');
const attributes = element.attributes;
console.log(attributes.length); // 输出属性的数量

for (let i = 0; i < attributes.length; i++) {
  const attribute = attributes[i];
  console.log(attribute.name); // 输出属性的名称
  console.log(attribute.value); // 输出属性的值
}

总结

DOM嵌入集合是一种有用的数据结构，它允许开发人员按不同的方式访问和操作HTML文档中的元素和节点。HTMLCollection、NodeList和NamedNodeMap是常用的嵌入集合类型，开发人员可以根据自己的需求选择适合的集合类型来处理HTML文档。