JavaScript Learning Notes (18) to get the element code in the page _ basics

1. Get element

getElementById () method, gets the element by the ID of the element, accepts an argument that gets the ID of the element, and returns NULL if the ID does not exist
Be careful not to have the name of the form element the same as the ID of another element, ie browsers below IE8 Use this method to get the element through the element's Name property
Take the following element as an example

<div id = "Mydiv" > here is the div content with id "mydiv" </div>var document.getElementById ("mydiv"); "Mydiv" is case-sensitive, obtaining references to <div> elements
The getElementsByTagName () method, which takes an element by its label name, accepts a parameter that is to get the label name of the element, and returns a nodelist containing 0 or more

Copy Code code as follows:

var images = document.getelementsbytagname ("img"); Get all elements in a page

alert (images.length); Number of images
alert (IMAGES[0].SRC); SRC of the first picture element
Alert (Images.item (0). src); Ditto

The Getelementsbyname () method, which takes an element by the Name property of the element, accepts a parameter that is to get the element's Name property, is used to get the radio button

Copy Code code 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"); Get all radio buttons for name= "Color"

2. Get element child nodes or element child nodes and their descendants nodes

Copy Code code as follows:

<ul id= "MyList" >
<li> Project A </li>
<li> Project Two </li>
<li> Project Three </li>
</ul>

Note: IE thinks the <ul> element has 3 subnodes, 3 elements, and other browsers think there are 7 child nodes, including 3 elements and 4 text nodes, if <ul> on one line:

<ul id= "MyList" ><li> Project one </li><li> project two </li><li> project three </li></ul>
3 child nodes are considered by any browser

To get the child nodes of an element:

Copy Code code 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 certain actions
}
}

Gets the child node of the element and its descendant nodes:

Copy Code code as follows:

var ul = document.getElementById ("MyList");
var items = ul.getelementsbytagname ("Li"); Li's Li will also be made

3 Find other nodes through the properties of the node
The NextSibling attribute points to the next sibling node of the current node
The previoussibling attribute points to the previous sibling node of the current node
The FirstChild attribute points to the first child node, LastChild to the last child node
ChildNodes holds all child nodes (in fact, nodelist objects) and can access the first child node through the method of square brackets such as somenode.childnodes[0]
The ParentNode attribute points to the parent node

The node relationship is as follows:

NodeList is the array object, which we can convert to arrays, and the function is as follows

Copy Code code 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));