当 querySelectorAll 不可用时如何按属性检索元素
尽管 querySelectorAll 方法很流行,但它可能无法普遍访问。例如,像 IE7 这样的旧浏览器就缺乏此功能。但是,使用确保与 IE7 兼容的本机方法可以实现类似的结果。
考虑以下场景:
<p data-foo="bar"></p>
通常,人们会利用 querySelectorAll 来检索基于它们的属性:
document.querySelectorAll('[data-foo]')
但是,在缺少 querySelectorAll 的情况下,需要替代解决方案。
要在本机实现相同的功能,可以构造一个 JavaScript 函数:
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) { matchingElements.push(allElements[i]); } } return matchingElements; }
该函数遍历整个文档,检索具有特定属性的所有元素。通过调用它:
getAllElementsWithAttribute('data-foo');
可以有效地检索具有“data-foo”属性的元素。该解决方案既全面又兼容 IE7,即使在缺少 querySelectorAll 的浏览器中也可以通过属性访问元素。
以上是缺少querySelectorAll时如何按属性选择元素?的详细内容。更多信息请关注PHP中文网其他相关文章!