JavaWeb JavaScript ⑧ 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 =""；

<!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编程API1.获得document对象——dom树window.document2.从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>