一.学习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 <!--
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元素的方式之二