DOM操作方法、属性总结

悠悠 2021-11-09 18:50 253阅读 0赞

话不多说直接上demo:

1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6 </head>
     7 <body>
     8     <div class="container" id="box"><span>我是一个div元素1</span><p>hello</p></div>
     9     <script>
    10         var divNode = document.getElementsByClassName("container")[0];
    11 /*节点操作*/
    12         /*获取元素节点*/
    13         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         console.log(divNode.childNodes[0].nodeValue);    //null,如果不存在子元素，则输出文本内容
    25         console.log(divNode.parentNode);    //输出body标签及其子元素
    26         console.log("===================")
    27         console.log(divNode.childNodes[1].childNodes[0].nodeName);   //#text
    28         console.log(divNode.childNodes[1].childNodes[0].nodeValue);     //hello    /*如果div标签与span标签之间存在换行或者空格，则输出:我是一个div元素1*/
    29 /*元素方法操作*/
    30         /*添加子节点*/
    31         var 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         divNode.replaceChild(newReplace,replaceNode);
    45 
    46         /*插入子节点*/
    47         var newInsert = document.createElement("div");
    48             newInsert.innerHTML="insert a new div";
    49             divNode.insertBefore(newInsert,divNode.childNodes[0]);
    50 
    51 /*属性操作*/
    52         /*获取属性节点*/
    53         console.log(divNode.getAttribute("class"));        //container
    54         console.log(divNode.getAttributeNode("class"));    //class="container"
    55 
    56         /*创建和设置属性节点*/
    57         var addAttr = document.createAttribute("class");
    58         addAttr.value="newAttr";
    59         divNode.setAttributeNode(addAttr); //替代了旧的类
    60         // divNode.setAttribute("class","newAttr");/*简单写法*/
    61 
    62         /*删除属性*/
    63         var deleteAttr = divNode.getAttributeNode("class");
    64         divNode.removeAttributeNode(deleteAttr)
    65         // divNode.removeAttribute("id")    /*简单写法*/
    66     </script>    
    67 </body>
    68 </html>

效果

![1648698-20190622170247696-1179583064.png][]

转载于:https://www.cnblogs.com/jing-tian/p/11069465.html

[1648698-20190622170247696-1179583064.png]: /images/20211109/e6e7aa25c58c4c98b68f9dd344afdfdc.png