js获取class(获取网页元素class属性的JavaScript技巧)

概述

在Web开发中，获取网页元素的class属性是非常常见的需求。通过JavaScript可以轻松地获取这些属性，方便我们在前端中进行元素的操作和样式的调整。

基本方法

在JavaScript中，可以使用document.getElementsByClassName()方法来获取指定class的元素。这个方法会返回一个包含所有指定class的元素数组。

示例代码：

var elements = document.getElementsByClassName('example-class');

for(var i=0; i<elements.length; i++){
  //对元素进行操作
}

上面的代码中，我们首先使用了getElementsByClassName()方法获取了所有class为example-class的元素，并将它们存储在一个数组中。然后，我们可以使用for循环迭代这个数组，并对每个元素进行操作。

注意事项

需要注意的是，getElementsByClassName()方法返回的是一个HTMLCollection对象，而不是一个真正的数组。因此，我们无法使用数组的所有方法和属性（如push()、pop()、slice()等），但是我们可以使用遍历和索引访问元素。

如果我们仅需要获取页面中第一个指定class的元素，则可以使用document.querySelector()方法。这个方法会返回第一个符合选择器的元素，而不是一个元素数组。

示例代码：

var element = document.querySelector('.example-class');

//对元素进行操作

兼容性

需要注意的是，IE 8及其以下版本不支持getElementsByClassName()方法，因此需要使用其他方法来获取元素的class属性。可以使用以下代码来实现：

function getElementsByClassName(classname){

  var el = [];
  var _el = document.getElementsByTagName('*');
  for (var i=0; i<_el.length; i++){
    if (_el[i].className.indexOf(classname) >= 0){
      el[el.length] = _el[i];
    }
  }
  return el;
}

这个方法会返回所有class属性包含指定字符串的元素，与getElementsByClassName()方法的效果类似。需要注意的是，这个方法可能会比getElementsByClassName()方法慢很多，因为它需要遍历页面中的所有元素才能找到符合条件的元素。

总结

获取网页元素的class属性是常见的Web开发需求。在JavaScript中，可以使用document.getElementsByClassName()方法来获取指定class的元素。需要注意的是，IE 8及其以下版本不支持这个方法，可以使用其他方法来获取元素的class属性。