Javascript learning notes (18) Get the element code on the page

1. Get Elements

The getElementById () method is used to obtain the element id. If the element id does not exist, null is returned.
Make sure that the name of the form element is not the same as the id of other elements. ie browsers under IE8 can use this method to obtain the element through the name attribute of the element.
The following surface element is used as an example.

<Div id = "myDiv"> here is the content of the div whose id is "myDiv" </div> var document. getElementById ("myDiv"); // "myDiv" case sensitive, get reference to the <div> element
The getElementsByTagName () method obtains an element through the element's tag name. It accepts a parameter, that is, the tag name of the element to be obtained, and returns a NodeList containing 0 or more.
Copy codeThe Code is as follows:
Var images = document. getElementsByTagName ("img"); // obtain all elements on the page.

Alert (images. length); // number of images
Alert (images [0]. src); // src of the first image Element
Alert (images. item (0). src); // same as above

The getElementsByName () method obtains an element through the name attribute of the element. It accepts a parameter that is used to obtain the name attribute of the element. It is often used to obtain the single-choice button.
Copy codeThe Code is as follows:
<Ul>
<Li> <input type = "radio" name = "color" value = "red" id = "colorRed"> <label for = "colorRed"> </label> </ li>
<Li> <input type = "radio" name = "color" value = "green" id = "colorGreen"> <label for = "colorGreen"> </label> </ li>
<Li> <input type = "radio" name = "color" value = "blue" id = "colorBlue"> <label for = "colorBlue"> </label> </ li>
</Ul> var radios = document. getElementsByName ("color"); // obtain all radio buttons for name = "color"


2. Obtain element subnodes or element subnodes and their child nodes
Copy codeThe Code is as follows:
<Ul id = "myList">
<Li> Project 1 </li>
<Li> Project 2 </li>
<Li> Project 3 </li>
</Ul>

Note: IE believes that the <ul> element has three subnodes, which are three elements respectively. other browsers will consider that there are seven subnodes, including three elements and four text nodes, if <ul> is in a row:

<Ul id = "myList"> <li> Project 1 </li> <li> Project 2 </li> <li> Project 3 </li> </ul>
Any browser considers three subnodes

Obtain the child nodes of an element:
Copy codeThe Code is as follows:
Var ul = document. getElementById ("myList ");
For (var I = 0, len = ul. childNodes. length; I <len; I ++ ){
If (ul. childNodes. length [I]. nodeType = 1) {// nodeType = 1 indicates that the node is an element node, not a text node.
// Perform some operations
}
}

Obtain the child nodes of an element and its child nodes:
Copy codeThe Code is as follows:
Var ul = document. getElementById ("myList ");
Var items = ul. getElementsByTagName ("li"); // li in li will also be obtained

3. Search for other nodes by node attributes
The nextSibling attribute points to the next sibling node of the current node.
The previussibling attribute points to the previous sibling node of the current node.
The firstChild attribute points to the first subnode, And the lastChild points to the last subnode.
ChildNodes stores all the subnodes (actually the NodeList object). You can use square brackets to access the first subnode, such as someNode. childNodes [0 ].
The parentNode attribute points to the parent node.

The node relationship is as follows:

NodeList is an array object. We can convert it to an array. The function is as follows:
Copy codeThe Code is as follows:
Function converToArray (nodes ){
Var arrary = null;
Try {
Array = Array. prototype. slice. call (nodes, 0 );
}
Catch (ex ){
Array = new Array ();
For (var I = 0, len = nodes. length; I <len; I ++ ){
Array. push (nodes [I]);
}
}
Return array;
}

Var div = document. getElementById ("side ");
Alert (converToArray (div. childNodes ));