Easy to learn JavaScript 21: DOM programming learning: Getting subnodes and attribute nodes of element nodes

Easy to learn JavaScript 21: DOM programming learning: Getting subnodes and attribute nodes of element nodes

All the subnodes for Retrieving Element nodes include element subnodes and text nodes. Take the code instance from the previous blog

Analysis:

[Html] view plaincopyprint? <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"> 
Nodes can be divided into element nodes, attribute nodes, and text nodes. These nodes have three very useful attributes: nodeName attribute and
The nodeType attribute is read-only, while the nodeValue attribute can be read and written:
Instance:


// Obtain the Element Node var cityNode = document of id = "city. getElementById ("city"); alert (cityNode. innerHTML); // obtain the content of the current element node, including the tag and Text alert (cityNode. tagName); // return: ULalert (cityNode. nodeName); // return: UL, equivalent to tagName alert (cityNode. nodeType); // return: 1 indicates the alert (cityNode. nodeValue); // return: null (note the difference with innerHTML)
The returned content using the innerHTML attribute is:


The hierarchy of nodes can be divided into two types: parent node and child node, and sibling node. When we obtain one of the element nodes,
You can use the hierarchical node attribute to obtain the nodes associated with the hierarchical node. Hierarchical nodes have the following attributes:

(1) childNodes attributes
The childNodes number attribute can be used to obtain all the byte points of an element node, including the element byte points and the text subnode. It returns
It is also an array of byte points. We use childNodes [n] to return the subnode object. You can also use the nodeValue attribute in the node attribute.
Assign values to the text nodes.
Note:
1) The obtained text subnode cannot use the innerHTML attribute to output text content, because this is a non-W3C standard attribute and must be used to obtain elements.
The text contained in the node can be output. However, element nodes can use the innerHTML attribute and nodeValue attribute.
2) When an element node is assigned a value, the nodeValue attribute converts the HTML contained in the text into special characters to achieve
Results, while the innerHTML attribute can parse HTML and output the parsed HTML document.
Instance 1:
 
// Obtain the Element Node var cityNode = document of id = "city. getElementById ("city"); // obtain the subnode var liNodes = cityNode of the cityNode element node. childNodes; alert (liNodes); // return: object nodeList indicates the Node object array alert (liNodes. length); // return: 9, which contains four element nodes and five empty text nodes (the blank part in the ul label). For non-IE browsers, IE contains four
 
We can see from the results that all the byte points of the element node are not as expected. We only want the four li element subnodes, In the IE worker
The browser automatically avoids blank text nodes. This is what we want. Therefore, the getElemntsBytagName () method is used to obtain the 4
Element byte point array:
 
// Obtain the Element Node var cityNode = document of id = "city. getElementById ("city"); // obtain the element subnode var liNodes = cityNode of all element nodes whose names are li in the id = "city. getElementsByTagName ("li ");
 
Supplement: there is also a non-W3C standard children attribute, which only gets valid subnodes, that is, ignore empty text nodes:
 
// Obtain the Element Node var cityNode = document of id = "city. getElementById ("city"); // obtain all the subnodes of the element node var liNodes = cityNode. children; alert (liNodes); // return: object HTMLCollectionalert (liNodes. length); // return: 4, that is, four li subelement nodes alert (liNodes [0]. nodeName); // return: LI
 
Then we can perform node attribute operations on the byte point array obtained from instance 1 (without ignoring the blank text node). We know the first li element.
The child node is the second of all the byte points, and the first is a blank text node. The following example is a test conducted by a non-IE browser.
Do not describe it. Take a look at the following operations:
Alert (liNodes [0]); // return: object Text indicates the Text Node object alert (liNodes [0]. nodeName); // return: # Textalert (liNodes [0]. nodeType); // return: 3 indicates the text node alert (liNodes [0]. nodeValue); // return: Empty liNodes. nodeValue = "test"; // output in the HTML document: Test
The second in the array of child node objects is the child element node:


Alert (liNodes [1]); // return: object HTMLLIElement indicates the Element Node object alert (liNodes [1]. nodeName); // return: LIalert (liNodes [1]. nodeType); // return: 1 indicates the alert (liNodes [1]. nodeValue); // return value: null
From the above operation, it is not practical to obtain all the byte points. Therefore, we often use the getElementById () method first.
To obtain the element node at the specified position, and then use the getElemntsBytagName () method to obtain the byte point array, which is recommended.
(2) firstChild () and lastChild () Methods
The firstChild () method is used to obtain the first byte vertex object of the current element node, which is equivalent to childNodes [0]. The lastChild () method is used to obtain the current
The last byte Point Object of the element node, which is equivalent to childNodes [childNodes. length-1]. Similarly, here we can get a text subnode.
Objects or element subnode objects. We can use these three node attributes to operate on them.
Instance:


