patternjavascriptMinor
JavaScript function to get DOM elements by any attribute
Viewed 0 times
elementsjavascriptanyfunctiongetdomattribute
Problem
I needed to write a function today in JavaScript that would return all elements based on a given attribute.
e.g retrieve all elements that have an id attribute in them.
The function I wrote for this is as follows:
Looking at this, I am sure it could be written a great deal better. Any feedback would be much appreciated!
e.g retrieve all elements that have an id attribute in them.
The function I wrote for this is as follows:
function getElements(attrib) {
// get all dom elements
var elements = document.getElementsByTagName("*");
// initialize array to put matching elements into
var foundelements = [];
// loop through all elements in document
for (var i = 0; i 0) {
// loop through element's attributes and add it to array if it matches attribute from argument
for (var x = 0; x < elements[i].attributes.length; x++) {
if (elements[i].attributes[x].name === attrib) {
foundelements.push(elements[i]);
}
}
}
}
return foundelements;
}Looking at this, I am sure it could be written a great deal better. Any feedback would be much appreciated!
Solution
querySelectorAll
First off, if you're only dealing with relatively modern browsers (basically anything above IE7), you can use
Here's the fiddle: http://jsfiddle.net/rc6Pq/
Sizzle
If you're stuck having to support IE7 and below, then you might as well just include the Sizzle selector engine, since you're bound to be using some additional selectors in the future. Once you include the Sizzle script in your page, you could then just use it in a similar fashion to the native
Here's the fiddle: http://jsfiddle.net/rc6Pq/1/
jQuery
If you're already using jQuery on the page, you don't have to use Sizzle separately, since jQuery has Sizzle incorporated within it. If that's the case, just use this:
Here's the fiddle: http://jsfiddle.net/rc6Pq/2/
First off, if you're only dealing with relatively modern browsers (basically anything above IE7), you can use
querySelectorAll, which is the fastest and easiest method to go about this:document.querySelectorAll('[' + attrib + ']');Here's the fiddle: http://jsfiddle.net/rc6Pq/
Sizzle
If you're stuck having to support IE7 and below, then you might as well just include the Sizzle selector engine, since you're bound to be using some additional selectors in the future. Once you include the Sizzle script in your page, you could then just use it in a similar fashion to the native
querySelectorAll:Sizzle('[' + attrib + ']');Here's the fiddle: http://jsfiddle.net/rc6Pq/1/
jQuery
If you're already using jQuery on the page, you don't have to use Sizzle separately, since jQuery has Sizzle incorporated within it. If that's the case, just use this:
$('[' + attrib + ']').get();Here's the fiddle: http://jsfiddle.net/rc6Pq/2/
Code Snippets
document.querySelectorAll('[' + attrib + ']');Sizzle('[' + attrib + ']');$('[' + attrib + ']').get();Context
StackExchange Code Review Q#14061, answer score: 9
Revisions (0)
No revisions yet.