CODEWITHSUNDEEP
javascript
Arjun
Arjun

Reputation: 6729

behavior of javascript getElementById() when there are elements with duplicate IDs in HTML DOM?

Can someone shed some light on the behavior of javascript getElementById() when there are elements with duplicate IDs in HTML DOM??

Upvotes: 10

Views: 9389

Answers (5)

Esailija
Esailija

Reputation: 140228

If you have multiple elements with the same id, you can select them all with

document.querySelectorAll("[id='myid']")

However, if you are in control of it you should just fix the HTML.

Upvotes: 14

Ayman Safadi
Ayman Safadi

Reputation: 11552

While there is no standard behavior defined, typically it will return the first element found.

Demo: http://jsfiddle.net/ruNKK/

Upvotes: 13

Guffa
Guffa

Reputation: 700432

Yes, the behaviour is undefined.

The markup is invalid, and there is no standard that defines what the browser should do in that situation.

Each browser will try to do something reasonable, usually return the first element. Other possible ways that it could be handled would be to return the last element, no element at all (null), or throw an error.

Upvotes: 8

jfriend00
jfriend00

Reputation: 707546

It is illegal to have multiple objects with the same ID. Because it is not supposed to be allowed, the behavior of getElementById() with multiple matches present is not specified in the spec. In fact, the spec explicitly says: "Behavior is not defined if more than one element has this ID.".

In the few browsers I've tried this in, it returns the first one, but obviously you should not rely on that.

If you want to find all matches, you would have to design a query that looks at the IDs of all tags and collects the ones that match yours.

In plain javascript, you could do it like this:

function getAllElementsById(id) {
    var all = document.getElementsByTagName("*");
    var results = [], elem;
    for (var i = 0; i < all.length; i++) {
        elem = all[i];
        if (elem.id && elem.id === id) {
            results.push(elem);
        }
    }
    return(results);
}

Upvotes: 4

underscore
underscore

Reputation: 6887

yes.It will return to the first one.We can not use same ID as a HTML attributes
1. * view plaincopy to clipboardprint?

* {  
 margin: 0;  
 padding: 0;  
}

Let’s knock the obvious ones out, for the beginners, before we move onto the more advanced selectors.

The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I’d advise you to never use this in production code. It adds too much weight on the browser, and is unnecessary.

The * can also be used with child selectors. view plaincopy to clipboardprint?

#container * {  
 border: 1px solid black;  
}

This will target every single element that is a child of the #container div. Again, try not to use this technique very much, if ever.

X

view plaincopy to clipboardprint?

#container {  
   width: 960px;  
   margin: auto;  
}

Prefixing the hash symbol to a selector allows us to target by id. This is easily the most common usage, however be cautious when using id selectors.

Upvotes: 1

Related Questions