why not (how to) document.getElementsByClassName("*")?

Question

We can get all dom with

document.getElementsByTagName("*")

Why can't we use

document.getElementsByClassName("*")

to get all tags which have the class attribute set?

And similarly use

document.getElementById("*")

to get tags with id attribute set?

Although these functionalities are not very necessary, and may have no demand, I hope someone tell me how to achieve the same. Thanks.

getElementsByClassName doesn't exist in some still-used versions of IE because it was added later on down the line after prototype.js created it. I wouldn't rely on it. — TheZ, Aug 15 '12 at 16:08
What would `document.getElementById("*")` do? IDs must be unique. — j08691, Aug 15 '12 at 16:08
Why do you ask this question? what problem will be solved if this was enabled? — Shiplu Mokaddim, Aug 15 '12 at 16:09
`.querySelectorAll` is not only better supported but also capable of doing this with `.querySelectorAll('[class]')` or `.querySelectorAll('[id]')` — Esailija, Aug 15 '12 at 16:17

jfriend00 · Answer 1 · 2012-08-15T16:32:46.857

8

The answer is because getElementsByClassName() and getElementById() don't take wildcards. They aren't spec'ed or written to do that so you can't use them that way.

Further getElementById() only returns a single DOM element, not an array of elements so it could never work that way.

If you wanted to get all elements with a class name or all elements with an id, you could do so like this:

function getAllElementsWithAttribute(attr) {
    var results = [];
    var all = document.getElementsByTagName("*");
    for (var i = 0, len = all.length; i < len; i++) {
        if (all[i][attr]) {
            results.push(all[i]);
        }
    }
    return(results);
}

You could then get all elements with a class name with this:

var items = getAllElementsWithAttribute("className");

Or, get all elements with an ID with this:

var items = getAllElementsWithAttribute("id");

edited Aug 15 '12 at 16:32

answered Aug 15 '12 at 16:08

jfriend00

683,504
96
985
979

7+ years later... Hi jfriend00, I don't know JavaScript, but why do you have "len = all.length; i < len" instead of just "i < all.length"? – Terry Jan 14 '20 at 21:27
@Terry - `document.getElementsByTagName()` returns a liveCollection of elements. As such, `all.length` is an accessor, not a static property. So, if you aren't doing anything that will cause the liveCollection to change length while iterating it, then it's faster to cache the length once at the start of the loop rather than hitting the `.length` property on every iteration of the loop. Now, in most cases, the performance difference will be inconsequential, but that was the reasoning back 7+ years ago. – jfriend00 Jan 14 '20 at 22:16

score 0 · Answer 2 · edited May 23 '17 at 12:20

As @jfriend00 has suggested in an answer before, the functionality doesn't exist natively in the browsers implementation of javascript. Again, the answer also contains a way to do it using pure javascript.

Alternatively, you have to use frameworks instead that sit on top of javascript and give you better selectors for instance.

So taking into consideration one such framework, jQuery, you can:

Select all elements with a class:

$('[class]')

Select all elements with an id:

$('[id]')

score 0 · Answer 3 · edited May 23 '17 at 12:27

getElementsByClassName() isn't implemented on all browsers, most notably Internet Explorer. However you can use various javascript libraries, such as jQuery, to achieve this functionality in a cross browser manner. None of the default functions take a wild card * to get all values. Though yet again you could use jquery to do so $('[id]') as seen in this SO post: jquery get only all html elements with ids

David Navarre · Answer 4 · 2012-08-15T16:16:39.537

-1

Here's a quick link for getElementByClass - http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/ - You could modify the code to return all elements with a non-blank class by modifying the if statement to

if (allHTMLTags[i].className!="") {

To get all elements with an id, just get all elements and discard those which have no id.

edited Aug 15 '12 at 16:16

answered Aug 15 '12 at 16:10

David Navarre

1,022
10
27

`getElementsByClassName()` is a standard method implement by modern browsers. Older versions of IE are missing it, but it is widely implemented elsewhere. – jfriend00 Aug 15 '12 at 16:12
@jfriend00 I've modified the answer to get at what he was really asking instead of how I read it initially (which was wrong). – David Navarre Aug 15 '12 at 16:16

why not (how to) document.getElementsByClassName("*")?

4 Answers4