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 contain 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, the NodeName property and
The NodeType property is read-only, and the NodeValue property is read-write:
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, Contains 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 a node can be divided into two types: parent node and child node, sibling node 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, including 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) The retrieved text sub-node cannot use the innerHTML property to output text content because this non-standard property must be in the Get element
node, you can output the text contained within it, however the element node may use the innerHTML property and the NodeValue property.
2) When we manipulate the element node assignment, the NodeValue property will escape the HTML contained in the text into special characters, thus achieving 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);//Returns: Object NodeList represents an array of Node objects alert (linodes.length);//returns: 9, which contains 4 element nodes and 5 empty text nodes (in the blank part of the UL tag), IE is 4 </span></span> for non IE browsers
From the results we see that this gets all the byte points of the element node is not as we wish, we just want to get those 4 Li element subnodes, in IE
The browser automatically avoids the blank text node, which 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>
Add: There is also a non-standard children attribute, which is to only get valid child nodes, that is, ignore empty text nodes:
<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 the element 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 have the node attribute operation from the array of byte points from the above instance one (without ignoring the whitespace text node), and 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 instance is a non-ie browser test, ie browser results
is no longer described. 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 practical to get all the byte points, so we often use the getElementById () party first
Method gets the element node at the specified location, and then uses the Getelemntsbytagname () method to get the byte-point group, which we recommend.
(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 will automatically avoid in IE browser, but other browsing will output, then how can we make
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>
From the results returned above, we get the results we want, so compatibility is good, with 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 the above method to improve:
<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 about getting the 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 runs on IE, Firefox or Google, and does not know the reason for the browser, in the 2345 browser traversal results are reversed. Can
Can be incompatible with it. Is this a question?
2) If you want to get the value of the property and change it, 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 a custom name attribute:
<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 use frequently (count on a post):
one way to get the element nodes to use frequently:
(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 based on the tag, the array object length property 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, and then the ChildNodes property is used to get all the sub-node object array list.
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 get to the specified element node using the method that gets the element node, and then use the Getelemensbytagname () method to get all the sub-elements
A list of the Vegetarian node object arrays. recommended use. 
Three get attribute node
(1) Due to attributes of a specified element node at the attribute node, the corresponding individual can be obtained by first using the getElementById () method through the ID property.
ELEMENT nodes then take advantage of the "element node. Properties" Way 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) If there is only one child node in the specified element node, that is, the child node is a text node, you can first 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