js获取class元素(获取DOM class元素的JS实现)

什么是DOM？

DOM(Document Object Model)，文档对象模型。在 Web 页面加载完成后，浏览器会把文档解析成一个树形的结构，这个结构就是 DOM。通过 DOM，开发者可以对 Web 页面进行操作，动态地修改页面内容和样式。

DOM 中的每个元素都是一个对象，通过这些对象可以操作页面元素的属性，如文本内容、样式、位置等。DOM 提供了多种方法来访问、操作页面元素。

获取DOM元素的方法

获取 DOM 元素是 DOM 操作中最常见的任务之一。DOM 提供了各种方法来获取元素，如getElementById()、getElementsByClassName()、getElementsByTagName()等。

其中，getElementsByClassName() 方法可以获取所有 class 属性包含指定值的元素。

使用getElementsByClassName()方法获取元素

getElementsByClassName() 方法接收一个参数，表示要查找的 class 值，返回包含该 class 值的所有元素的 NodeList。如果没有找到符合条件的元素，则返回一个空的 NodeList。

以下是一个例子：

```javascript

// 获取 class 为 "example" 的所有元素

var elements = document.getElementsByClassName("example");

// 遍历 NodeList，获取每个元素的文本内容

for (var i = 0; i < elements.length; i++) {

console.log(elements[i].innerText);

}

```

以上代码中，通过 getElementsByClassName() 方法获取所有 class 为 "example" 的元素，然后使用 for 循环遍历 NodeList，获取每个元素的文本内容。

注意事项

使用 getElementsByClassName() 方法时，需要注意以下几点：

getElementsByClassName() 方法返回 NodeList，而不是数组。

NodeList 并不是实时的。当 DOM 发生改变时，NodeList 不会自动更新。

getElementsByClassName() 方法返回的 NodeList 是一个动态集合，当文档发生改变时，它会自动更新。

在使用 getElementsByClassName() 方法时，必须确保要查找的元素已经存在于文档中。

getElementsByClassName() 方法不兼容 IE8 及更早的浏览器，可以使用 jQuery 的 .hasClass() 方法代替。

使用 jQuery 获取 class 元素

除了使用原生的 JavaScript 方法之外，使用 jQuery 也是获取 class 元素的一种方便的方法。

jQuery 提供了多种选择器方法，包括 class 选择器。class 选择器以 . 开头，在选择器中指定要查找的 class 值即可。

以下是一个例子：

```javascript

// 获取 class 为 "example" 的所有元素

var elements = $(".example");

// 遍历 jQuery 对象，获取每个元素的文本内容

elements.each(function(index) {

console.log($(this).text());

});

```

以上代码中，使用 $() 方法获取所有 class 为 "example" 的元素，然后使用 each() 方法遍历 jQuery 对象，获取每个元素的文本内容。

总结

获取 class 元素是 DOM 操作中常见的任务之一，DOM 提供了 getElementsByClassName() 方法来实现这个任务。使用该方法需要注意一些细节，如 NodeList 的实时性、要查找的元素必须存在于文档中等。另外，使用 jQuery 也可以方便地获取 class 元素。