在光芒万丈之前，我们都要欣然接受眼下的难堪和不易，接受一个人的孤独和无助，认真做好眼前的每一件事，你想要的都会有
—— 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编程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>
