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

Question

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

Navigation

#1 by (5 votes)

3

The w3cschools site has an example of the getelementbyid () function. It turns out that in each browser this example has a different return and I could not find a response from that. 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 responses of each browser are as follows:

- 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

asked by anonymous 20.07.2014 / 05:52

1 answer

Error making clone with Git Automatic remote upload of zipped file in PHP

score 5 · Accepted Answer

Every element of the DOM, accessible through JavaScript (whether returned by document.getElementById or by other means) has a attribute property that is type NamedNodeMap . Translating freely from the specification linked above (emphasis mine):

Objects implementing the NamedNodeMap interface are used to represent collections of Nodes that can be accessed via name. Note that the NamedNodeMap does not inherit from the 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 a order to those Nodes.

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

As pointed out by Cahe in 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;