JS按类获取第一个元素 - Javascript

在使用Javascript时，经常需要根据元素的类名来获取DOM元素，下面介绍一种获取类名匹配的第一个元素的方法。

代码实现

function getElementByClass(className) {
  if (document.getElementsByClassName) {
    return document.getElementsByClassName(className)[0];
  } else {
    var elements = document.getElementsByTagName("*");
    var result = [];
    for (var i = 0; i < elements.length; i++) {
      if (elements[i].className == className) {
        result.push(elements[i]);
      }
    }
    return (result.length > 0 ? result[0] : null);
  }
}

• 对于支持 getElementsByClassName() 方法的浏览器，直接调用该方法，并返回第一个匹配的元素。
• 对于不支持该方法的浏览器，则通过遍历所有元素的方式，来寻找第一个匹配的元素。

代码的解析

• getElementsByClassName(className) 方法可以返回一个包含指定类名的所有元素的 DOM 对象数组，但它在不支持该方法的IE6、7、8版本中不能使用，因此需要做兼容处理。
• getElementsByTagName('*') 方法会返回页面所有的标签，因为我们要匹配指定的类名，只能遍历所有元素并判断是否匹配。
• 如果找到匹配的元素，则 push 到一个数组中。返回数组中第一个元素即可。

总结

本篇文章介绍了一种获取类名匹配的第一个元素的方法，同时兼容了兼容了不支持 getElementsByClassName() 方法的IE6、7、8版本。需要注意的是，本方法无法匹配到动态添加的元素，因为在执行时它们还没有被创建。