HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

JavaScript function to get DOM elements by any attribute

Submitted by: @import:stackexchange-codereview··
0
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:

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 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.