Deep understanding of the JavaScript selector api--4 element selector

xdirectory [1]id Property [2] Tag name [3]name property [4]all Front]

When it comes to the most common DOM applications, I'm afraid I'm going to get a reference to a specific element or group of elements. The DOM defines a number of ways to select elements, including getElementById (), getElementsByTagName (), Getelementsbyname (), and document.all () 4. Next, these 4 methods will be described in detail

getElementById ()

Any HTML element can have an id attribute, which must be unique in the document

[note] If multiple ID names appear in the browser, the CSS style takes effect for all elements of that ID name, but the JS script only takes effect on the first element that appears with that ID name

getElementById () This method takes a parameter: To get the ID of the element, return the element if it is found, or null if it does not exist

<div id= "mydiv" ></div><script>var div1 = document.getElementById (' mydiv '); var div2 = document.getElementById (' mydiv '); Console.log (DIV1); // <div id= "mydiv" ></div>console.log (DIV2); // NULL</script>

About the getElementById () method, the Ie7-browser has two bugs

"1" The method is case-insensitive to the ID of the matching element

<div id= "mydiv" style= "height:20px;" ></div><script>var div1 = document.getElementById (' mydiv '); // error in standard browser, but under Ie7-browser, the background color of the element with Id ' mydiv ' changed to magenta Div1.style.backgroundColor = ' Pink '; </script>

The name attribute of the "2" form element is also recognized as an id attribute. Therefore, in order to avoid this problem, it is best not to allow the Name property of the form element to be the same as the ID property of other elements

<button name= "Test" >0</button><script>var mydiv = document.getElementById (' test '); // error in standard browser, but output 0 in ie7-browser Console.log (mydiv.innerhtml); </script>

[note] If an id attribute exists in an element in an HTML document, and if the Window object does not have a property of that name, the window object is given a property whose name is the value of the ID property, and their value points to the HtmlElement object that represents the document element, so The element ID implicitly becomes a global variable, with the same effect as the getElementById (ID) method

<div id= "test" ></div><button id= "btn" > button one </button><button id= "Location" > button two </ Button><script>varOBTN = document.getElementById (' btn ')); varOdiv = document.getElementById (' Test '); Obtn.onclick=function(){    //to get an object with ID test by using the getElementById () methododiv.style.height= ' 10px '; //get the same object by ID propertyTest.style.backgroundColor = ' Pink ';}//because the location itself is a property under the Window object, it is already occupied, so it cannot represent the id=location elementLocation.onclick =function() {alert (2);}</script>

In Internet Explorer, some elements of HTML, if they have the name attribute, are the same as the id attribute, implicitly becoming global variables, including:

<a> <embed> <form> <iframe>  <object>

The ID is unique, but the Name property is not unique. An implicit global variable with that name references a class array object, including all of the named elements

<a href= "#" name= "test" >a element 1</a><a href= "#" name= "test" >a element 2</a><div id= "test" >div element </div><script>//ie, two a elements and a DIV element font become red for (var i = 0; i < Test.length; i++) {    = ' red ';} </script>

getElementsByTagName ()

The getElementsByTagName () method takes a parameter, which is to get the label name of the element, and returns a class array object nodelist that contains 0 or more elements. You can use the square bracket syntax or the item () method to access an item in a class array object that represents the number of elements in the object

<div> element One </div><div> element two </div><script>var divs = document.getElementsByTagName (' div ');d ivs[0].style.color = ' Red ';d Ivs.item (1). Style.backgroundcolor = ' Pink '; </script>

[note] The class array object obtained by the getElementsByTagName () method has a Nameditem () method that can take the first value in the collection through the element's Name property. Safari and IE do not support this method

<div> element One </div><div name= ' Test ' > element two </div><div name= ' test ' > element three </div><script >var divs = document.getelementsbytagname (' div ');d ivs.nameditem (' test '). Style.color = ' Red ' ; </script>

The getElementsByTagName () method can be used with the Document object, or it can be used with element element objects that invoke the descendant elements of the method's elements

<ul id= ' Myul ' >    <li>1</li>    <li>2</li></ul><script>var Oul = document.getElementById (' Myul '); var lis = oul.getelementsbytagname (' li '); lis[0].style.color = ' red '; </script>

Getelementsbyname ()

The Getelementsbyname () method returns all elements with the given name attribute

<button name= ' Test ' > button one </button><button name= ' Test ' > button two </button><script>var button = document.getelementsbyname (' test '); button[0].style.color = ' red '; </script>

About the Getelementsbyname () method, ie browser has three differences compared to other browsers

The "1" ie9-browser only supports the use of the Getelementsbyname () method on form elements

<div name= ' Test ' > Element one </div><div name= ' Test ' > element two </div><script>// Standard Browser, Element one color changes to red, but under ie9-browser the error is var divs = document.getelementsbyname (' Test ');d ivs[0].style.color = ' Red '; </script>

The use of the Getelementsbyname () method in the "2" ie9-browser also returns the element that matches the id attribute. Therefore, do not set the name and ID property to the same value

<button name= ' Test ' > button one </button><button name= ' Test ' > button two </button><button id= "Test" > Button three </button><script>// standard Browser, button three does not change color, but ie9-browser, key three also become red var buttons = Document.getelementsbyname (' Test ');  for (var i = 0; i < buttons.length; i++) {    = ' red ';} </script>

"3" If the class array object obtained by the Getelementsbyname () method uses the Nameditem () method, because each item has the same name property, only the first item is returned

[note] Only Ie8-ie11 browser support

<button name= ' Test ' > button one </button><button name= ' Test ' > button two </button><script>var buttons = document.getelementsbyname (' test '); Buttons.nameditem (' test '). Style.color = ' red '; </script>

document.all ()

Before Dom Normalization, IE4 introduced the document.all[] collection to represent the elements in all documents

<div>div</div><button> button </button><script>console.log (document.all); // [HTML, head, Meta, title, Body, Div, button, script] // The standard browser returns 8, while the Ie8-browser returns 9 because it declares the document <! DOCTYPE Html> is recognized as a comment, and the annotation is recognized as an element, so one more console.log (document.all.length); </script>

Now that the Document.all method has been deprecated, to achieve a similar effect, you can use the document.getElementsByTagName (' * ') method, which indicates that all elements are matched

<div>div</div><button> buttons </button><script>console.log ( document.getElementsByTagName (' * ')); // [HTML, head, Meta, title, Body, Div, button, script] // The standard browser returns 8, while the Ie8-browser returns 9 because it declares the document <! DOCTYPE Html> is recognized as a comment, and the annotation is recognized as an element, so one more Console.log (document.getelementsbytagname (' * '). length); </script>

At last

The Getelementsbyname () method is not commonly used, plus the obsolete document.all (). In fact, the commonly used methods of acquiring elements are getElementById () and getElementsByTagName (). Getelementsbyclassname () not too? Yes, but it and queryselector () are a new way of HTML5 expansion, which is not very good, and these new methods will be described in detail in the sequel.

Welcome to Exchange

Deep understanding of the JavaScript selector api--4 element selector