Man of few words said, directly on the demo:
. 1 <! DOCTYPE HTML> 2 <HTML lang = "EN"> . 3 <head> . 4 <Meta charset = "UTF-. 8"> . 5 <title> the Document </ title> . 6 </ head> . 7 <body> . 8 < div class = "container" id = "box"> <span> I is a div element. 1 </ span> <P> Hello </ P> </ div> . 9 <Script> 10 var divNode = document.getElementsByClassName ( " Container ") [0 ]; . 11 / * node operation * / 12 / * Get element nodes * / 13 is the console.log (divNode. nodeType) //1 14 console.log(divNode.nodeName) //DIV 15 console.log(divNode.nodeValue) //null 16 17 /*获取属性节点*/ 18 console.log(divNode.attributes[1].nodeName) //id 19 console.log(divNode.attributes[0].nodeValue); //container 20 console.log(divNode.attributes[0]); //class="container" 21 22 /*获取文本节点*/ 23 console.log(divNode.childNodes[0].nodeName); //SPAN 24 the console.log (divNode.childNodes [0] .nodeValue); // null, if the sub-element does not exist, the text output 25 the console.log (divNode.parentNode); // output tag and its child element body 26 is Console. log ( "===================" ) 27 the console.log (divNode.childNodes [. 1] .childNodes [0] .nodeName); // #text 28 Console .log (divNode.childNodes [1] .childNodes [0] .nodeValue); // Hello / * if there is space between the wrap or div tag and a span, the output: a div element is I 1 * / 29 / * The method of operating element * / 30 / * add a child node * / 31 is var the addNode = document.createElement ( "div" ); 32 var addText = document.createTextNode("guangzhou"); 33 addNode.appendChild(addText); 34 divNode.appendChild(addNode); 35 36 /*删除子节点*/ 37 var deleteNode = document.getElementsByTagName("span")[0] 38 divNode.removeChild(deleteNode); 39 40 /*替换子节点*/ 41 var replaceNode = divNode.getElementsByTagName("div")[0] 42 var newReplace = document.createElement("span"); 43 = newReplace.innerHTML "My name Lucas" ; 44 is divNode.replaceChild (newReplace, replaceNode); 45 46 is / * insert child node * / 47 var newInsert = document.createElement ( "div" ); 48 newInsert.innerHTML = "INSERT A div new new " ; 49 divNode.insertBefore (newInsert, divNode.childNodes [0 ]); 50 51 is / * attribute operations * / 52 / * Get property nodes * / 53 is the console.log (divNode.getAttribute (" class ")); // Container 54 the console.log (divNode.getAttributeNode ( "class")); // class = "Container" 55 56 is / * create and set property nodes * / 57 is var addAttr = document.createAttribute ( "class" ); 58 addAttr.value = "the newAttr" ; 59 divNode.setAttributeNode (addAttr); // replace the old class 60 // divNode.setAttribute ( "class", "the newAttr"); / * * simple wording / 61 is 62 is / * remove attribute * / 63 var deleteAttr = divNode.getAttributeNode ( "class" ); 64 divNode. removeAttributeNode(deleteAttr) 65 // divNode.removeAttribute ( "the above mentioned id") / * simple wording * / 66 </ Script> 67 </ body> 68 </ HTML>
effect
