A description of the difference between a JavaScript data element collection and an array _javascript tips

Source: Internet
Author: User
where the Getelementsbyname (name) method is to get all the elements in the page that have the name attribute, but this method is not the same as what the IE is fetching in the standard browser. In IE, the Getelementsbyname (name) method takes the element that itself has the name attribute, which is all of the elements listed in the form form (these elements themselves have the name attribute); Standard browser getelementsbyname ( The element that the name method takes is an element with the name attribute (this property is itself + artificially added). So if you use this method in IE browser to get all the elements with name on the page, you can only remove those elements (form class elements) that themselves have this attribute, and the name attribute elements that are added are not taken out; standard browsers do not. It takes all the elements with the name attribute out of the page.

Getelementsbyname () and the getElementsByTagName () method are the same as they make the page elements that are made into a collection of elements that are not arrays (although using the Console.log in Firebug () When printed, it is in the form of an array). If you use the Object.porototype.toString.apply (Arr) method to view the resulting data, it returns "[object Htmlcollection]" instead of "[Object Array]". Thus, the collection of elements obtained by using these two methods cannot be manipulated like an array to invoke some methods of the array, but the collection needs to be converted, and the element collection can be converted to an array to handle the elements inside.

This collection of elements has the following properties and methods:

1. Index of Element

2, the length of the collection of elements

3, Item () method: the corresponding elements in the collection can be obtained by passing in different index values. There is no such method under IE.

4, FF also has a Nameditem (name) method, get the first element with the Name property. This method is only available under FF.

There are many ways to transform elements into arrays, and you can search the Internet for a lot of things. can also go to Situ is the United States of this "JS will be class array objects converted into a group of objects" blog to learn one.

The following is an array conversion method:
Copy Code code as follows:

function Makearray (arr) {
if (Arr.item) {
var len = arr.length;
var array = [];
while (len--) {
Array[len] = Arr[len];
}
return array;
}
return Array.prototype.slice.call (arr);
}

This is a small example, you can look at the results of the conversion:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> element class array with array </title> <span id=" PRESERVE85D7C189F93544D4A971AD0748FFFEF3 " class= "Wlwriterpreserve" ><script> function getelements () {var Objarr = document.getelementsbyname (' test '); var arr = [1, 2, 3, 4, 5, 6]; var array; Alert (' Length of the set of elements: ' + objarr.length '); The number of elements set in IE is not the same as alert (the array type defined by the function: ' + Object.prototype.toString.apply (arr)) for (Var i in Objarr) {alert (' element collection has attributes and Method: ' +i+ ': ' + objarr[i]+ ' the type of property and method: ' + Object.prototype.toString.apply (Objarr[i])} array = Makearray (Objarr); Alert (' collection converts the type after the array: ' + Object.prototype.toString.apply (array)}; function Makearray (arr) {if (Arr.item) {var len = arr.length; var array = []; while (len--) {Array[len] = Arr[len]; } RetuRN Array; return Array.prototype.slice.call (arr); The </script></span> </pead> <body> getelements () function defines an array whose contents are 1,2,3,4,5,6 <div name= "Te St "></div> <input type=" text "name=" Test "> <input type=" text "name=" Test "> <input type=" button "Name=" test "value=" Test1 "> <input type=" button "name=" Test "value=" Test2 "> <input type=" button "onclick=" GetElements () "value=" getelements "> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
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.