原生js操作dom的总结

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

原生js操作dom的总结

猜你喜欢