// Obtain the Element Node var cityNode = document of id = "city. getElementById ("city"); // obtain the first and last subnodes of the cityNode Element Node alert (cityNode. firstChild); // return: object Text indicates the Text Node object alert (cityNode. lastChild); // return: object Text indicates the Text Node object alert (cityNode. lastChild. nodeName); // return: # text
(3) parentNode attributes, prevousSlbling attributes, and nextSibling attributes
The parentNode attribute returns the parent node of the node, the prevousSlbling attribute returns the previous same-level node of the node, and the nextSibling attribute returns
The last peer node of the node.
Instance:
// Obtain the Element Node var bjNode = document of id = "bj. getElementById ("bj"); // obtain the alert (bjNode) of the parent node of the bjNode element node. parentNode); // return: object HTMLUListElementalert (bjNode. parentNode. nodeName); // return: ULalert (bjNode. previussibling); // return: object text (because the first element node of id = "bj" is a blank text node) alert (bjNode. nextSibling); // return: object text
The blank text node is always mentioned above, which will be automatically avoided in IE browser, but other browsing will output, so how can we make
Are they compatible? We need to manually remove this:
// Obtain the Element Node var cityNodes = document for id = "city. getElementById ("city"); // obtain all the subnodes of the element node alert (removeSpace (cityNodes. childNodes ). length); // return: 4, function removeSpace (node) {for (var I = 0; I
 
We can see from the results returned above that we have obtained the desired results, which is also compatible with the getElementsByTagName () method.
The number of element subnodes is the same. After obtaining the first subnode and the last subnode
When a level node encounters an empty text node, it can also be removed. You just need to improve the above method:
// Obtain the Element Node var cityNodes = document for id = "city. getElementById ("city"); // obtain all the subnodes of the element node alert (removeSpace (cityNodes ). firstChild. nodeName); // return: LIfunction removeSpace (node) {for (var I = 0; I
 
The following part is an attribute node.
(4) attributes
The attributes attribute returns the attribute node set of the node. Attributes [0] indicates that there is one node at most, and the array traversal is forward from the back,
Note.
Instance:
// Obtain the Element Node var bjNode = document of id = "bj. getElementById ("bj"); // use the attributes attribute alert (bjNode. attributes); // return: object NameNodeMapalert (bjNode. attributes. length); // return: 4 indicates the number of attribute nodes alert (bjNode. attributes [3]); // return value: Attr. traverse alert (bjNode. attributes [3]. nodeType) // return: 2, indicating the attribute node alert (bjNode. attributes [3]. nodeName) // return: id
Note:
1) This property runs the same way on IE, Firefox, or Google, and does not know the reason for the browser. The result of traversing in the 2345 browser is the opposite. Yes
It is incompatible. Is this a question?
2) If you want to obtain and change the attribute value, we recommend that you use the method mentioned in the previous blog, but note that we use
The name attribute is incompatible. The name attribute is generally used in form elements, and the rest do not have custom name attributes:
// Obtain the Element Node var bjNode = document of id = "bj. getElementById ("bj"); // directly use the attribute alert (bjNode. id); // return: bjalert (bjNode. style. color); // return: red
These two blog posts have said so much and summarize our frequently used methods (in the previous blog ):
1. Frequently used methods for Retrieving Element nodes:


(1) Use the getElementById () method to obtain a single element node through the id attribute. Recommended.
(2) Use the getElementByTagName () method to obtain the array of the specified element node name based on the tag. The length attribute of the array object can obtain the array.
. Recommended.
(3) Use the getElementsByName () method to obtain the corresponding form Element Node Based on the name attribute. Note that
The value of the name attribute. We recommend that you use this function when getting form elements.
2. Obtain the child nodes of an element node (only the element node has a child node). We usually use
(1) first, obtain the element node using the method of getting the element node, and then use the childNodes attribute to obtain the list of all the child Node object arrays,
Note the incompatibility and blank text nodes. It is not recommended.
(2) First, obtain the element node using the method of getting the element node, and then use the firstChild attribute and lastChild attribute to obtain the first element node.
Subnode and the last subnode. Note the blank text node here. Recommended.
(3) first obtain the element node using the method of getting the element node, and then use the children attribute to obtain all its valid child Node object array columns.
Table. Recommended.
(4) first obtain the specified element node using the method of getting the element node, and then use the getElemensByTagName () method to get all the child elements.
A list of prime Node object arrays. Recommended.
3. Get attribute nodes
(1) because of the attribute of a specified Element Node when the attribute node is located, you can use the getElementById () method to obtain the corresponding single element through the id attribute.
The element node uses "element node. Attribute" to obtain and set the value of the attribute node. Recommended.
(2) first obtain the element node using the method of getting the element node, and then return the Attribute node set of the node using the Attribute. However, note that
The compatibility of the browser. This is not recommended.
4. Obtain the text node (the child node of the element node when the text node is used)


(1) first, the element node is obtained using the method of getting the element node, and then the innerHTML attribute of the element node is used to get
Text Content. Recommended.
(2) If the specified Element Node has only one child node, that is, the child node is a text node, you can obtain the element node where the text node is located first,
Use the firstChild attribute to locate the text node, and then use the nodeValue attribute of the text node to obtain the text content in the text node. Recommended.
5. Get the body Element Node
(1) Use document. getElemensByTagName ("body") [0] to get the body element node.


(2) Use document. body to get the body element node. Recommended.