1. dom节点
1.1 dom节点获取
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM document object model 文档顶级节点</title></head><body> <div id="box"> <p class="p1" >张三</p> <p class="p2">李四</p> <p class="p3">赵刘</p> <p name="ceshi1"></p> <p name="ceshi1"></p> </div> <div> <input type="text" name="username" /> <input type="password" name="pwd" /> <p1>112233</p1> <box>55666</box> </div> <script> console.log(document) // ### 1 通过id获取div节点对象 var box = document.getElementById("box"); console.log(box); // ### 2 通过类名获取节点对象 [返回的是数组] var p2 = document.getElementsByClassName("p2"); console.log(p2 , typeof(p2)); // 获取李四节点对象 lisi = p2[0]; console.log(lisi) // 获取王五节点对象 wangwu = p2[1]; console.log(wangwu); // ### 3.通过标签获取节点对象 [返回的是数组] var p = document.getElementsByTagName("p"); console.log(p) console.log(p[1]) // ### 4.通过标签身上的name属性 [返回的是数组] 一般用在input表单中 var ceshi1 = document.getElementsByName("username")[0]; console.log(ceshi1); // ### 通过css选择器获取对应的元素节点 // ### 5.querySelector ,只获取找到的第一个; var p1 = document.querySelector(".p1"); console.log(p1) var box = document.querySelector("#box"); console.log(box) // input表单有两个,但是只获取第一个; var input = document.querySelector("input"); console.log(input); // ### 6.querySelectorAll 获取所有找到的元素节点,返回数组 var all = document.querySelectorAll("input[name=username]")[0]; console.log(all); </script></body></html> |
1.2 节点元素层级关系
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>节点元素层级关系</title></head><body> <div id="box"> <p> <input type="text" name="username" /> <input type="password" name="pwd" /> </p> <p class="p1" >张三</p> <p class="p2">李四</p> <p class="p3">赵刘</p> <p name="ceshi1"></p> <p name="ceshi1"></p> </div> <script> // ### 获取对应的节点元素 console.log(document) console.log(document.documentElement); // html console.log(document.documentElement.children) // 找html里面所有的子节点children var html_children = document.documentElement.children console.log(html_children) // head , body body = html_children[1]; console.log(body); // head , body var div = body.children[0] console.log(div); var p0 = div.children[0] console.log(p0) var input = p0.children console.log(input) var input1 = input[0] console.log(input1) // 获取下一个节点对象nextSibling console.log(input1.nextSibling.nextSibling); // 获取下一个元素节点对象 nextElementSibling var input2 = input1.nextElementSibling; console.log(input2); // 获取上一个节点对象 previousSibling console.log(input2.previousSibling) // 获取上一个元素节点对象 previousElementSibling console.log(input2.previousElementSibling) // 获取input2父节点元素对象; console.log(input2.parentElement) </script></body></html> |
1.3 修改_清空内容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM 修改/清空内容</title></head><body> <button onclick="func1()">修改内容</button> <button onclick="func2()">清空内容</button> <div id="box" style="border:solid 1px red;"> <p>我是最帅的最有钱的<a href="#">最有味的</a>男人</p> </div> <script> // innerHTML 获取标签里面所有内容 [标签 + 文本] // innerText 获取标签里面所有字符串[文本] var p = document.querySelector("#box p"); // console.log把数据展现在控制台 console.log(p); // document.write 把数据以字符串的形式展现在浏览器 document.write(p); // 点击button1触发如下任务 , 修改 function func1(){ var content = p.innerHTML; var content = p.innerText; console.log(content); // p.innerHTML = `我被修改了 <a href=''>点我中大奖</a>...1`; p.innerText = `我被修改了 <a href=''>点我中大奖</a>...2`; } // 点击button2触发如下任务 , 清空 function func2(){ p.innerHTML = ''; } </script></body></html> |
1.4 隐藏显示密码效果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隐藏显示密码效果</title></head><body> <input type="password" name="pwd" value="111" class="abcd" /> <button onclick="change()" id="btn" >点我显示密码</button> <div> <img src="images/oneal1.jpg" /> </div> <script> // 效果1: 显示隐藏密码 var password = document.querySelector("input[name=pwd]") console.log(password); console.log(password.type); console.log(password.name); console.log(password.value); console.log(password.className) function change(){ var btn = document.querySelector("#btn") console.log(btn); if(password.type=="password"){ password.type = "text"; btn.innerHTML = "点我隐藏密码"; }else{ password.type= "password"; btn.innerHTML = "点我显示密码"; } } // 效果2:点击换图片 var img = document.querySelector("img"); console.log(img) img.onclick = function(){ console.log(img.src) // http://127.0.0.1:5500/images/oneal1.jpg var arr = img.src.split("/") imgname = arr[arr.length - 1] console.log(arr , imgname); if(imgname == "oneal1.jpg"){ img.src = "images/bakeli.jpg"; }else{ img.src = "images/oneal1.jpg"; } } </script></body></html> |
2. 全选_反选_不选
2.1 全选_反选_不选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全选,反选,不选</title> <style> * {margin:0px;padding:0px;} ul {list-style: none;} #ul1 li {float:left;} #ul1 li button {width:80px;height:30px;} #ul1 li button:hover {background-color: tan;} #ul2 {clear:both;} </style></head><body> <ul id="ul1"> <li><button>全选</button></li> <li><button>不选</button></li> <li><button>反选</button></li> </ul> <ul id="ul2"> <li><input type="checkbox" /> 看电影 </li> <li><input type="checkbox" /> 吃面 </li> <li><input type="checkbox" /> 烫头 </li> <li><input type="checkbox" /> 跑步 </li> <li><input type="checkbox" /> 篮球 </li> </ul> <script> // 获取btn节点对象 var btn1 = document.querySelector("#ul1 li:nth-child(1) button"); var btn2 = document.querySelector("#ul1 li:nth-child(2) button"); var btn3 = document.querySelector("#ul1 li:nth-child(3) button"); // 全选 btn1.onclick = function(){ // 获取#ul2 li 里的input /* var data_lst = document.getElementById("ul2").getElementsByTagName("input"); console.log(data_lst) */ var data_lst = document.querySelectorAll("#ul2 li input"); console.log(data_lst) // 获取数组当中每一个input节点元素对象 for(var input of data_lst){ //console.log(input.checked) // 设置节点input的checked属性为true; input.checked = true; } } // 不选 btn2.onclick = function(){ var data_lst = document.querySelectorAll("#ul2 li input"); console.log(data_lst) // 获取数组当中每一个input节点元素对象 for(var input of data_lst){ //console.log(input.checked) // 设置节点input的checked属性为true; input.checked = false; } } // 反选 btn3.onclick = function(){ var data_lst = document.querySelectorAll("#ul2 li input"); console.log(data_lst) // 获取数组当中每一个input节点元素对象 for(var input of data_lst){ if(input.checked === true){ input.checked = false; }else{ input.checked = true; } } } </script></body></html> |
2.2 js控制css的相关属性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js控制css的相关属性</title> <style> .box {border:solid 1px red;} .box_new {position: absolute; left:200px;} </style></head><body> <button id="box1">点击我换颜色</button> <button id="box2">点击我隐藏</button> <button id="box3">点击我显示</button> <button id="box4">点击边框换圆角</button> <button id="box5">点击加样式</button> <div class="box" style="width:300px;height:200px;background-color: yellow;font-size:40px;">你好评</div> <script> var box = document.querySelector(".box"); console.log(box); // js的dom对象获取相关的css属性 // 获取方法一 console.log(box.style.width); console.log(box.style.backgroundColor); // 获取方法二 console.log(box.style["width"]); console.log(box.style["background-color"]); console.log(box.style["font-size"]); // 获取方法三 getComputedStyle 获取该节点对象的所有样式 console.log( window.getComputedStyle(box)["font-size"] , "<===getComputedStyle===>"); console.log( window.getComputedStyle(box).fontSize , "<===getComputedStyle===>"); // 事件绑定 var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var box3 = document.getElementById("box3"); var box4 = document.getElementById("box4"); var box5 = document.getElementById("box5"); box1.onclick = function(){ box.style.backgroundColor = "red"; } box2.onclick = function(){ box.style.display = "none"; } box3.onclick = function(){ box.style.display = "block"; } box4.onclick = function(){ //box.style.borderRadius = "100%"; var point = 0; var t = setInterval( function(){ box.style.borderRadius = `${point}%`; if(point < 100){ point++; }else{ clearInterval(t) console.log("结束了... ") } } , 50) } /* 重点 添加样式*/ box5.onclick = function(){ // box.className = "box box_new"; box.className += " box_new"; } </script></body></html> |
2.3 js事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js事件</title> <style> *{margin:0px;padding:0px;} .box {width:100px;height:100px;background: green;position: absolute;left:0px;} </style></head><body> <!-- 1.事件的静态绑定 --> <button onclick="func1()">按钮1</button> <div class="box"></div> <script> var box = document.getElementsByClassName("box")[0]; var t; console.log(box); function func1(){ var left = parseInt(window.getComputedStyle(box).left) console.log(left ,typeof(left)); // console.log(box.style.left); t = setInterval(function(){ left += 10; box.style.left = `${left}px`; } , 50) } // 2.事件的动态绑定 // onmouseover 鼠标指针悬停在指定元素上时触发 box.onmouseover = function(){ clearInterval(t); } // onmouseout 鼠标指针离开指定元素时触发 box.onmouseout = function(){ func1() } </script></body></html> |
3. 模态框
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模态框</title> <style> .box { position:fixed; width:100%; height:100%; top:0px; background-color: greenyellow; display: none; } .content { border:solid 1px red; width:500px; height:500px; background-color:tan; margin:auto; margin-top:14%; } </style></head><body> <button id="login">登录</button> <div class="box"> <div class="content" > <span class="close">X</span> <br /> <span>账号: <input type="text" /></span> <br / > <span>密码: <input type="password" /></span> </div> </div> <script> var btn = document.getElementById("login"); var box = document.querySelector(".box"); var close = document.querySelector(".close"); btn.onclick = function(){ console.log(11) box.style.display = "block"; } close.onclick = function(){ box.style.display = "none"; } </script></body></html> |
原文链接：https://blog.csdn.net/weixin_46818279/article/details/122517083
