1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <script>
8 /*
9 DOM编程就是用document对象API完成对网页HTML文档进行动态修改，以实现网页数据和样式动态变化效果的编程
10 1 获得document dom树
11 window.document
12 2 从document中获取要操作的元素
13 1.直接获取
14 var el1 = document.getElementById("username") //根据元素的id值获取页面上唯一的一个元素
15 var el2 = document.getElementsByTagName("input") //根据标签名获得多个元素
16 var el3 = document.getElementsByName("aaa") //根据元素的name属性值获得多个元素
17 var el4 = document.getElementsByClassName("a") //根据class属性值获得多个元素
18 2.间接获取
19 var cs = div01.children //通过父元素获取子元素
20 console.log(div01.firstElementChild) //获取第一个子元素
21 console.log(div01.lastElementChild) //获取最后一个子元素
22 console.log(pinput.parentElement) //通过子元素获取父元素
23 console.log(pinput.previousElementSibling) //获取前面的第一个元素
24 console.log(pinput.nextElementSibling) //获取后面的第一个元素
25 3 对元素进行操作
26 1.操作元素的属性
27 2.操作元素的样式
28 3.操作元素的文本
29 4.增删元素
30 */
31
32 function fun1(){
33 //获得document，通过document获得元素
34 var el1 = document.getElementById("username") //根据元素的id值获取页面上唯一的一个元素
35 console.log(el1)
36 }
37 function fun2(){
38 var el2 = document.getElementsByTagName("input") //根据标签名获得多个元素
39 for(var i = 0 ; i < el2.length ; i++){
40 console.log(el2[i])
41 }
42 }
43 function fun3(){
44 var el3 = document.getElementsByName("aaa") //根据元素的name属性值获得多个元素
45 for(var i = 0 ; i < el3.length ; i++){
46 console.log(el3[i])
47 }
48 }
49 function fun4(){
50 var el4 = document.getElementsByClassName("a") //根据class属性值获得多个元素
51 for(var i = 0 ; i < el4.length ; i++){
52 console.log(el4[i])
53 }
54 }
55 function fun5(){
56 //先获取父元素
57 var div01 = document.getElementById("div01") //通过父元素获取子元素
58 //获取所有子元素
59 var cs = div01.children
60 for(var i = 0 ; i < cs.length ; i++){
61 console.log(cs[i])
62 }
63 //获取第一个子元素
64 console.log(div01.firstElementChild)
65 //获取最后一个子元素
66 console.log(div01.lastElementChild)
67 }
68 function fun6(){
69 //获取子元素
70 var pinput = document.getElementById("password")
71 console.log(pinput.parentElement) //通过子元素获取父元素
72 }
73 function fun7(){
74 var pinput = document.getElementById("password")
75 console.log(pinput.previousElementSibling) //获取前面的第一个元素
76 console.log(pinput.nextElementSibling) //获取后面的第一个元素
77 }
78
79 </script>
80 </head>
81 <body>
82 <div id="div01">
83 <input type="text" class="a" id="username" name="aaa" >
84 <input type="text" class="b" id="password" name="aaa" >
85 <input type="text" class="a" id="email">
86 <input type="text" class="b" id="address">
87 </div>
88 <input type="text"><br>
89 <hr>
90
91 <input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05">
92 <input type="button" value="通过子元素获取父元素" onload="fun6()" id="btn06">
93 <input type="button" value="通过当前元素获取兄弟元素" onclick="fun7()" id="btn07">
94
95 <hr>
96 <input type="button" value="根据id获取指定元素" onclick="fun1()" id="btn01">
97 <input type="button" value="根据标签名获得多个元素" onload="fun2()" id="btn02">
98 <input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03">
99 <input type="button" value="根据class属性值获得多个元素" onclick="fun4()" id="btn04">
100 </body>
101 </html>
