十一. DOM操作
11.1 DOM的概念
DOM编程思想指的是通过操作文档对象模型（DOM）来动态地改变HTML文档的内容、结构和样式的编程方法。DOM是一种和平台和语言无关的API，用于访问和操作HTML和XML文档的内容和结构。
DOM编程思想的核心是将HTML文档视为一个对象树(
DOM树），通过JavaScript代码来操作这个对象树实现对文档的动态改变。
11.2 DOM树
简述：
浏览器把HTML文档从服务器上下载下来之后就开始按照
从上到下的顺序读取HTML标签。每一个标签都会被封装成一个对象。而第一个读取到的肯定是根标签html，然后是它的子标签head，再然后是head标签里的子标签……所以从html标签开始，整个文档中的所有标签都会根据它们之间的
父子关系被放到一个树形结构的对象中。
以上的对象中包含了所有标签对象的整个树形结构，该对象就是JavaScript中的一个可以直接使用的内置对象document
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function f() { var arrs=new Array(); arrs[0]=10; arrs[1]="java"; //压入数据 arrs.push(12); arrs.push("mysq1"); console.log(arrs) var splice = arrs.splice(1,2); console.log(splice); } </script> </head> <body> <p>天空之花</p> <input type="button" value="点我" onclick="f()"> </body> </html>
以上的HTML标签会被解析如下所示：
11.3 各个组成部分的类型
整个文档中的一切都可以看做Node。各个具体组成部分的具体类型可以看做Node类型的子类。
其实严格来说，JavaScript并不支持真正意义上的
继承，这里借用Java中的继承概念，从逻辑上来帮助我们理解各个类型之间的关系。
| 组成部分 | 节点类型 | 具体类型 |
| 整个文档 | 文档节点 | Document |
| HTML标签 | 元素节点 | Element |
| HTML标签内的文本 | 文本节点 | Text |
| HTML标签内的属性 | 属性节点 | Attr |
| 注释 | 注释节点 | Comment |
11.4 查询
①在整个文档范围内查询元素节点
| 功能 | API | 返回值 |
| 根据id值查询 | document.getElementById(“id值”) | 一个具体的元素节 |
| 根据标签名查询 | document.getElementsByTagName(“标签名”) | 元素节点数组 |
| 根据name属性值查询 | document.getElementsByName(“name值”) | 元素节点数组 |
| 根据类名查询 | document.getElementsByClassName(“类名”) | 元素节点数组 |
从文档中找id属性值为username的元素（标签）
代码演示如下：
document.getElementById("username");
从文档中查找标签名为input的元素节点数组
代码演示如下：
document.getElementsByTagName("input");
从文档中查找name属性值为aaa的元素节点数组
document.getElementsByName("aaa");
从文档中查询相应类名的元素节点数组（一般前端人员主要使用）
代码演示如下：
document.getElementsByclassName()；
②在具体元素节点范围内查找子节点
| 功能 | API | 返回值 |
| 查找子标签 | element.children | 返回子标签数组 |
| 查找第一个子标签 | element.firstElementChild | 标签对象 |
| 查找最后一个子标签 | element.lastElementChild | 节点对象 |
③查找指定元素节点的父节点
| 功能 | API | 返回值 |
| 查找指定元素节点的父标签 | element.parentElement | 标签对象 |
④查找指定元素节点的兄弟节点
| 功能 | API | 返回值 |
| 查找前一个兄弟标签 | node.previousElementSibling | 标签对象 |
| 查找后一个兄弟标签 | node.nextElementSibling | 标签对象 |
⑤查询案例
部分代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <input type="text" id="username" name="aa"><br> <input type="text" id="password" name="aa"><br> <input type="text" id="email" name="aa"><br> <input type="text" id="address" name="d"><br> </div> <input type="button" value="提交" id="btn1"/> <input type="button" value="重置" id="btn2"/> <script> //btn2 已经加载了 var e = document.getElementById("btn2"); console.log(e); //使用 DOMContentLoaded 事件来等待 DOM 加载完成后再执行代码。在事件处理程序中，你可以访问 DOM 元素并执行任何必要的操作。 document.addEventListener("DOMContentLoaded", function() { //通过 document.getElementById() 方法获取页面上具有指定 ID 的元素，并将它存储在 btn2 变量中。 let btn2 = document.getElementById("btn2"); /* 这段代码首先检查 ID 为 “btn2” 的按钮是否存在，然后再设置它的 onclick 属性。 如果按钮存在，它将设置 onclick 属性为一个函数，该函数将在单击按钮时执行。 */ if (btn2) { btn2.onclick = function () { var div1 = document.getElementById("div1"); var children = div1.children; console.log(children.length); //如果要查找div标签中前两个元素 for (var i = 0; i < 2; i++) { console.log(children[i]); } //获取第一个子标签 console.log(div1.firstElementChild); //获取最后一个子标签 console.log(div1.lastElementChild); } } }); </script> </body> </html>
11.5 操作标签体的内容(双标签)
①获取内容
element.innerText 获得纯文本 element.innerHTML 获得纯文本+html标签
②赋值
element,innerText="纯文本" element.innerHTML="文本中的标签可以被识别"
11.6 操作属性（单标签和双标签都可以）
①取属性值
element.属性名
②赋属性值
element.属性名=值
11.7 dom操作之新建和删除
| API | 功能 |
| document.createElement(“标签名”) | 创建元素节点并返回，但不会自动添加到文档中 |
| document.createTextNode(“文本值”) | 创建文本节点并返回，但不会自动添加到文档中 |
| element.appendChild(ele) | 将ele添加到element所有子节点后面 |
| parentEle.insertBefore(newEle,targetEle) | 将newEle插入到targetEle前面 |
| parentEle.replaceChild(newEle, oldEle) | 用新节点替换原有的旧子节点 |
| element.remove() | 删除某个标签 |
增删案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul id="ul1"> <li>武汉</li> <li id="sh">上海</li> <li>深圳</li> <li id="gz">广州</li> </ul> <input type="button" value="添加城市" id="citys"> <script> document.getElementById("citys").onclick=function () { //1.创建新城市纽约，把它放到ul标签中的末尾 var li = document.createElement("li");//创建元素 li.innerText="纽约"; /*var text=document.createTextNode("纽约")；//创建文本节点 li.appendchild(text);*/ //追加至末尾 var ul1 = document.getElementById("ul1"); ul1.appendChild(li); //把纽约放到上海前面 /* var sh = document.getElementById("sh"); ul1.insertBefore(li,sh); */ //用纽约将广州替换 var gz = document.getElementById("gz"); ul1.replaceChild(li,gz); //删除url ul1.remove(); } </script> </body> </html>
十二.事件绑定
12.1 事件的概念
- HTML 事件是发生在 HTML 元素上的“事情”， 是浏览器或用户做的某些事情
- 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
12.2 事件的绑定方式
①动态绑定
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="点我" id="btn01"/> <script> document.getElementById("btn01").onclick=function (ev) { var flag=confirm("确认删除吗?"); if (flag){ alert("已成功删除") }else { alert("未成功删除") } console.log(flag) } </script> </body> </html>
在js代码内获得需要绑定的元素对象
var btne1=document.getElementById("btne1");
为该元素绑定事件类型
btne1.οnclick=function 函数名() { 代码体 }
②静态绑定
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function fun01(a,b) { alert("调用到fun01函数"+a+"\t"+b) } </script> </head> <body> <input type="button" value="按钮" onclick="fun01(10,'java')" > </body> </html>
在需要添加事件的元素上，设置属性
<body> <input type="button" value="按钮" onclick="fun01(10,'java')" > </body>
准备一个有名函数
function fun1(a,b){ alert("调用到fun01函数"+a+b); }
12.3 事件的类型
onclick ：单击事件
ondblclick： 双击事件
tips：
event：事件对象
event.target 事件作用在的那个元素对象上
附注：常见事件（了解）
| 属性 | 此事件发生在何时… |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onchange | 域的内容被改变。 |
| onblur | 元素失去焦点。 |
| onfocus | 元素获得焦点。 |
| onload | 一张页面或一幅图像完成加载。 |
| onsubmit | 确认按钮被点击；表单被提交。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeyup | 某个键盘按键被松开。 |
| onmousedown | 鼠标按钮被按下。 |
| onmouseup | 鼠标按键被松开。 |
| onmouseout | 鼠标从某元素移开。 |
| omouseover | 鼠标移到某元素之上。 |
| onmousemove | 鼠标被移动。 |
12.4 综合案例：动态表格
案例需求：
① 创建一个table，初始化用户的一些信息(编号、姓名、性别等)
② 创建一个表单，用户输入用户的信息
③ 表单中创建添加按钮，点击添加按钮，输入的用户信息追加到表格内
④ 每条用户信息后都有一个删除的超链接，点击删除，删除当前用户信息
案例图解如下：
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <script> //删除用户 function f() { var elementById = document.getElementById(event.target.id); var parentElement = elementById.parentElement.parentElement; parentElement.remove(); } //添加用户 function f1() { //1.新建一行外加四个单元格 var tr = document.createElement("tr"); var td1 = document.createElement("td"); var td2 = document.createElement("td"); var td3 = document.createElement("td"); var td4 = document.createElement("td"); //2.新建三个文本框 var text01 = document.getElementById("text01"); var text02 = document.getElementById("text02"); var text03 = document.getElementById("text03"); //3.用户会写内容到文本框中，我们将文本框中的内容写到td中，然后tr追加td td1.innerText=text01.value tr.appendChild(td1) td2.innerText=text02.value tr.appendChild(td2) td3.innerText=text03.value tr.appendChild(td3) td4.innerHTML="<input type='button' value='删除' id='btn' οnclick='f()'/>" tr.appendChild(td4) //5.将tr添加至table1表中 document.getElementById("table1").appendChild(tr); //每次输入用户信息，文本框就自动清空· text01.value=" "; text02.value=" "; text03.value=" "; } </script> </head> <body> <table border="1" cellspacing="0px" width="250px" align="center" id="table1"> <tr> <th>序号</th> <th>用户</th> <th>性别</th> <th>操作</th> </tr> <tr id="table1_tr1"> <td>1</td> <td>张三</td> <td>男</td> <td> <input type="button" value="删除" id="btn01" onclick="f()"> </td> </tr> <tr id="table1_tr2"> <td>2</td> <td>李四</td> <td>女</td> <td> <input type="button" value="删除" id="btn02" onclick="f()"> </td> </tr> <tr id="table1_tr3"> <td>3</td> <td>王五</td> <td>不详</td> <td> <input type="button" value="删除" id="btn03" onclick="f()"> </td> </tr> </table> <table border="0" cellspacing="0px" width="250px" align="center" id="table2"> <tr> <td>序号</td> <td colspan="3"><input type="text" id="text01"> </td> </tr> <tr> <td>姓名</td> <td colspan="3"><input type="text" id="text02"></td> </tr> <tr> <td>性别</td> <td colspan="3"><input type="text" id="text03"></td> </tr> <tr> <td colspan="4" align="center"><input type="button" value="添加用户" id="btn04" onclick="f1()"></td> </tr> </table> </body> </html>
