Like what:
Copy Code code as follows:
var anchors = document.getElementsByTagName ("a");
for (i = 0; i < anchors.length; i++) {
var ele=anchors[i];//takes an element
Some code here
}
The above code represents getting all the link elements in the document and then traversing to do something.
Perhaps you might ask, is this a set of DOM elements obtained by this method not an array? You see, you can get the length attribute directly, and you can also take the corresponding individual element according to the index, according to Daniel's famous duck theory, it walks like a duck (has the length attribute), barks like a duck (according to the index value), then it is a duck. The conclusion is self-evident, isn't it?
If you've had a bit of a deep understanding of JavaScript, have the length attribute, you can index the value, it must be an array, as if arguments would do it, arguments is an array? While actually developing, we manipulate it as a normal array, length and for-loop use, and it's not necessarily an error.
However, it is really not an array, but rather a nodelist. NodeList is not an array.
What a surprise,right?
1, nodelist why not array?
To verify that nodelist is not an array, the most straightforward approach might be to try the array-specific push and pop Dafa:
Copy Code code as follows:
var anchors = document.getElementsByTagName ("a");
var Newele = document.createelement ("a");/create a new A element
Anchors.push (Newele);//push
var element= anchors.pop ();//pop
You can test for yourself that the above code, whether it's a push or a pop method, will prompt you without a push or pop method. Do you have any questions? Is that the end? This one-sided test makes the building pig can not rest assured peace of conscience. We can prove that the nodelist is not an array, as it is to prove that arguments is not an array. Look at the code below:
Copy Code code as follows:
Array.prototype.testNodeList = "Test NodeList"; Array Add prototype Property
function Funcnodelist () {
var links = document.getElementsByTagName ("a");
alert (links.testnodelist);
}
function Test () {
Alert (new Array (). testnodelist); Test nodelist
Funcnodelist (); #ff0000? What the hell is that?
}
Test (); Test
Through the above analysis, we can be sure that nodelist is not an array. So how do we operate the nodelist in the customary way we operate the set?
2, like Operation array Operation NodeList
Since nodelist has length, you can take a value for the loop index, is it not easy to convert the array? Haha, the most direct way of thinking is this: g
Copy Code code as follows:
var arr = new Array ();
var anchors = document.getElementsByTagName ("a")
for (var i = 0; i < anchors.length; i++) {
var ele = anchors[i];
Arr.push (ele); Arr is the array we want.
}
Ming Synopsis: First new array, Traverse nodelist, and then push each individual element into the array variable, the last operation of the array variable, over. Is there any sense of an IQ insult?
The above is not to joke with you, because the following is a building pig on the internet Google to, two lines of code can convert nodelist into an array to use:
Copy Code code as follows:
var anchors = document.getElementsByTagName ("a");
var arr = Array.prototype.slice.call (anchors); Non IE browser normal
However, the most regrettable thing happened: The above code in the evil of IE can not work properly, IE will give you a hint: the lack of JScript objects.
You may be dismissive of a large section of the above analysis that there is no need to convert nodelist into an array. In fact, the building pig individual also thinks, no matter in which kind of programming language, type conversion is very unwise behavior. The most common such as C # in the boxing and unboxing, numeric data conversion, there are performance problems, inadvertently will be accidents. But why should the nodelist be treated as an array alone? Because of the dynamic change of nodelist, the direct operation of the nodelist is likely to accidentally break the restricted area and unaware. Here's an example:
(1), HTML document fragment
<div id= "Divanchor" >
<a href= "http://www.cnblogs.com/jeffwongishandsome/" >link test</a>
</div>
(2), JavaScript test code
Copy Code code as follows:
var anchors = document.getElementsByTagName ("a");
for (i = 0; i < anchors.length; i++) {
var ele= document.createelement ("a");
Ele.setattribute ("href", "http://www.cnblogs.com/jeffwongishandsome/");
Ele.appendchild (document.createTextNode ("New link Test"));
document.getElementById ("Divanchor"). AppendChild (Ele); Div Append a new link
}
After the document has finished loading, execute the script above. Our intention is to append a a element to a div that already exists. But, you can run, the browser crash off? Lou Pig here ie directly hang up, FF prompt script is busy, whether to stop the script to run, click to stop, the page has generated n more than a link. In fact, we can boldly analyze the reason: For Loop nodelist (prerequisite: The For loop adds new elements inside the nodelist length changes. Thanks to the advice of Chen Dong shoes, its length will constantly change and rise, cycle and recycle, and finally become a dead loop. And the following code is the same as we expected:
Copy Code code as follows:
var links = document.getElementsByTagName ("a");
var anchors = null; Array
try {
Anchors = Array.prototype.slice.call (links);
}
catch (E) {//compatible IE
anchors = new Array ();
for (var i = 0; i < links.length; i++) {
Anchors.push (Links[i]);
}
}
for (i = 0; i < anchors.length i++) {//array loop is much safer
var ele = document.createelement ("a");
Ele.setattribute ("href", "http://www.cnblogs.com/jeffwongishandsome/");
Ele.appendchild (document.createTextNode ("New link Test"));
document.getElementById ("Divanchor"). AppendChild (Ele); Div Append a new link
}
So you might ask, can't you switch? Not so rigid, of course, can be, as long as we are familiar with the coding habits of a little bit of a small operation can be:
Copy Code code as follows:
var anchors = document.getElementsByTagName ("a");
var len = anchors.length; Define a variable
for (i = 0; i < len; i++) {//loop for local variable len
var ele = document.createelement ("a");
Ele.setattribute ("href", "http://www.cnblogs.com/jeffwongishandsome/");
Ele.appendchild (document.createTextNode ("New link Test"));
document.getElementById ("Divanchor"). AppendChild (Ele); Div Append a new link
}
Here, regardless of whether there is no doubt, the actual programming how to choose, Lou Pig to thank you for your reading. Look forward to pointing.
Person: Jeff Wong
