2.5.6 DOM操作
由于实际开发时基本上都是使用JavaScript的各种框架来操作，而框架中的操作方式和我们现在看到的原生操作完全不同，所以下面罗列的API仅供参考，不做要求。
2.5.6.1 在整个文档范围内查询元素节点
| 功能 | API | 返回值 |
| 根据id值查询 | document.getElementById(“id值”) | 一个具体的元素节 |
| 根据标签名查询 | document.getElementsByTagName(“标签名”) | 元素节点数组 |
| 根据name属性值查询 | document.getElementsByName(“name值”) | 元素节点数组 |
| 根据类名查询 | document.getElementsByClassName(“类名”) | 元素节点数组 |
2.5.6.2 在具体元素节点范围内查找子节点
| 功能 | API | 返回值 |
| 查找子标签 | element.children | 返回子标签数组 |
| 查找第一个子标签 | element.firstElementChild 【W3C考虑换行，IE≤8不考虑】 | 标签对象 |
| 查找最后一个子标签 | element.lastElementChild 【W3C考虑换行，IE≤8不考虑】 | 节点对象 |
2.5.6.3 查找指定元素节点的父节点
| 功能 | API | 返回值 |
| 查找指定元素节点的父标签 | element.parentElement | 标签对象 |
2.5.6.4 查找指定元素节点的兄弟节点
| 功能 | API | 返回值 |
| 查找前一个兄弟标签 | node.previousElementSibling 【W3C考虑换行，IE≤8不考虑】 | 标签对象 |
| 查找后一个兄弟标签 | node.nextElementSibling 【W3C考虑换行，IE≤8不考虑】 | 标签对象 |
扩展内容(根据选择器查找标签)
| 功能 | API | 返回值 |
| 根据选择器查找一个标签 | document.querySelector(“选择器”) | 标签对象 |
| 根据选择器查找多个标签 | document.querySelectorAll(“选择器”) | 标签数组 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM查找节点</title> </head> <body> <input type="text" id="username"> <input type="text" class="c1"> <input type="text" class="c1"> <div> <div></div> <div></div> </div> <script> //根据id查询标签 var elementById = document.getElementById("username"); //console.log(elementById) //根据类名查询标签 var elementsByClassName = document.getElementsByClassName("c1"); //console.log(elementsByClassName) //根据标签名查询标签 var elementsByTagName = document.getElementsByTagName("input"); //console.log(elementsByTagName) //查找子节点: 查找body的所有子标签,要注意文本也属于子节点 /*var childNodes = document.getElementsByTagName("body")[0].childNodes; console.log(childNodes)*/ //查找子标签: children var children = document.getElementsByTagName("body")[0].children; //console.log(children) //查找id为username的标签的父节点 var parentNode = document.getElementById("username").parentNode; //console.log(parentNode) //查找id为username的标签的前一个兄弟标签 var previousElementSibling = document.getElementById("username").previousElementSibling; //console.log(previousElementSibling) //查找id为username的标签的后一个兄弟标签 var nextElementSibling = document.getElementById("username").nextElementSibling; //console.log(nextElementSibling) //根据选择器查找标签:document.querySelector("选择器")根据选择器查找一个标签, document.querySelectorAll("选择器")根据选择器查找多个标签 //什么是选择器: 用于查找标签的一些表达式，其中最基本的三种选择器是:ID选择器、类选择器、标签选择器 //选择器参考jQuery的文档 //查找id为username的标签，使用的是id选择器 var ipt1 = document.querySelector("#username"); //console.log(ipt1) //查找body内的所有后代div，用的是层级选择器 var ipts = document.querySelectorAll("body div"); //查找id为username的标签的后面第一个兄弟 var i1 = document.querySelector("#username+input"); //查找id为username的标签的后面的所有兄弟 var i2 = document.querySelectorAll("#username~input"); console.log(i2) </script> </body> </html>
2.5.6.5 属性操作
| 需求 | 操作方式 |
| 读取属性值 | 元素对象.属性名 |
| 修改属性值 | 元素对象.属性名=新的属性值 |
2.5.6.6 标签体的操作
| 需求 | 操作方式 |
| 获取或者设置标签体的文本内容 | element.innerText |
| 获取或者设置标签体的内容 | element.innerHTML |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作标签的属性和文本</title> </head> <body> <input type="text" id="username" name="username" /> <div id="d1"> <h1>你好世界</h1> </div> <script> //目标: 获取id为username的输入框的value //1. 找到要操作的标签 var ipt = document.getElementById("username"); //2. 设置标签的value属性值 ipt.value = "张三" //3. 获取标签的value属性的值 var value = ipt.value; console.log(value) //获取id为d1的div中的文本内容 //获取标签的文本: element.innerText,获取文本的时候会将左右两端的空格去掉 var innerText = document.getElementById("d1").innerText; console.log(innerText) //获取标签体的内容: element.innerHTML,获取标签体的内容 var innerHTML = document.getElementById("d1").innerHTML; console.log(innerHTML) //设置标签体的内容:建议使用innerHTML，如果是使用innerText的话它会将标签当做普通文本处理 document.getElementById("d1").innerHTML = "<h1>hello world</h1>" </script> </body> </html>
2.5.6.7 DOM增删改操作
| API | 功能 |
| document.createElement(“标签名”) | 创建元素节点并返回，但不会自动添加到文档中 |
| document.createTextNode(“文本值”) | 创建文本节点并返回，但不会自动添加到文档中 |
| element.appendChild(ele) | 将ele添加到element所有子节点后面 |
| parentEle.insertBefore(newEle,targetEle) | 将newEle插入到targetEle前面 |
| parentEle.replaceChild(newEle, oldEle) | 用新节点替换原有的旧子节点 |
| element.remove() | 删除某个标签 |
| element.innerHTML | 读写HTML代码 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建和删除标签</title> </head> <body> <ul id="city"> <li id="bj">北京</li> <li id="sh">上海</li> <li id="sz">深圳</li> <li id="gz">广州</li> </ul> <script> //目标1: 在城市列表的最后添加一个子标签 <li id="cs">长沙</li> //1. 创建一个li标签 <li></li> var liElement = document.createElement("li"); //2. 给创建的li标签设置id属性和文本 <li id="cs">长沙</li> liElement.id = "cs" liElement.innerText = "长沙" //3. 将创建的li标签添加到城市列表中（ul） var cityUl = document.getElementById("city"); //父.appendChild(子)将子标签添加到父标签的最后面 //cityUl.appendChild(liElement) //目标2:在城市列表的深圳之前添加一个子标签 <li id="cs">长沙</li> //获取到深圳这个标签 var szElement = document.getElementById("sz"); //父.insertBefore(新标签,参照标签) //cityUl.insertBefore(liElement,szElement) //目标3: 在城市列表中添加一个子标签替换深圳 <li id="cs">长沙</li> //父.replaceChild(新标签,被替换的标签) //cityUl.replaceChild(liElement,szElement) //目标4: 在城市列表中删除深圳 //szElement.remove() //目标5: 清除城市列表中的所有城市,保留城市列表标签ul cityUl.innerHTML = "" </script> </body> </html>
2.5.7 JavaScript的事件驱动(很重要)
2.5.7.1 事件的概念
- HTML 事件是发生在 HTML 元素上的“事情”， 是浏览器或用户做的某些事情
- 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
2.5.7.2 常见事件
| 属性 | 此事件发生在何时… |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onchange | 域的内容被改变。 |
| onblur | 元素失去焦点。 |
| onfocus | 元素获得焦点。 |
| onload | 一张页面或一幅图像完成加载。 |
| onsubmit | 确认按钮被点击；表单被提交。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按住。 |
| onkeyup | 某个键盘按键被松开。 |
| onmousedown | 鼠标按钮被按下。 |
| onmouseup | 鼠标按键被松开。 |
| onmouseout | 鼠标从某元素移开。 |
| omouseover | 鼠标移到某元素之上。 |
| onmousemove | 鼠标被移动。 |
2.5.7.3 事件绑定的方式
2.5.7.3.1 普通函数方式
说白了设置标签的属性
<标签 属性="js代码，调用函数"></标签>
2.5.7.3.2 匿名函数方式
<script> 标签对象.事件属性 = function(){ //执行一段代码 } </script>
2.5.7.4 事件的使用介绍
<input type="button" value="按钮" onclick="fn1()"> <input type="button" value="另一个按钮" id="btn"> <script> //当点击的时候要调用的函数 function fn1() { alert("我被点击了...") } //给另外一个按钮，绑定点击事件: //1.先根据id获取标签 let btn = document.getElementById("btn"); //2. 设置btn的onclick属性(绑定事件) //绑定命名函数 //btn.onclick = fn1 //绑定匿名函数 btn.onclick = function () { console.log("点击了另外一个按钮") } </script>
- 获得焦点(onfocus)和失去焦点(onblur)
需求:给输入框设置获得和失去焦点
var ipt = document.getElementById("ipt"); //绑定获取焦点事件 ipt.onfocus = function () { console.log("获取焦点了...") } //绑定失去焦点事件 ipt.onblur = function () { console.log("失去焦点了...") }
<body> <!--内容改变(onchange)--> <select onchange="changeCity(this)"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="sz">深圳</option> </select> </body> <script> function changeCity(obj) { console.log("城市改变了"+obj.value); } </script>
//给输入框绑定键盘按键按下和抬起事件 ipt.onkeydown = function () { //当按键按下的时候，数据并没有到达输入框 //输出输入框里面的内容 //console.log(ipt.value) } ipt.onkeyup = function () { //输出输入框的内容:当键盘按键抬起的时候，数据已经到达了输入框 console.log(ipt.value) }
//给输入框绑定鼠标移入事件 ipt.onmouseover = function () { console.log("鼠标移入了...") } //给输入框绑定鼠标移出事件 ipt.onmouseout = function () { console.log("鼠标移出了...") }
2.5.7.5 综合案例
需求
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>综合案例</title> <style> table,tr,td,th{ border: 1px solid black; width: 500px; text-align: center; margin: auto; } div{ text-align: center; } </style> </head> <body> <table cellspacing="0" id="tb"> <tr> <th>序号</th> <th>用户名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>张三</td> <td>男</td> <td> <button onclick="deletePerson(this)">删除</button> </td> </tr> <tr> <td>2</td> <td>李四</td> <td>女</td> <td> <button onclick="deletePerson(this)">删除</button> </td> </tr> <tr> <td>3</td> <td>王五</td> <td>男</td> <td> <button onclick="deletePerson(this)">删除</button> </td> </tr> </table> <div> <form action="#"> 序号<input type="text" name="num" id="num"><br/> 用户<input type="text" name="username" id="username"/><br/> 性别<input type="text" name="gender" id="gender"/><br/> <input type="button" value="添加用户" onclick="addPerson()"/> </form> </div> <script> //目标1:点击删除按钮，删除当前行 //给所有按钮绑定点击事件 function deletePerson(obj) { //此时obj就是你点击的那个按钮 //我们要删除的就是obj的爷爷 obj.parentElement.parentElement.remove() } function addPerson() { //添加用户 //1. 获取序号、用户名、性别 var numElement = document.getElementById("num"); var num = numElement.value; var usernameElement = document.getElementById("username"); var username = usernameElement.value; var genderElement = document.getElementById("gender"); var gender = genderElement.value; //2. 将获取到的序号、用户名、性别添加到td中，td放到tr中，tr添加到table中 //2.1 创建一行 <tr></tr> var trElement = document.createElement("tr"); //2.2 往tr中添加标签体内容 trElement.innerHTML = "<td>"+num+"</td>\n" + " <td>"+username+"</td>\n" + " <td>"+gender+"</td>\n" + " <td>\n" + " <button οnclick=\"deletePerson(this)\">删除</button>\n" + " </td>" //2.3 将tr添加到表格中 var tb = document.getElementById("tb"); tb.appendChild(trElement) //3. 清空序号、用户名、性别 numElement.value = "" usernameElement.value = "" genderElement.value = "" } </script> </body> </html>
