标签：typeof 文档 span 操作dom lang 不用 element doctype password
一.学习DOM之前需要知道的
1.什么是window？
window：是一个全局对象, 代表浏览器中一个打开的窗口, 每个窗口都是一个window对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <!-- 9 1.在JavaScript中HTML标签也称之为DOM元素 10 2.使用document的时候前面不用加window 11 var num = 666; 12 window.num; 13 num; 14 同理可证 15 window.document; 16 document; 17 --> 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元素的方式之二
标签：typeof 文档 span 操作dom lang 不用 element doctype password
原文地址：https://www.cnblogs.com/gsq1998/p/12230827.html
