DOM node-JS Summary
DOM node-JS Summary
Three types of nodes are available: attribute nodes, element nodes, and text nodes.
HTML content:
Test Div
SkewEnd JavaScript content:
(1) attribute nodes
1. parent node:
Window. onload = function () {var box = document. getElementById ('box'); // get the attribute node, for example, '[object HTMLDivElement]' alert (box); alert (box. tagName); // obtain the tag name, such as 'div 'alert (box. innerHTML); // obtain the text of this element node, such as 'test Div 'alert (box. id); // obtain the value of the attribute node, for example, 'box' alert (box. getAttribut ('id'); // obtain the value of the attribute node, for example, 'box' // Note: incompatible alert (box. getAttribut ('style'); // get the attribute node, for example, 'color: red' alert (box. className); // get the class attribute value // replace and assign values to HTML text. JS code can parse HTML code, instead of simply text box. innerHTML = 'funJS'; // Change the 'test Div' content to 'fun JavaScript '}
2. subnodes:
// Node type value: // element node: 1 // attribute node: 2 // text node: 3window. onload = function () {var box = document. getElementById ('box'); // obtain the tag name, which is equivalent to tagName // alert (box. nodeName); // "DIV" // alert (box. childNodes. length); // "3", three subnodes // The preceding labels have three subnodes: Test DivSkewThe end of // The first subnode is: "Test Div" -- text node // The second subnode is :"Skew"-- Element Node // The third subnode is:" end "-- text node // The test method is as follows: alert (box. childNodes [0]); // "Object Text", indicating a Text node alert (box. childNodes [0]. nodeType); // "3", type value, indicating the text content of the text node // get the text content of the text node // 1) Get the text content of the 'subnode' alert (box. childNodes [0]. nodeValue); // "test Div" alert (box. childNodes [1]. nodeValue); // "Null" alert (box. childNodes [2]. nodeValue); // "end" // 2) obtain the text node alert (box. innerHTML); // "test DivSkewEnd with "alert (box. childNodes [1]. innerHTML); //" skew "// substantive"Skew"It is a tag, and nodeName can still be understood as obtaining the Tag Name alert (box. childNodes [1]. nodeName); //" EM "}
(2) element nodes and text nodes
Window. onload = function () {var box = document. getElementById ('box'); for (var I = 0; I
In the course of the experiment, it is found that the node has become a lot of trouble, so make the above summary. Finding the corresponding node accurately is a prerequisite for the operation. If there are more content, there may be more node layers. You can find them layer by layer.