JavaScript_DOM 骑猪看日落 2024-03-31 13:16 70阅读 0赞 ## JavaScript\_DOM ## **学习路线**：[JavaScript基础语法（输出语句）][JavaScript]\->[JavaScript基础语法（变量）][JavaScript 1]\->[JavaScript基础语法（数据类型）][JavaScript 2]\->[JavaScript基础语法（运算符）][JavaScript 3]\->[JavaScript基础语法（流程控制语句）][JavaScript 4]\->[JavaScript基础语法（类型转换）][JavaScript 5]\->[JavaScript基础语法（函数）][JavaScript 6]\->[Array\_JavaScript][Array_JavaScript]\->[String\_JavaScript][String_JavaScript]\->[自定义对象\_JavaScript][JavaScript 7]\->[JavaScript\_BOM][JavaScript_BOM]\->[Window对象][Window]\->[confirm()、setInterval()、setTimeout()][confirm_setInterval_setTimeout]\->[History、Location][History_Location]\->[闪烁的灯泡][Link 1]\->[JavaScript\_DOM][JavaScript_DOM]\->[事件绑定(onclick,onfocus,onblur)][onclick_onfocus_onblur]\-> [事件绑定(onmouseout,onmouseover) ][onmouseout_onmouseover_]\->[事件绑定(onsubmit)表单提交 ][onsubmit_]\->[提交表单与验证表单案例 ][Link 2] ### 概述 ### 简单说就是用来操作HTML的方法，详情看[官方文档][Link 3]。 对于我们只需要会使用下面的这个Element对象就可以了。 ### 获取 Element对象 ### HTML 中的 Element 对象可以通过 `Document` 对象获取，而 `Document` 对象是通过 `window` 对象获取。 `Document` 对象中提供了以下获取 `Element` 元素对象的函数 * `getElementById()`：根据id属性值获取，返回单个Element对象 * `getElementsByTagName()`：根据标签名称获取，返回Element对象数组 * `getElementsByName()`：根据name属性值获取，返回Element对象数组 * `getElementsByClassName()`：根据class属性值获取，返回Element对象数组 **代码演示：** 下面有提前准备好的页面： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="image" src="https://ts1.cn.mm.bing.net/th/id/R-C.589ed66e38f19542c0f1cffec3be1361?rik=1XjVmH47qLrd2Q&riu=http%3a%2f%2fimg.ppt.cn%2f20180328%2f77eb43c198f8291a5b60b10ee6539814.jpg&ehk=l%2fXtp9WttQg9LfdU7s2FD6whgjKUW9nbqCg6AvF%2betA%3d&risl=&pid=ImgRaw&r=0"> <br> <div class="div1">div1</div> <br> <div class="div2">div2</div> <br> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 <br> <script> //在此处书写js代码 </script> </body> </html> 1. 根据 `id` 属性值获取上面的 `img` 元素对象，返回单个对象`getElementById` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="image" src="https://ts1.cn.mm.bing.net/th/id/R-C.589ed66e38f19542c0f1cffec3be1361?rik=1XjVmH47qLrd2Q&riu=http%3a%2f%2fimg.ppt.cn%2f20180328%2f77eb43c198f8291a5b60b10ee6539814.jpg&ehk=l%2fXtp9WttQg9LfdU7s2FD6whgjKUW9nbqCg6AvF%2betA%3d&risl=&pid=ImgRaw&r=0"> <br> <div class="div1">div1</div> <br> <div class="div2">div2</div> <br> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 <br> <script> var img = document.getElementById("image"); console.log(img) </script> </body> </html> **运行结果**： ![在这里插入图片描述][2cf703c90c72410bb0b147419fad97ba.png] 1. 根据标签名称获取所有的 `div` 元素对象`getElementsByTagName` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="image" src="https://ts1.cn.mm.bing.net/th/id/R-C.589ed66e38f19542c0f1cffec3be1361?rik=1XjVmH47qLrd2Q&riu=http%3a%2f%2fimg.ppt.cn%2f20180328%2f77eb43c198f8291a5b60b10ee6539814.jpg&ehk=l%2fXtp9WttQg9LfdU7s2FD6whgjKUW9nbqCg6AvF%2betA%3d&risl=&pid=ImgRaw&r=0"> <br> <div class="div1">div1</div> <br> <div class="div2">div2</div> <br> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 <br> <script> //在此处书写js代码 var divs = document.getElementsByTagName("div");// 返回一个数组，数组中存储的是 div 元素对象 console.log(divs.length) //遍历数组 for (let i = 0; i < divs.length; i++) { console.log(divs[i]); } </script> </body> </html> **运行结果**： ![在这里插入图片描述][ccb3382b67644eff905b2dc6877bd5ce.png] 1. 获取所有的满足 `name = 'hobby'` 条件的元素对象`getElementsByName` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="image" src="https://ts1.cn.mm.bing.net/th/id/R-C.589ed66e38f19542c0f1cffec3be1361?rik=1XjVmH47qLrd2Q&riu=http%3a%2f%2fimg.ppt.cn%2f20180328%2f77eb43c198f8291a5b60b10ee6539814.jpg&ehk=l%2fXtp9WttQg9LfdU7s2FD6whgjKUW9nbqCg6AvF%2betA%3d&risl=&pid=ImgRaw&r=0"> <br> <div class="div1">div1</div> <br> <div class="div2">div2</div> <br> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 <br> <script> //3. getElementsByName：根据name属性值获取，返回Element对象数组 var hobbys = document.getElementsByName("hobby"); for (let i = 0; i < hobbys.length; i++) { console.log(hobbys[i]); } </script> </body> </html> **运行结果**： ![在这里插入图片描述][5239118ef88a4145a0725d139f1446ea.png] 1. 获取所有的满足 `class='d'` 条件的元素对象`getElementsByClassName()` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="image" src="https://ts1.cn.mm.bing.net/th/id/R-C.589ed66e38f19542c0f1cffec3be1361?rik=1XjVmH47qLrd2Q&riu=http%3a%2f%2fimg.ppt.cn%2f20180328%2f77eb43c198f8291a5b60b10ee6539814.jpg&ehk=l%2fXtp9WttQg9LfdU7s2FD6whgjKUW9nbqCg6AvF%2betA%3d&risl=&pid=ImgRaw&r=0"> <br> <div class="d">div1</div> <br> <div class="d">div2</div> <br> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 <br> <script> var ds = document.getElementsByClassName("d") for(var i = 0; i < ds.length; ++ i){ console.log(ds[i]) } </script> </body> </html> **运行结果**： ![在这里插入图片描述][e6270a47cbcd40ea8bdb5d7154d1ccbe.png] ### 小案例 ### #### 获取被选中的复选框对象 #### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="checkbox" name="hobby" checked="true" value="电影"> 电影 <input type="checkbox" name="hobby" value="旅游"> 旅游 <input type="checkbox" name="hobby" value="游戏"> 游戏 <br> <script> //1，获取所有的 复选框 元素对象 var hobbys = document.getElementsByName("hobby"); var res = new Array(); //2，遍历数组，筛选出复选框为true的 for (let i = 0; i < hobbys.length; i++) { if (hobbys[i].checked == true){ res.push(hobbys[i]); } } // 3. 查询筛选出来的内容 for(let i = 0; i < res.length; ++ i){ console.log(res[i]) } </script> </body> </html> **运行结果** ![在这里插入图片描述][6d8d221fcb0d4796a7ed89299cde95d1.png] #### 设置div中的内容 #### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="div1">1</div> <div class="div2">2</div> <br> <script> //1，获取所有的 div 元素对象 var divs = document.getElementsByTagName("div"); /* style:设置元素css样式 innerHTML：设置元素内容 */ //2，遍历数组，获取到每一个 div 元素对象，并修改元素内容 for (let i = 0; i < divs.length; i++) { //divs[i].style.color = 'red'; divs[i].innerHTML = "haha"; } </script> </body> </html> **运行结果** ![在这里插入图片描述][d9b728e55e004c3aa909b6551f54b26f.png] [JavaScript]: https://blog.csdn.net/qq_51447496/article/details/128085137 [JavaScript 1]: https://blog.csdn.net/qq_51447496/article/details/128085348 [JavaScript 2]: https://blog.csdn.net/qq_51447496/article/details/128086148 [JavaScript 3]: https://blog.csdn.net/qq_51447496/article/details/128086681 [JavaScript 4]: https://blog.csdn.net/qq_51447496/article/details/128088817 [JavaScript 5]: https://blog.csdn.net/qq_51447496/article/details/128087248 [JavaScript 6]: https://blog.csdn.net/qq_51447496/article/details/128088986 [Array_JavaScript]: https://blog.csdn.net/qq_51447496/article/details/128089474 [String_JavaScript]: https://blog.csdn.net/qq_51447496/article/details/128089631 [JavaScript 7]: https://blog.csdn.net/qq_51447496/article/details/128089766 [JavaScript_BOM]: https://editor.csdn.net/md/?articleId=128095193 [Window]: https://blog.csdn.net/qq_51447496/article/details/128095300 [confirm_setInterval_setTimeout]: https://blog.csdn.net/qq_51447496/article/details/128103458 [History_Location]: https://blog.csdn.net/qq_51447496/article/details/128104240 [Link 1]: https://blog.csdn.net/qq_51447496/article/details/128095524 [JavaScript_DOM]: https://blog.csdn.net/qq_51447496/article/details/128104720 [onclick_onfocus_onblur]: https://blog.csdn.net/qq_51447496/article/details/128110532 [onmouseout_onmouseover_]: https://blog.csdn.net/qq_51447496/article/details/128112439 [onsubmit_]: https://blog.csdn.net/qq_51447496/article/details/128112553 [Link 2]: https://blog.csdn.net/qq_51447496/article/details/128112770 [Link 3]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction [2cf703c90c72410bb0b147419fad97ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/bd4b09da23e44cd1a902677ca811110d.png [ccb3382b67644eff905b2dc6877bd5ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/0ac3f7ec85ac4b368f431f04cd676bc3.png [5239118ef88a4145a0725d139f1446ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/9d1dad55626642f085d7709a4141abb9.png [e6270a47cbcd40ea8bdb5d7154d1ccbe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/be0fa1544b6c49a3bda88884af7ed0f3.png [6d8d221fcb0d4796a7ed89299cde95d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/bba7e1743e294a7a916b6b230671fa7e.png [d9b728e55e004c3aa909b6551f54b26f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/a35bade2b31846d696dccf4c5d99c2d4.png
相关 JS--JavaScriptDOM基础及各版本特性（DOM1.0、DOM2.0、DOM3.0） DOM基础 DOM（Document Object Model，文档对象模型）是W3C制定的一套技术规范，用来描述JavaScript脚本怎样与HTML或XML文档进行交 不念不忘少年蓝@/ 2021年08月13日 11:35/ 0 赞/ 550 阅读
不念不忘少年蓝@
还没有评论，来说两句吧...