Home  >  Article  >  Web Front-end  >  How to Select Elements by Attribute When querySelectorAll is Missing?

How to Select Elements by Attribute When querySelectorAll is Missing?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-30 00:32:29111browse

How to Select Elements by Attribute When querySelectorAll is Missing?

How to Retrieve Elements by Attribute When querySelectorAll is Unavailable

Despite its prevalence, the querySelectorAll method may not be universally accessible. For instance, older browsers like IE7 lack this functionality. However, it is possible to achieve similar results using a native approach that ensures compatibility with IE7.

Consider the following scenario:

<p data-foo="bar"></p>

Typically, one would utilize querySelectorAll to retrieve elements based on their attributes:

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

However, in the absence of querySelectorAll, an alternative solution is required.

To attain the same functionality natively, a JavaScript function can be constructed:

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;
}

This function traverses the entire document, retrieving all elements with a specific attribute. By invoking it:

getAllElementsWithAttribute('data-foo');

one can effectively retrieve elements with the "data-foo" attribute. This solution is both comprehensive and compatible with IE7, enabling access to elements by attribute even in browsers lacking querySelectorAll.

The above is the detailed content of How to Select Elements by Attribute When querySelectorAll is Missing?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn