HTML | DOM 采样对象

在 Web 开发中，HTML 和 DOM 是非常重要的两个概念，HTML 是文档的结构，而 DOM 是文档的对象模型，能够用代码操作文档中的元素和属性。在 JavaScript 中，可以使用 DOM API 来获取和修改 HTML 页面中的元素和属性，开发者可以使用采样对象来完成这些操作。

什么是采样对象？

在 JavaScript 中，采样对象是一个包含 HTML 元素的对象。通常，我们使用 DOM 方法获取一个单独的元素对象，但有时我们需要处理多个元素，这时就需要使用采样对象。通过采样对象，我们可以对一组元素进行统一的操作。

如何创建采样对象？

通常，我们使用 DOM 方法 document.querySelectorAll() 来获取一组元素，并将它们存储在采样对象中。使用该方法可以传入一个 CSS 选择器来获取所有匹配该选择器的元素。

const sampleObj = document.querySelectorAll('.example-class');

在这个示例中，sampleObj 包含了文档中所有类名为 example-class 的元素。

如何使用采样对象？

有了采样对象之后，我们可以像处理单个元素一样，对其进行操作。可以使用循环或 forEach 方法在采样对象的每个元素上执行相同的操作。

sampleObj.forEach(function(element) {
  // 在此处编写处理代码
});

还可以使用 JavaScript 中的其他方法来处理采样对象。下面是一些常用的方法：

获取采样对象的长度

const length = sampleObj.length;

此代码片段将返回采样对象中元素的数量。

迭代采样对象

使用 for (let i = 0; i < sampleObj.length; i++) 或 sampleObj.forEach() 来迭代采样对象。

for (let i = 0; i < sampleObj.length; i++) {
  // 在此处编写处理代码
}

sampleObj.forEach(function(element) {
  // 在此处编写处理代码
});

获取采样对象的元素

使用下标来获取采样对象中的特定元素。下面的代码通过下标访问第一个元素：

const firstElement = sampleObj[0];

添加和删除类名

可以使用 element.classList.add() 和 element.classList.remove() 来添加和删除 HTML 元素的类名。

sampleObj.forEach(function(element) {
  element.classList.add('new-class');
  element.classList.remove('old-class');
});

总结

采样对象让我们可以对多个 HTML 元素进行批量操作。使用采样对象，我们可以获取、迭代和处理多个元素。希望这篇文章能够帮助你学习和使用采样对象。