Getting HTML elements by their attribute names

by

Yes, the function is querySelectorAll (or querySelector for a single element), which allows you to use CSS selectors to find elements.

document.querySelectorAll('[property]'); // All with attribute named "property"
document.querySelectorAll('[property="value"]'); // All with "property" set to "value" exactly.

(Complete list of attribute selectors on MDN.)

This finds all elements with the attribute property. It would be better to specify a tag name if possible:

document.querySelectorAll('span[property]');

You can work around this if necessary by looping through all the elements on the page to see whether they have the attribute set:

var withProperty = [],
    els = document.getElementsByTagName('span'), // or '*' for all types of element
    i = 0;

for (i = 0; i < els.length; i++) {
    if (els[i].hasAttribute('property')) {
        withProperty.push(els[i]);
    }
}

Libraries such as jQuery handle this for you; it’s probably a good idea to let them do the heavy lifting.

For anyone dealing with ancient browsers, note that querySelectorAll was introduced to Internet Explorer in v8 (2009) and fully supported in IE9. All modern browsers support it.

More Related Contents:

  1. jQuery. Find all attribute values within/under elements `script or noscript or iframe` that have attribute keys as `src or href` [closed]
  2. When I load the page the alert(“hey”) function appears, why does the js function execute despite no onClick call? How do I prevent it from doing so?
  3. How can I tell if a DOM element is visible in the current viewport?
  4. What is the difference between properties and attributes in HTML?
  5. Parse an HTML string with JS
  6. “Submit is not a function” error in JavaScript
  7. jQuery document.createElement equivalent?
  8. What is the most efficient way to create HTML elements using jQuery?
  9. Browser detection versus feature detection
  10. How can I count text lines inside an DOM element? Can I?
  11. How to show Page Loading div until the page has finished loading?
  12. Can scripts be inserted with innerHTML?
  13. What is offsetHeight, clientHeight, scrollHeight?
  14. How can I get the DOM element which contains the current selection?
  15. How to avoid the need for ctrl-click in a multi-select box using Javascript?
  16. How to Implement DOM Data Binding in JavaScript
  17. Dynamically creating HTML elements using Javascript?
  18. What’s standard behavior when element is clicked? Will it submit the form?
  19. Get element at specified position – JavaScript
  20. Add SVG element to existing SVG using DOM
  21. How to iterate through all attributes in an HTML element?
  22. Get the DOM path of the clicked
  23. How to move table row in jQuery?
  24. contentDocument for an iframe
  25. Remove specific HTML tag with its content from javascript string
  26. How to add DOM element script to head section?
  27. Get elements from page.evaluate in Puppeteer? [duplicate]
  28. How to escape HTML
  29. User Activity Tracking using javascript library [closed]
  30. Boolean HTML Attributes

Leave a Comment