The return value of the document.getElementsByTagName () method

Source: Internet
Author: User
Keywords Web page production Ajax javascript
Tags ajax array browser browsers code document firefox function

The

document.getElementsByTagName () method's return value
/*
document.getElementsByTagName () method takes a particular element out of its return value. The first thought that its return value was an array, the result was wrong. It returns a DOM object that can be traversed, with a length attribute, but not an array.
Evidence here:
HTML code<script>
    window.onload = function () {
        var divs = document.getelementsbytagname ("div");
       document.getElementById ("info"). innerHTML =!! (divs instanceof Array);
   }
</script>
<div></div>
<div id= "info" ></DIV>

Take care of it as an array brother and sister.
Since it's not an array, then what is it?
Continue to explore:
HTML code<script>
Window.onload = function () {
var divs = document.getelementsbytagname ("div");
document.getElementById ("Info"). innerHTML = Object.prototype.tostring.call (divs);
}
</script>
<div></div>
<div id= "Info" ></div>


Open in each browser:
IE: [Object Object]
Firefox:[object Htmlcollection]
Chrome/safari/opera:[object NodeList]
This result is very tangled, 5 browsers 3 kinds of results, which IE and Firefox seems to be less sociable.
Helpless, simply to check the standard.

The return value of the document.getElementsByTagName () method in the Dom3

getElementsByTagName () is a method introduced from Dom1 to obtain a set of elements with the same label name. The interface is preserved in Dom2 and DOM3.
Its return value is a nodelist.
Here is the description of its interface:
C + + CodeInterface Element:node {
...
NodeList getElementsByTagName (in domstring name);
...
}
For more information on the getElementsByTagName interface in Dom3, see here: getElementsByTagName

The return value of the getElementsByTagName () method in the mainstream browser

The description of this method in the official documents of each browser also conforms to the requirements of the nodelist, which is a collection of objects of the type returned.
It seems that Firefox is contradicting itself, haha.
About the information, look here.
Mozilla official: Document.getelementsbyname
Safari official WebKit Dom:getelementsbyname
MSDN Official: Getelementsbyname method
So what is the NodeList interface, and what is its feature, and then look down.

NodeList interface

The DOM3 of the Consortium stipulates that NodeList is an ordered set of nodes.

Its properties and methods:
NodeList. Length
Returns the number of objects in the collection. Length is a read-only property.
node = nodelist. Item (Index)
Returns the node of the specified index from the collection.

Visible, an object of type NodeList can use the item () method to get the node in it.
In Firefox,chrome and Safari, the definition of nodelist is the same as that of the same.
In IE, NodeList inherits the collection interface, so NodeList objects support methods in collection interfaces.
Opera did not find the relevant instructions.
Descriptive information on nodelist:
Dom3:interface NodeList of the Consortium
Mozilla:nodelist
Safari official WebKit Dom:nodelist
MSDN NodeList Interface: NodeList class
Let's start by introducing how to

Value from the return value of the document.getElementsByTagName () method

Summary table:

Note:
1. The Red Representative does not support, the Green Representative supports.
2. For the 3 lines of Nodelist[name], nodelist (name), and Nodelist.nameditem (name), there is also a discrepancy between IE support and other browsers that support this approach, when document, When an element with the same name exists in the return value of getElementsByTagName (), IE returns a set of elements, while the other supported browsers return only the first element.

Visible, in IE and opera, getElementsByTagName () returns the value like a htmlcollection, while in Firefox, between Htmlcollection and NodeList.

Nodelist[index] and Nodelist[id]

Code:
HTML code<script type= "text/web Effects"
   window.onload = function () {
        var spans = document.getElementsByTagName ("span");
       var span2 = spans[1];
       var span3 = spans["Span3"];
       document.getElementById ("info"). innerHTML = "<br/>nodelist[index]. ID: "+ span2.id
                                                                      + <br/> Nodelist[id].id: "+ span3.id;
  }
</script>
<span id= "Span1" ></SPAN>
<span id= "SpaN2 "></span>
<span id=" Span3 "></SPAN>

<div id= "Info" ></div>

Test results are the same in each browser:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.