在不使用库的情况下查询选择器All不可用时按属性获取元素？

javascript dom

2022-08-30 04:39:54

<p data-foo="bar">

你怎么能做等价物

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

其中 querySelectorAll 不可用？

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

答案 1

您可以编写一个函数来运行 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');

答案 2

用

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

或

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

以按属性查找元素。现在所有相关浏览器（甚至IE8）都支持它：http://caniuse.com/#search=queryselector