What is the return order of the attributes of the getelementbyid function?

Asked

Viewed 277 times

3

w3cschools website has an example of the function getelementbyid(). It turns out that in each browser this example has a different return and I could not find a pq response to it. Does anyone have any idea why this happens? the example is this:

<!DOCTYPE html>
<html>
<body>

<img id="myImg" alt="Flower" src="klematis.jpg" width="150" height="113">

<p>Click the button to display each attribute's name and value of the image above.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myImg");
    var txt = "";
    var i;
    for (i = 0; i < x.attributes.length; i++) {
        txt = txt + x.attributes[i].name + " = " + x.attributes[i].value + "<br>";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

The answers of each browser are these:

- Firefox 30.0:

    width = 150
    height = 113
    src = klematis.jpg
    alt = Flower
    id = myImg

 - Chrome 36.0.1985.125:

    id = myImg
    alt = Flower
    src = klematis.jpg
    width = 150
    height = 113

 - IE 11.0.9600.17207

    width = 150
    height = 113
    id = myImg
    alt = Flower
    src = klematis.jpg

For example, if I want to have access to the id attribute in ff the index will be 4, in Chrome it will be 0 and in IE it will be 2.

javascript

  • The order is irrelevant in this case don’t you think? since you can access the attributes of the object associatively by name. I believe that the different orders are given by the simple fact of how each browser sorts the attributes in memory.

1 answer

5


Every DOM element, accessible via Javascript (is returned by document.getElementById either by other means) possess a property attribute that is of the kind NamedNodeMap. Translating freely from the above linked specification (emphasis my):

Objects implementing the Namednodemap interface are used to represent collections of Nodes that can be accessed by name. Note that Namednodemap does not inherit from Nodelist; Namednodemaps are not kept in any particular order. Objects contained in an object implementing Namednodemap can also be accessed by an ordinal index, but this is simply to allow a convenient enumeration of the contents of a Namednodemap, which does not imply that the DOM specifies an order to these Nodes.

That is, since the specification does not impose any order, each browser is free to implement it the way it wants (including dynamically changing the order during the page lifecycle). One should therefore not depend on a specific order when making use of this API.

Like pointed out by Cahe in the comments, the best way to access these attributes is by name, not by index. Example:

var x = document.getElementById("myImg");
var txt = "";
txt = txt + "id = "     + x.attributes.getNamedItem("id").value + "<br>";
txt = txt + "src = "    + x.attributes.getNamedItem("src").value + "<br>";
txt = txt + "width = "  + x.attributes.getNamedItem("width").value + "<br>";
txt = txt + "height = " + x.attributes.getNamedItem("height").value + "<br>";
txt = txt + "alt = "    + x.attributes.getNamedItem("src").value + "<br>";
document.getElementById("demo").innerHTML = txt;

Or simply (beware of name collisions):

var x = document.getElementById("myImg");
var txt = "";
txt = txt + "id = "     + x.attributes.id.value + "<br>";
txt = txt + "src = "    + x.attributes.src.value + "<br>";
txt = txt + "width = "  + x.attributes.width.value + "<br>";
txt = txt + "height = " + x.attributes.height.value + "<br>";
txt = txt + "alt = "    + x.attributes.src.value + "<br>";
document.getElementById("demo").innerHTML = txt;

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.