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>

二、事件

事件有三部分组成:事件源、事件类型、事件处理程序。
  1. 事件源:事件被触发的对象、是谁;
  2. 事件类型:如何触发、什么事件(比如鼠标点击(onclick));
  3. 事件处理程序:通过函数赋值方式  ;
 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>

三、操作元素,修改属性

  1.  innerText不识别HTML标签,不标准的形式,去掉空格和换行
  2. innerHTML识别HTML标签,W3W标准的形式,不去掉空格和换行
  3. .type、.src等等都可以进行修改,另外还有btn.disabled=true,可以让按钮失效;也可以this.disabled=true,this的指向是事件函数的调用者,
  4. 修改样式(.style.backgroupColor='pink'/.style.width='500px')
  5. 显示或者隐藏图标.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(获取元素和操作元素)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程