原生js操作dom的总结
2021-04-25 02:29
标签：typeof 文档 span 操作dom lang 不用 element doctype password 一.学习DOM之前需要知道的 1.什么是window？ window：是一个全局对象, 代表浏览器中一个打开的窗口, 每个窗口都是一个window对象 二：获取DOM元素的方式之二 原生js操作dom的总结 标签：typeof 文档 span 操作dom lang 不用 element doctype password 原文地址：https://www.cnblogs.com/gsq1998/p/12230827.html 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">我是divdiv>
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>