Question

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

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

我如何只使用'item'类获取元素？

Answer 1

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

（见querySelectorAll）

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

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

Answer 2

类名item one表示该元素包含类item和类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);
    }
}

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

Live Demo

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，可以使用attribute equals selector语法完成，如下所示：with tf.Session(): input = tf.placeholder(tf.float32) classifier = ... print(classifier.eval(feed_dict={input: your_data}))。

如果您坚持使用$('[class="item"]')，请参阅其他答案。

Answer 5

您可以使用Array.filter将匹配的集合过滤为仅有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)')

document.getElementsByClassName与类完全匹配

5 个答案: