当querySelectorAll在不使用库时不可用时,请按属性获取元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (13)
<p data-foo="bar">

你怎么能做到相当于

document.querySelectorAll('[data-foo]')

我需要一个至少在IE7中工作的本机解决方案。我不在乎IE6。

提问于
用户回答回答于

你可以编写一个运行getElementsByTagName('*')的函数,并仅返回具有“data-foo”属性的元素:

function getAllElementsWithAttribute(attribute)
{
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++)
  {
    if (allElements[i].getAttribute(attribute) !== null)
    {
      // Element exists with attribute. Add to array.
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

然后,

getAllElementsWithAttribute('data-foo');
用户回答回答于

使用

//find first element with "someAttr" attribute
document.querySelector('[someAttr]')

要么

//find all elements with "someAttr" attribute
document.querySelectorAll('[someAttr]') 

通过属性查找元素。现在在所有相关的浏览器(甚至IE8)中都支持它:http : //caniuse.com/#search=queryselector

扫码关注云+社区