JavaWeb JavaScript 8.DOM编程

在光芒万丈之前，我们都要欣然接受眼下的难堪和不易，接受一个人的孤独和无助，认真做好眼前的每一件事，你想要的都会有

------ 24.8.29

一、什么是DOM编程

简单来说：DOM(Document obiect Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改，以实现网页数据和样式动态变化效果的编程

1.DOM编程如何使页面内容发生改变

利用.html文件生成document对象通过浏览器实时监测更新使页面内容发生改变

2.document对象的逻辑结构

树形结构的对象，DOM树

3.DOM树上的结点类型

node结点

1.元素结点 element 标签

2.属性结点 attribute 属性

3.文本结点 text 双标签中间的文字

二、DOM编程API

1.获取页面元素的几种方式

① 在整个文档范围内查找元素结点

通过document对象元素id值获职元素 var els = document.getElementById("username")

根据元素的标签名获取多个同名元素 var els = document.getElementsByTagName("input")

根据元素的name属性值获得多个元素 var els = document.getElementsByName("aaa")

根据元素的class属性值获得多个元素 var els =document.getElementsByclassName("a")

② 在具体元素节点范围内查找子节点

通过父元素获取全部的子元素 var cs=parent.children;

通过父元素获取指定的子元素

获取第一个子元素 console.log(parent.firstElementchild)

获取最后一个子元素 console.log(parent.lastElementchild)

获取第二个子元素 console.log(parent.children[11)

获取第三个子元素 console.log(parent.children.item(2))

③ 查找指定子元素节点的父节点

根据子元素获取父元素 var child=document.getElementById( username);

根据当前元素获取兄弟元素 var pinput =document.getElementById("password")

获取前一个兄弟元素 console.log(pinput.previousElementsibling)

获取后一个兄弟元素 console.log(pinput.nextElementsibling)

2.操作元素属性值

① 属性操作

操作元素的属性语法：元素.属性名 ="属性值"

操作元素的样式语法：元素.style.样式名="样式值" 原始样式名中的"-"符号转换为驼峰式

② 内部文本操作

只识别文本语法：元素.innerHTML ="文本"

可以同时识别html代码元素.innerText ="文本"

3.增删元素

① 对页面的元素进行增删操作

创建元素 var csli = document.createElement("li");

在父元素中追加子元素父元素.appendchild(子元素);

在指定元素前增加某个元素 cityul.insertBefore(csli,gzli);

在父元素中，用某个新元素替换原本的子元素 cityul.replacechild(新元素，旧元素)

删除当前元素元素.remove();

清空元素元素.innerHTML =""；

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
            /*
            DOM编程API
            1.获得document对象------dom树
                window.document
            2.从document中获取要操作的元素
                ① 直接获取
                    通过document对象元素id值获取元素    var el1 = document.getElementById("username")
                    根据元素的标签名获取多个同名元素    var els = document.getElementsByTagName("input")
                    根据元素的name属性值获得多个元素    var els = document.getElementsByName("aaa")
                    根据元素的class属性值获得多个元素  var els = document.getElementsByClassName("a")
                ② 间接获取
                    通过父元素获取子元素    var parent = document.getElementById("div1");
                    通过父元素获取全部的子元素  var cs=parent.children;
                    通过父元素获取指定的子元素  console.log(parent.firstElementChild)    // 获取第一个子元素
                                              console.log(parent.lastElementChild)     // 获取最后一个子元素
                                              console.log(parent.children[1])          // 获取第二个子元素
                                              console.log(parent.children.item(2))     // 获取第三个子元素
                    根据子元素获取父元素    var child = document.getElementById("username");
                    根据当前元素获取兄弟元素    var pinput = document.getElementById("password")
                    获取前一个兄弟元素  console.log(pinput.previousElementSibling)
                    获取后一个兄弟元素  console.log(pinput.nextElementSibling)
            3.对元素进行操作
                ① 操作元素的属性    语法：元素.属性名 = "属性值"
                ② 操作元素的样式    语法：元素.style.样式名 = "样式值"    原始样式名中的"-"符号转换为驼峰式
                ③ 操作元素的文本    语法：元素.innerHTML = "文本"    只识别文本    
                                        元素.innerText = "文本"    可以同时识别html代码
                ④ 增删元素      
                    创建元素    var csli = document.createElement("li");
                    在父元素中追加子元素     父元素.appendChild(子元素);
                    在指定元素前增加某个元素    cityul.insertBefore(csli,gzli);
                    在父元素中，用某个新元素替换原本的子元素    cityul.replaceChild(新元素, 旧元素);
                    删除当前元素    元素.remove();
                    清空元素    元素.innerHTML = "";
        */

       function addCd() {
        // 创建一个新元素
        // 创建元素
        var cdli = document.createElement("li");
        // 设置子元素的属性和文本
        cdli.id = "cd";
        cdli.innerHTML = "成都";
        // 获取父元素
        var cityul = document.getElementById("city");
        // 将子元素放在父元素之中
        cityul.appendChild(cdli);
       }    

       function addGzBefore() {
        // 创建一个新元素
        // 创建元素
        var hzli = document.createElement("li");
        // 设置子元素的属性和文本
        hzli.id = "hz";
        hzli.innerText = "杭州";
        // 将子元素放入父元素中
        var cityul = document.getElementById("city");
        // 在父元素中追加子元素
        // cityul.insertBefore(新元素, 参考元素);
        // 定义参考元素
        var gzli = document.getElementById("gz");
        cityul.insertBefore(hzli,gzli);
       }

       function replaceBj() {
        // 创建一个新元素
        // 创建元素
        var njli = document.createElement("li");
        // 设置子元素的属性和文本
        njli.id = "nj";
        njli.innerText = "南京";
        // 将子元素放入父元素中
        var cityul = document.getElementById("city");
        // 在父元素中，用某个新元素替换原本的子元素
        // cityul.replaceChild(新元素, 旧元素);
        var bjli = document.getElementById("bj");
        cityul.replaceChild(njli, bjli);
       }

       // 删除深圳
       function removeSZ() {
        var szli=document.getElementById("sz");
        // 哪个元素调用了remove，则该元素就会从dom树中移除
        szli.remove();
       }

       // 清空城市列表
       function clearCity() {
        // 获取父元素
        var cityul = document.getElementById("city");
        var fc = cityul.firstChild;
        while(fc!= null) {
            fc.remove();
            fc = cityul.firstChild;
        }
        // 方式二
        // cityul.innerHTML = ""
        // 方式三
        // cityul.removeChild(cityul.lastChild)

        // 方式四
        // var child = cityul.lastChild;
        // while(child != null) {
        //     cityul.removeChild(child);
        //     child = cityul.lastChild;
        // }
       }    

</script>
<body>
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
    </ul>
    
    <hr>
     <!-- 目标1：在城市列表的最后添加一个子标签 <li id="cd">成都</li> -->
    <button onclick="addCd()">增加成都</button>
     <!-- 目标2：在城市列表的广州前添加一个子标签 <li id="hz">杭州</li> -->
     <button onclick="addGzBefore()">在广州前插入杭州</button>
     <!-- 目标3：将城市列表中的北京替换为南京 <li id="nj">南京</li> -->
     <button onclick="replaceBj()">替换北京</button>
     <!-- 目标4：将城市列表中删除深圳 <li id="sz">深圳</li> -->
     <button onclick="removeSZ()">删除深圳</button>
     <!-- 目标5：清空城市列表 -->
     <button onclick="clearCity()">清空列表</button>

</body>
</html>