• DOM操作方法、属性


    话不多说直接上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>

    效果

  • 相关阅读:
    解决VS控制台窗口自动关闭问题
    ZOJ1003:Crashing Balloon(dfs)
    POJ2607:Fire Station(SPFA+枚举)
    C语言在屏幕上输出玫瑰花图片
    HRBUST
    UVA10182: Bee Maja (模拟)
    洛谷P1144: 最短路计数(bfs)
    (转载)MySQL LIKE 用法:搜索匹配字段中的指定内容
    (转载)[MySQL技巧]INSERT INTO… ON DUPLICATE KEY UPDATE
    (转载)INSERT INTO .. ON DUPLICATE KEY 语法与实例教程
  • 原文地址:https://www.cnblogs.com/jing-tian/p/11530930.html
Copyright © 2020-2023  润新知