javascript - document.getElementsByClassName 与类完全匹配

Question

有两个相似的类 - 'item' 和 'item one'

当我使用document.getElementsByClassName('item')它时，它会返回与上述两个类匹配的所有元素。

我如何才能获得只有“项目”类的元素？

Answer 1

document.querySelectorAll('.item:not(.one)');

（见querySelectorAll）

另一种方法是遍历document.getElementsByClassName('item')返回的内容，并检查one该类是否存在（或不存在）：

if(element.classList.contains('one')){
  ...
}

Answer 2

类名item one意味着元素有 classitem和 class one。

因此，当您这样做时document.getElementsByClassName('item')，它也会返回该元素。

你应该做这样的事情来选择只有类的元素item：

e = document.getElementsByClassName('item');
for(var i = 0; i < e.length; i++) {
    // Only if there is only single class
    if(e[i].className == 'item') {
        // Do something with the element e[i]
        alert(e[i].className);
    }
}

这将检查元素是否只有 class item。

现场演示

Answer 3

您将要为完全匹配创建自己的函数，因为类中的空格意味着它有多个类。就像是：

function GetElementsByExactClassName(someclass) {
  var i, length, elementlist, data = [];

  // Get the list from the browser
  elementlist = document.getElementsByClassName(someclass);
  if (!elementlist || !(length = elementlist.length))
    return [];

  // Limit by elements with that specific class name only
  for (i = 0; i < length; i++) {
    if (elementlist[i].className == someclass)
      data.push(elementlist[i]);
  }

  // Return the result
  return data;
} // GetElementsByExactClassName

Answer 4

如果您有 jQuery，则可以使用属性等于选择器语法来完成，如下所示：$('[class="item"]').

如果您坚持使用document.getElementsByClassName，请参阅其他答案。

Answer 5

您可以使用Array.filter将匹配集过滤为仅具有 class 的集test：

var elems = Array.filter( document.getElementsByClassName('test'), function(el){
    return !!el.className.match(/\s*test\s*/);
});

或者只有那些有test但没有one：

var elems = Array.filter( document.getElementsByClassName('test'), function(el){
    return el.className.indexOf('one') < 0;
});

（Array.filter可能会因您的浏览器而有所不同，并且在旧版浏览器中不可用。）为了获得最佳浏览器兼容性，jQuery非常适合：$('.test:not(.one)')