Learning JavaScript 20 with ease: acquiring nodes for DOM programming learning

What we're talking about here. Gets the node that contains the element node, the attribute node, and the text node. In general, we are able to manipulate HTML elements through the DOM. For

To do this, you must first find the element. It provides a convenient and simple way to locate nodes, so that we can quickly

Point of operation.

Let's start by writing a simple HTML document for us to test, and the JS code is written in the Window.onload event:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
(1) getElementById () method
The getElementById () method takes a parameter that is the ID value specified by an element so that the element node can be obtained. If you find a phase
The element that should be returned returns a component node object, or null if it does not exist. One thing to note here is that the ID represents the uniqueness of an element node,
You cannot create a named ID for two or more element nodes at the same time.
Get id= "BJ" element node var bjnode=document.getelementbyid ("BJ"); alert (bjnode);//Return object htmllielement represents the LI element node object, But IE will return object. At the same time, the low version of IE is incompatible.
When we get to a particular element node object through the getElementById () method, the element node object is acquired by us, and by
This element node object, we can access its series of properties.
Element Node Properties

Instance:
Gets the element node of id= "BJ" var Bjnode=document.getelementbyid ("BJ"); alert (bjnode.tagname);//returns the label name of the element node: Lialert ( bjnode.innerhtml);//Returns the contents of the text node of the element node: Beijing
The properties of an element node can also be changed in addition to the properties of the specified element node.
Get id= "BJ" element node var bjnode=document.getelementbyid ("BJ");//re-assign the attribute of the element node bjnode.innerhtml= "Hebei province";
The result of the re-assignment: The original Beijing was replaced by Hebei province
Properties of HTML Properties

Instance:
Gets the element node of id= "BJ" var Bjnode=document.getelementbyid ("BJ"); alert (bjnode.id);//Returns the value of the attribute node ID of the element node: Bjalert ( Bjnode.classname);//Returns the value of the attribute node class of the element node: Bjalert (Bjnode.style);//returns the inline style attribute node object of the Element node alert (bjNode.style.color);// Back to: Red
Properties for HTML properties can also be set, in addition to the values of the properties of the specified element node.
Get id= "BJ" element node var bjnode=document.getelementbyid ("BJ");//Set the property value of the element node inline style attribute node bjnode.style.color= "Blue";
Style effects not set before:

Style effect after setting:

(2) getElementsByTagName () method
The Getelementbytagname () method takes a parameter, which is the label name of the HTML element, so the method returns the number of objects
Group Htmlcollection, which holds a list of all nodes of the same element name.
Example one:
Gets the element node named Li, var linodes=document.getelementsbytagname ("Li"); alert (linodes); Returns: Object htmlcollection represents an array of element node objects alert (linodes.length);//returns; 8, there are indeed 8 Li elements in the current document alert (Linodes[0]);//Return: Object Htmllielement represents the LI element node object   
See the output Element node object, we can see this and with ID get element node object There is consistent, so we can also output elements
the label name and text content of the node. The difference between these two methods is that getElementById () is the method of the Document object, and
The Getelementbytagname () method is the method of the node interface, which means that any node has this method. Look at the following example:
Example two:
Gets the element node var Citynode=document.getelementbyid ("City") of the Id= "city";//Gets the element node of id= "City" that has all elements named Li in the element sub-node Var linodes= Citynode.getelementsbytagname ("Li"); alert (linodes); Returns: Object htmlcollection represents an array of element node objects alert (linodes.length);//returns; 4, the current document id= "City" element node does have 4 Li element alert (linodes[0]); /return: Object Htmllielement representing LI element node objects
From the output of the results see: Instance one is to get all the elements of the entire HTML document name Li element node, and instance two is to get the specified id= "City" meta
All elements in the element node are named the element child nodes of Li.
It says that if you get the element node object, you can get the attribute and text content of the element node.
Gets the element node named Li for all elements within the HTML document VAR linodes=document.getelementsbytagname ("Li"); alert (linodes[1].innerhtml);//output: Tianjin City
Here we also need to tell a very important to get the body node knowledge, in the back we do Dynamic HTML page This is very useful, because there is only one body node in the HTML document, so we can do this:
Gets the BODY element node Var bodynode=document.getelementsbytagname ("Body") [0];alert (Bodynode);//Return: Object Htmlbodyelement represents the BODY element node object
(3) Getelementbyname () method (typically the value of the Name property of a FORM element)
The Getelementsbyname () method can get an element node of the same name property, and returns an array of objects nodelist.
Instance:
Gets the element node name= "Sex" var inputnodes=document.getelementsbyname ("Sex"); alert (inputnodes);// Return: Objectnodelist represents an array of element node objects alert (inputnodes.length);//return: 2alert (inputnodes[0]);//Return: Object Htmlinputelement element Node Object
Similarly, we can also get and set the value of the attribute node of the element node:
Gets the element node name= "Sex" var inputnodes=document.getelementsbyname ("Sex"); alert (inputnodes[0].type);//return: Radioalert ( Inputnodes[0].value);//return: Male
When we use the Getelementsbyname () method to get the element node, we may encounter the problem that some elements are not legally
The name attribute of the HTML (which is also the custom name), then the compatibility of the JS get is different, ie browser support itself is legitimate the Name property, and
the problem of incompatibility arises when it is illegal. So we generally use this method less often, but the elements in the form can be used. 
Gets the element node of name= "Beijing" var inputnodes=document.getelementsbyname ("Beijing"); alert (inputnodes[0]);//return: Object Htmllielement represents an Element node object, IE does not return
There are three more ways to do this: the GetAttribute () method is to get the value of an attribute in an element, and it is used directly with the. property to get the value of the property.
The SetAttribute () method is to set the value of an attribute in an element and the RemoveAttribute () method is an HTML property. As a result of their three methods, both
The capacitive is not very good, the use is also very few, therefore does not carry on the excessive narration.
Say so much, or simply summarize
One way to get the element nodes to use frequently:
(1) using the getElementById () method to get the corresponding individual element node through the id attribute
(2) Use the Getelementbytagname () method to get an array of specified element node names based on the tag, array object Length property can get array
The length.
(3) Use the Getelementsbyname () method to get the corresponding form element node based on the Name property.
Two methods for getting attribute nodes to use frequently
Because property nodes are properties of a specified element node, you can obtain the corresponding individual element by first using the getElementById () method through the ID property
The node then reads the specified property in such a way as to get and set the value of the attribute node.
Three Gets the text node (the child node of the element node when the text node)
The first is to obtain the element node using the method of acquiring the element node, and then use the attribute innerHTML attribute of the element node to get the text in the textual node.
This content, where the text content contains HTML tags. In the back we will have a property to get the text node, be sure to note the difference, which I
they're behind . a blog post to distinguish. 
This is just the method of this blog post, mentioned later will continue to improve!


Learning JavaScript 20 with ease: acquiring nodes for DOM programming learning