当前位置：首页 > Web开发 > 正文

所以找到了就返回一个存储了标签对象的数组

2024-03-31 Web开发

一.学习DOM之前需要知道的

1.什么是window？

window：是一个全局东西, 代表浏览器中一个打开的窗口, 每个窗口都是一个window东西

2.什么是document?

document是window的一个属性, 这个属性是一个东西

document: 代表当前窗口中的整个网页,

document东西生存了网页上所有的内容, 通过document东西就可以操纵网页上的内容

3.什么是DOM?

DOM 界说了访谒和操纵 HTML文档(网页)的标准要领

DOM全称: Document Object Model, 即文档模型东西

所以学习DOM就是学习如何通过document东西操纵网页上的内容

1 console.log(window.document); //就是当前html文档的内容

2 console.log(typeof window.document); //是一个东西类型

3 console.log(window.document.title); //就是当前html文档的title标签里的值

二：获取DOM元素的方法之一

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8  18 <div class="father"> 19 <form> 20 <input type="text" name="test"> 21 <input type="password" name="test"> 22 </form> 23 </div> 24 <div class="father" id="box">我是div</div> 25 26 <script> 27 /* 28 1.通过id获取指定元素 29 由于id不成以反复, 所以找到了就会将找到的标签包装成一个东西返回给我们, 找不到就返回Null 30 注意点: DOM操纵返回的是一个东西, 这个东西是宿主类型东西(浏览器供给的东西) 31 */ 32 /* 33 let oDiv = document.getElementById("box"); 34 console.log(oDiv); 35 console.log(typeof oDiv); 36 */ 37 38 /* 39 2.通过class名称获取 40 由于class可以反复, 所以找到了就返回一个存储了标签东西的数组, 找不到就返回一个空数组 41 */ 42 /* 43 let oDivs = document.getElementsByClassName("father"); 44 console.log(oDivs); 45 */ 46 47 /* 48 3.通过name名称获取 49 由于name可以反复, 所以找到了就返回一个存储了标签东西的数组, 找不到就返回一个空数组 50 注意点: 51 getElementsByName 在差此外浏览器此中事情方法差别。在IE和Opera中，， getElementsByName() 要领还会返回那些 id 为指定值的元素。 52 */ 53 /* 54 let oDivs = document.getElementsByName("test"); 55 console.log(oDivs); 56 */ 57 58 /* 59 4.通过标签名称获取 60 由于标签名称可以反复, 所以找到了就返回一个存储了标签东西的数组, 找不到就返回一个空数组 61 */ 62 /* 63 let oDivs = document.getElementsByTagName("div"); 64 console.log(oDivs); 65 */ 66 67 /* 68 5.通过选择器获取 69 querySelector只会返回按照指定选择器找到的第一个元素 70 */ 71 /* 72 // let oDiv = document.querySelector("#box"); 73 // let oDiv = document.querySelector(".father"); 74 let oDiv = document.querySelector("div>form"); 75 console.log(oDiv); 76 */ 77 78 /* 79 6.通过选择器获取 80 querySelectorAll会返回指定选择器找到的所有元素 81 */ 82 // let oDivs = document.querySelectorAll(".father"); 83 // console.log(oDivs); 84 </script> 85 </body> 86 </html>

二：获取DOM元素的方法之二

原生js操纵dom的总结

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31043.html

上一篇： HTMLTestRunner测试报告
下一篇： selected 或者 disabled 使用prop()

所以找到了就返回一个存储了标签对象的数组

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