JavaScript——DOM（获取元素和操作元素）

2022-07-13 23:31:15 阅读：156 来源： 互联网

标签：JavaScript console log DOM 元素 li querySelector var document

一、获取元素的几种方法

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,console,log,DOM,元素,li,querySelector,var,document
来源： https://www.cnblogs.com/dapangblog/p/16474310.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript——DOM（获取元素和操作元素）

一、获取元素的几种方法

二、事件

三、操作元素，修改属性