Home > Web Front-end > JS Tutorial > body text

How to Select Elements by Attribute When querySelectorAll is Missing?

Patricia Arquette
Release: 2024-10-30 00:32:29
Original
110 people have browsed it

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>
Copy after login

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

document.querySelectorAll('[data-foo]')
Copy after login

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;
}
Copy after login

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

getAllElementsWithAttribute('data-foo');
Copy after login

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!

source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!