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!