DOM操作方法、属性

话不多说直接上demo:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
 </head>
 <body>
     <div class="container" id="box"><span>我是一个div元素1</span><p>hello</p></div>
     <script>
         var divNode = document.getElementsByClassName("container")[0];
 /*节点操作*/
         /*获取元素节点*/
         console.log(divNode.nodeType)        //
         console.log(divNode.nodeName)        //DIV
         console.log(divNode.nodeValue)        //null

         /*获取属性节点*/
         console.log(divNode.attributes[1].nodeName)  //id
         console.log(divNode.attributes[0].nodeValue);    //container
         console.log(divNode.attributes[0]);        //class="container"

         /*获取文本节点*/
         console.log(divNode.childNodes[0].nodeName);    //SPAN
         console.log(divNode.childNodes[0].nodeValue);    //null,如果不存在子元素，则输出文本内容
         console.log(divNode.parentNode);    //输出body标签及其子元素
         console.log("===================")
         console.log(divNode.childNodes[1].childNodes[0].nodeName);   //#text
         console.log(divNode.childNodes[1].childNodes[0].nodeValue);     //hello    /*如果div标签与span标签之间存在换行或者空格，则输出:我是一个div元素1*/
 /*元素方法操作*/
         /*添加子节点*/
         var addNode = document.createElement("div");
         var addText = document.createTextNode("guangzhou");
         addNode.appendChild(addText);
         divNode.appendChild(addNode);

         /*删除子节点*/
         var deleteNode = document.getElementsByTagName("span")[0]
         divNode.removeChild(deleteNode);

         /*替换子节点*/
         var replaceNode = divNode.getElementsByTagName("div")[0]
         var newReplace = document.createElement("span");
             newReplace.innerHTML="my name lucas";
         divNode.replaceChild(newReplace,replaceNode);

         /*插入子节点*/
         var newInsert = document.createElement("div");
             newInsert.innerHTML="insert a new div";
             divNode.insertBefore(newInsert,divNode.childNodes[0]);

 /*属性操作*/
         /*获取属性节点*/
         console.log(divNode.getAttribute("class"));        //container
         console.log(divNode.getAttributeNode("class"));    //class="container"

         /*创建和设置属性节点*/
         var addAttr = document.createAttribute("class");
         addAttr.value="newAttr";
         divNode.setAttributeNode(addAttr); //替代了旧的类
         // divNode.setAttribute("class","newAttr");/*简单写法*/

         /*删除属性*/
         var deleteAttr = divNode.getAttributeNode("class");
         divNode.removeAttributeNode(deleteAttr)
         // divNode.removeAttribute("id")    /*简单写法*/
     </script>
 </body>
 </html>

效果