JavaScript——DOM（获取元素和操作元素）
2022/7/14 14:56:10
本文主要是介绍JavaScript——DOM（获取元素和操作元素），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
一、获取元素的几种方法
- getElementById、getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll
- document.body、document.documentElement
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 </head>
10
11 <body>
12
13 <!-- 1、通过id获取元素-->
14 <div id="idx">xxxx</div>
15 <!-- 2、通过标签名获取元素 -->
16 <ul id="ul">
17 <li></li>
18 <li></li>
19 </ul>
20 <ol>
21 <li></li>
22 <li></li>
23 </ol>
24 <!-- 3、通过类名获取元素 -->
25 <div class="classx">sss</div>
26 <div class="classx">sss</div>
27 <script>
28 //伪数组形式输出
29 // 父元素ol，子元素li
30 /* var ols = document.getElementById('olx');
31 console.log(olx.getElementsByTagName('li')); */
32
33 // 1、通过id获取元素
34 //例子： document.getElementById('id')
35 var div=document.getElementById('idx');
36 console.log(div);
37 // 获取元素的属性
38 console.dir(div);
39 // 2、通过标签名获取元素
40 // 例子：document.getElementsByTagName('li')
41 var lis=document.getElementsByTagName('li')
42 console.log(lis);
43 // 获取ul里面的li标签，返回的值为伪数组形式
44 var ul=document.getElementById('ul');
45 var lis=ul.getElementsByTagName('li');
46 console.log(lis);
47 // 3、通过类名获取元素
48 // 例子：document.getElementsByClassName('#name')
49 var div1=document.getElementsByClassName('classx');
50 console.log(div1);
51 // 4、H5新增的选择器，
52 // 例子：document.querySelector('div')
53 // id加#，类加.
54 var x=document.querySelector('#idx');
55 console.log(x);
56 var y=document.querySelector('.classx')
57 console.log(y);
58 // 获取所有li标签
59 var liz=document.querySelectorAll('li')
60 console.log(liz);
61
62 // 5、获取body元素
63 var body=document.body;
64 console.log(body);
65 // 6、获取html元素
66 var htmlx=document.documentElement;
67 console.log(htmlx);
68 </script>
69 </body>
70
71 </html>
二、事件
事件有三部分组成：事件源、事件类型、事件处理程序。- 事件源：事件被触发的对象、是谁；
- 事件类型：如何触发、什么事件（比如鼠标点击（onclick））；
- 事件处理程序：通过函数赋值方式 ；
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 </head>
9 <body>
10 <button id="s">显示当前的时间</button>
11 <div>隐藏</div>
12 <script>
13 // 1、事件源：通过获取ID获取事件源（谁被触发）
14 var btn = document.querySelector('#s');
15 // 2、通过鼠标点击（onclick），结果是赋值的方式
16 btn.onclick = function() {
17 alert('哟西！')
18 }
19 </script>
20 </body>
21 </html>
三、操作元素，修改属性
- innerText不识别HTML标签，不标准的形式，去掉空格和换行
- innerHTML识别HTML标签，W3W标准的形式，不去掉空格和换行
- .type、.src等等都可以进行修改，另外还有btn.disabled=true，可以让按钮失效；也可以this.disabled=true，this的指向是事件函数的调用者,
- 修改样式（.style.backgroupColor='pink'/.style.width='500px'）
- 显示或者隐藏图标.style.display='none'
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 <style>
10 .box {
11 background-color: pink;
12 width: 500px;
13 height: 500px;
14 }
15 </style>
16 </head>
17
18 <body>
19 <!-- 1、操作元素 -->
20 <button id="s">显示当前的时间</button>
21 <div>隐藏</div>
22
23 <!-- 2、区别 -->
24 <div>
25 <strong>xxx</strong>我爱你
26 </div>
27 <p>
28 我不爱你
29 <span>真的假的？</span>
30 </p>
31
32 <!-- 3、修改类型 -->
33 <button id="btny"></button>
34 <input type="text" id="inputx">
35
36 <!-- 4、 -->
37 <div class="box"></div>
38
39
40
41 <script>
42 // 1、操作元素
43 // innerText方法
44 // 第一种方式点击按钮显示时间
45 var divx = document.querySelector('div');
46 var btnx = document.getElementById('s');
47 btnx.onclick = function () {
48 divx.innerText = getDate();
49 }
50 function getDate() {
51 var date = new Date();
52 var year = date.getFullYear();
53 var month = date.getMonth() + 1;
54 var dates = date.getDate();
55 var day = date.getDay();
56 var hour = date.getHours();
57 var minute = date.getMinutes();
58 var second = date.getSeconds();
59 return year + '年' + month + '月' + dates + '日' + '星期' + day + ' ' + hour + '时' + minute + '分' + second + '秒';
60 }
61 // 第二种方式直接获取时间，不用点击按钮
62 var divy = document.querySelector('div');
63 divy.innerText = getDate();
64
65
66 // 2、两者区别
67 var divz = document.querySelector('div');
68 // innerText不识别HTML标签，不标准的形式，去掉空格和换行。
69 divz.innerText = '<strong>xxx</strong>我爱你';
70 // innerHTML识别HTML标签，W3W标准的形式，不去掉空格和换行。
71 divz.innerHTML = '<strong>xxx</strong>我爱你';
72 var p = document.querySelector('p');
73 console.log(p.innerHTML);
74 console.log(p.innerText);
75
76 // 3、修改类型，input的type，图片的src也是同样原理
77 var inputx = document.getElementById('inputx');
78 var btny = document.getElementById('btny');
79 // 做标记，改变flag值，进行切换，可以用于密码的显示与隐藏
80 var flag = 0;
81 btny.onclick = function () {
82 if (flag == 0) {
83 inputx.type = 'password';
84 flag = 1;
85 } else {
86 inputx.type = 'text';
87 flag = 0;
88 }
89 }
90
91 // 4、修改样式,JS修改style样式操作，产生的是行内样式，css权重比高
92 var diva = document.querySelector('.box');
93 diva.onclick = function () {
94 // this指向的是diva
95 this.style.width = '200px';
96 this.style.height = '200px';
97 // 用驼峰命名法
98 this.style.backgroundColor = 'red';
99 }
100
101 // 5、显示或者隐藏图标
102 // 可以直接调用.style.display='none';
103 </script>
104 </body>
105
106 </html>
这篇关于JavaScript——DOM（获取元素和操作元素）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-24Java中定时任务实现方式及源码剖析
- 2024-11-24Java中定时任务实现方式及源码剖析
- 2024-11-24鸿蒙原生开发手记：03-元服务开发全流程（开发元服务，只需要看这一篇文章）
- 2024-11-24细说敏捷：敏捷四会之每日站会
- 2024-11-23Springboot应用的多环境打包入门
- 2024-11-23Springboot应用的生产发布入门教程
- 2024-11-23Python编程入门指南
- 2024-11-23Java创业入门：从零开始的编程之旅
- 2024-11-23Java创业入门：新手必读的Java编程与创业指南
- 2024-11-23Java对接阿里云智能语音服务入门详解
