Easy learning JavaScript 21: Dom Programming learning gets the child nodes and attribute nodes of the element node

What we're talking about here is that all child nodes of the get element node include both the element child node and the text node.

Or take a code instance of a blog post

Analysis:

<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Because nodes can be divided into element nodes, attribute nodes and text nodes. And these nodes have three very useful properties, nodename properties and
The NodeType property is read-only and the NodeValue property is readable and writable:
Example:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >//Gets the element node var Citynode=document.getelementbyid ("City") of id= "City"; alert (citynode.innerhtml);//Gets the contents of the current element node. Include label and text alert (citynode.tagname);//return: Ulalert (citynode.nodename);//return: UL, with tagName equivalent alert (citynode.nodetype);// Returns: 1 indicates element node alert (citynode.nodevalue);//return: null (note and innerhtml difference) </span></span>
the content returned by using the innerHTML property is:
The hierarchy of nodes can be divided into: parent node and child node. Sibling node two types of structure. When we get one of the element nodes,
You can use the Hierarchy node property to get the nodes associated with it. The attributes of the hierarchy node are:

(1) ChildNodes Property
The ChildNodes Number property can get all the byte points of an element node, which contains the element byte point and the text child node. It returns the
is also a Word node object array. We use Childnodes[n] to return the child node object. At the same time we can use the NodeValue property in the node properties
Assigns a value to its text node.
Here we should pay attention to:
1) Gets the text of the child node cannot use innerHTML this property to output text content, because this is a non-standard property must be in the acquisition element
node, the talent output contains the text, however the element node can use the innerHTML attribute and the NodeValue attribute.
2) When we manipulate the element node assignment, the NodeValue property will escape the HTML included in the text into special characters, thus achieving the simple text
Effect, while the innerHTML attribute goes to parse HTML, outputting parsed HTML documents.
Example one:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >//Gets the element node var Citynode=document.getelementbyid ("City") of id= "City";//Gets the Citynode element node's child node Var linodes= Citynode.childnodes;alert (linodes);//Return: Object nodelist represents an array of Node objects alert (linodes.length);//return: 9, this includes 4 element nodes and 5 empty text nodes (The blank part of the UL tag), for non-IE browser. IE is a 4 </span></span>
From the results, we can see that this gets all the byte points of the element node not as we would like, we just want the 4 Li element sub-node, in IE
Browser is the self-avoidance of blank text nodes, this is the result we want.
So it's back to using the Getelemntsbytagname () method to get the 4
Array of element byte points:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >//Gets the element node var Citynode=document.getelementbyid ("City") of id= "City";//gets all elements in the element node of the id= "city" named Li element Sub-node Var linodes =citynode.getelementsbytagname ("Li");</span></span>
Supplement: Another non-standard children attribute, this attribute is just to get a valid child node. The empty text node is ignored:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >//Gets the element node var Citynode=document.getelementbyid ("City") of id= "City";//gets all the child nodes of element node Var Linodes=citynode.children; alert (linodes);//Return: Object Htmlcollectionalert (Linodes.length);//return: 4 is 4 li child element node alert (linodes[0].nodename);// Back to:li</span></span>
Then we take the node attribute operation from the array of byte points from the above instance one (without ignoring the blank text node). We know that the first LI element
The child node is the second of all byte points, the first is a blank text node, the following example is a non-ie browser test, ie browser results
No more descriptive narrative.
So look at the following actions:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >alert (Linodes[0]);//Return: Object text indicates text node object alert (linodes[0].nodename);//return: #Textalert (Linodes[0].nodetype); /return: 3 Indicates text node alert (linodes[0].nodevalue);//return: null linodes.nodevalue= "Test";//output in HTML document: Test </span></span>
The second of the resulting child node object array is the child element node:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >alert (linodes[1]);//Return: Object htmllielement represents the Element node object alert (linodes[1].nodename);//return: Lialert (linodes[1]. NodeType);//return: 1 indicates element node alert (linodes[1].nodevalue);//Return:null</span></span>
From the above operation, it is not useful to get all the byte points, so we often use the getElementById () party first
Gets the element node to the specified location. Then use the Getelemntsbytagname () method to get the array of byte points. This is what we recommend to use.
(2) FirstChild () method and LastChild () method
The FirstChild () method is used to get the first word node object of the current element node, which is equivalent to the Childnodes[0];lastchild () method used to get the current
The last Word node object of the element node. Equivalent to Childnodes[childnodes.length-1]. The same here we get may be text child nodes
object or element child node object, get them we can use the three node properties to manipulate them.
Example:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >//Gets the element node var Citynode=document.getelementbyid ("City") of id= "City";//Gets the first and last child nodes of the Citynode element node alert ( Citynode.firstchild);//Return: Object text represents the text node object alert (citynode.lastchild);//Return: Object text indicates the text node object alert ( CityNode.lastChild.nodeName);//return: #text </span></span>
(3) ParentNode property, Prevousslbling property, and NextSibling property
The ParentNode property returns the parent node of the node, the Prevousslbling property returns the previous sibling node of the node, and the NextSibling property returns
The next sibling node of the node.
Instance:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >//Gets the element node of id= "BJ" var Bjnode=document.getelementbyid ("BJ");//Gets the parent node of the Bjnode element node alert (bjnode.parentnode); Return: Object Htmlulistelementalert (BjNode.parentNode.nodeName);//return: Ulalert (bjnode.previoussibling);//Return: Object Text (because the first of the element nodes of the id= "BJ" is a blank text node) alert (bjnode.nextsibling);//Return: Object text</span></span>
The above always mentions the blank text node, this in IE browser will voluntarily evade. But the other browsing will output. So how do we do talent let
Are they compatible and consistent? This needs to be removed manually:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >//Gets the element node var Citynodes=document.getelementbyid ("City") of id= "City";//gets all child nodes of the element node alert (Removespace ( citynodes.childnodes). length);//return: 4,function removespace (node) {for       (var i=0;i<node.length;i++) {  if ( Node[i].nodetype===3&&/^\s+$/.test (Node[i].nodevalue)) {      node[i].parentnode.removechild (node[i]);  }        }       return node;} </span></span>
Judging from the results returned above, we get the results we want. This compatibility is also very good. Follow the getElementsByTagName () method
Gets the number of child nodes of the element is the same.
Then we get the first child node and the last child node, and the previous sibling node
Level node when the same encounter the empty text node situation, can also be removed, just need to improve the above method can be:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >//Gets the element node var Citynodes=document.getelementbyid ("City") of id= "City"; Gets all child nodes of the element node alert (Removespace (citynodes). Firstchild.nodename);//return: Lifunction removespace (node) {for         (var i =0;i<node.childnodes.length;i++) {        if (node.childnodes[i].nodetype===3&&/^\s+$/.test ( Node.childnodes[i].nodevalue)) {         node.childnodes[i].parentnode.removechild (node.childnodes[i]);        }           } return node;} </span></span>
The following section is the Get attribute node
(4) Attributes property
The Attributes property returns a collection of attribute nodes for the node. Attributes[0] represents the most one node, the time of the array traversal is from the back forward,
Be careful here.
Instance:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >//gets id= "BJ" element node var bjnode=document.getelementbyid ("BJ");//Use Attributes Attribute alert (bjnode.attributes);// Return: Object Namenodemapalert (BjNode.attributes.length);//returns: 4 indicates the number of attribute nodes alert (bjnode.attributes[3]);// return: Attr. From back to Forward (Bjnode.attributes[3].nodetype)//return: 2, indicating attribute node alert (bjnode.attributes[3].nodename)//Return:id< /span></span>
Description
1) This property is executed on IE, Firefox or Google, and is not known as the reason for the browser. The 2345 Browser traversal results are reversed. Can
Can be incompatible with it. Is this a question?
2) Assuming that the value of the property is changed, we recommend using the method mentioned in the previous blog post, but be aware that we use a standard-compliant
The Name property is incompatible, the Name property is typically used in form elements, and the rest does not have its own defined Name property:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >//gets id= "BJ" element node var bjnode=document.getelementbyid ("BJ");//Use attribute alert directly (bjnode.id);//return: Bjalert ( BjNode.style.color);//Return:red</span></span>
These two blog posts say so much. Summarize the methods we often use (count on a blog post):
one way to get an element node is often used:
(1) Use the getElementById () method to get the corresponding individual element node through the id attribute. recommended use. 
(2) Use the Getelementbytagname () method to get an array of the name of the specified element node by the tag, the length property of the array object can get the array
The length. recommended use. 
(3) Use the Getelementsbyname () method to get the corresponding form element node based on the Name property. It is important to note that in the form element that conforms to the
The value of the Name property. recommended when getting form elements. 
Second gets the child nodes of the element node (only the element nodes have child nodes) we usually use
(1) First, the element node is obtained by the method of acquiring the element node. Then use the ChildNodes property to get a list of all the child node object arrays.
Note the incompatibility and whitespace of the text node. it is not recommended. 
(2) First, the element node is obtained first using the method of acquiring the element node, and then using the FirstChild property and the LastChild property to get the first element node
The child node and the last sub-node.
Note also that there are blank text nodes. recommended use. 
(3) First obtains the element node by the method obtains the element node, then uses the Children property to obtain all its valid child node object array column
Table. recommended use. 
 (4) First obtain the specified element node using the method that gets the element node, and then use the Getelemensbytagname () method to get all the children
A list of the Vegetarian node object arrays. recommended use. 
Three get attribute node
(1) Because attribute nodes are properties of a specified element node, they can be obtained by first using the getElementById () method through the ID property to obtain the corresponding individual
ELEMENT nodes then take advantage of the "element node. Properties" method to get and set the value of the attribute node. recommended use. 
(2) Obtain the element node using the method that gets the element node, and then use the attribute property to return the collection of attribute nodes for that node. But pay attention to the bangs
The compatibility of the browser. This is not recommended for use. 
four Gets the text node (the child node of the element node when the text node)
(1) The first is to obtain the element node using the method of acquiring the element node, then using the attribute innerHTML attribute of the element node to get the text node
Text content. recommended use. 
(2) Assume that there is only one child node in the specified element node. That is, the child node is a text node. To get the element node where the text node is located,
Then use the FirstChild property to navigate to the text node and finally get the text content in the text node through the NodeValue property of the text node. recommended. 
Five gets the BODY element node
(1) Get the BODY element node using document.getelemensbytagname ("body") [0].

(2) Use document.body to get the BODY element node.
Recommended use.
Easy learning JavaScript 21: Dom Programming learning gets the child nodes and attribute nodes of the element node