前端三贱客 -- JavaScript中的DOM元素

时间：2020-04-15 21:27:12 阅读：86 评论：0 收藏：0 [点我收藏+]

标签：元素 asd mode z-index clear 接口 user classname 下拉框

文档对象模型（Document Object Model，DOM）是一种用于HTML编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。DOM相当于是一个模块，提供了关于HTML文档中对标签进行操作的功能，JavaScript结合DOM可以对HTML中的标签进行操作。可以把DOM看做是一张映射表，记录着一堆用代码操控document时的规章制度，直白点说，就是js操作html时的API。

DOM选择器

DOM中提供了一系列的选择器用于在HTML文档中找到指定的相关标签对象。

直接查找

1 document.getElementById(arg)             // 根据ID获取一个标签对象
2 document.getElementsByClassName(arg)     // 根据class属性获取标签对象集合
3 document.getElementsByName(arg)          // 根据name属性值获取标签对象集合
4 document.getElementsByTagName(arg)       // 根据标签名获取标签对象集合

示例一：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Dom Test</title>
 5     <style type="text/css">
 6         .c1{
 7             background-color: red;
 8             width: 400px;
 9             height: 200px;
10         }
11         .c2{
12             font-size: 20px;
13             color: white;
14             text-align: center;
15             line-height: 200px;
16         }
17     </style>
18 </head>
19 <body>
20     <input type="text" name="username" id="id1" size="20"><br>
21     <input type="text" name="username" size="20"><br>
22     <input type="text" name="username" size="20"><br>
23     <div id="i2">this is a div</div>
24     <a href="">111</a>
25     <a href="">222</a>
26     <div class="c1 c2">Hello Kugou!</div>
27     <input type="button" onclick="func1()" value="点我getElementById">
28     <input type="button" onclick="func2()" value="点我getElementsByName">
29     <input type="button" onclick="func3()" value="点我change div value">
30     <input type="button" onclick="func4()" value="点我getElementsByTagName">
31     <input type="button" onclick="func5()" value="点我getElementsByClassName">
32     <script type="text/javascript">
33         function func1(){
34             var username_id = document.getElementById("id1");
35             console.log(username_id.value);
36             alert(username_id.value);
37         }
38         function func2(){
39             var username = document.getElementsByName("username");
40             for(var i=0;i < username.length;i++){
41                 console.log(username[i].value);
42                 alert(username[i].value)
43             }
44         }
45         function func3(){
46             var x = document.getElementById("i2");
47             x.innerText="Hello Kugou!";
48         }
49         function func4(){
50             /* body... */
51             var a_list=document.getElementsByTagName("a");
52             for (var i = 0;i<a_list.length;i++){
53                 var var1 = a_list[i].innerText;
54                 a_list[i].innerText=var1 + "AAA";
55             }
56         }
57         function func5(){
58             var var_sty = document.getElementsByClassName("c1");
59             console.log(var_sty);
60             var_sty[0].style.backgroundColor = ‘#00ff00‘;
61         }
62     </script>
63 </body>
64 </html>

View Code

间接查找

1 var tag = document.getElementById(arg);
2 tag.parentElement           // 找当前标签对象的父标签对象
3 tag.children                // 找当前标签对象的所有子标签对象
4 tag.firstElementChild       // 找当前标签对象的第一个子标签对象
5 tag.lastElementChild        // 找当前标签对象最后一个子标签对象
6 tag.nextElementtSibling     // 找当前标签对象下一个兄弟标签对象
7 tag.previousElementSibling  // 找当前标签对象上一个兄弟标签对象

示例二：

 1 <head>
 2     <title></title>
 3     <style type="text/css">
 4         table {
 5           /*   border: 1px solid; */
 6             border-collapse: collapse;
 7         }
 8 
 9         table th, table td{
10             border: 1px solid;
11             padding : 8px;
12         }
13         table th {
14             font-weight: bold;
15         }
16     </style>
17 </head>
18 <body>
19     <table>
20         <thead>
21             <tr>
22                 <th>主机ip</th>
23                 <th>端口号</th>
24                 <th>备注</th>
25                 <th>操作</th>
26             </tr>
27         </thead>
28         <tbody>
29             <tr>
30                 <td>1.1.1.1</td>
31                 <td>80</td>
32                 <td>web端口</td>
33                 <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
34             </tr>
35             <tr>
36                 <td>2.2.2.2</td>
37                 <td>3306</td>
38                 <td>MySQL端口</td>
39                 <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
40             </tr>
41             <tr>
42                 <td>2.2.2.2</td>
43                 <td>6379</td>
44                 <td>Redis端口</td>
45                 <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
46             </tr>
47         </tbody>
48     </table>
49     <script type="text/javascript">
50         function deleteRow(self){
51             var rowTr = self.parentElement.parentElement;
52             // alert(rowTr.value);
53             rowTr.remove();
54         }
55     </script>

View Code

DOM文本操作

对标签内部文本进行操作时，可以通过 innerText 和 innerHTML来进行。

innerText

标签对象.innerText，读取标签内容（仅文本）。
标签对象.innerText="武"，修改标签内容（仅文本）。

innerHTML

标签对象.innerHTML，读取标签内容（含标签）。
标签对象.innerText="<a href=‘#‘>武</a>"，修改标签内容（可标签、课文本）。

示例三

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         table {
 7             border-collapse: collapse;
 8         }
 9         table th, table td{
10             border: 1px solid;
11             padding: 8px;
12         }
13         table td{
14             font-size: 18px;
15         }
16         a{
17             text-decoration: none;
18         }
19         a:link {color:#FF0000;}    /* 未被访问的链接 */
20         a:visited {color:#00FF00;} /* 已被访问的链接 */
21         a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
22         a:active {color:#0000FF;}  /* 正在被点击的链接 */
23     </style>
24 </head>
25 <body>
26     <table>
27         <thead>
28             <tr>
29                 <th>ID</th>
30                 <th>网站链接</th>
31                 <th>网站介绍</th>
32                 <th>读取</th>
33             </tr>
34         </thead>
35         <tbody>
36             <tr>
37                 <td>1</td>
38                 <td><a href="https://www.kugou.com">酷狗</a></td>
39                 <td>Hello Kugou 就是歌多</td>
40                 <td>
41                     <input type="button" name="" value="读取网站innerText" onclick="readSite(this)">
42                     <input type="button" name="" value="读取完整innerHTML" onclick="readSummary(this)">
43                 </td>
44             </tr>
45         </tbody>
46     </table>
47     <script type="text/javascript">
48         function readSite(self){
49             var inner_text_01 = self.parentElement.previousElementSibling.previousElementSibling;
50             alert(inner_text_01.innerText);
51             inner_text_01.innerText="百度";
52             var inner_text_02 = self.parentElement.previousElementSibling;        
53             alert(inner_text_02.innerText)
54             inner_text_02.innerText=‘百度一下 你就知道‘        
55         }
56         function readSummary(self){
57             var inner_HTML = self.parentElement.previousElementSibling.previousElementSibling;
58             alert(inner_HTML.innerHTML)
59             inner_HTML.innerHTML="<a href=\"https://www.baidu.com\">百度</a>" 
60         }
61     </script>
62 </body>
63 </html>

View Code

DOM值操作

文本框

1 <body>
2     <input type="text" name="username" value="请输入用户名XXX" id="user">
3     <script type="text/javascript">
4         var username = document.getElementById("user")
5         console.log("获取文本框值",username.value)
6         username.value = "nuanhuang"
7         console.log("更新文本框值",username.value)
8     </script>
9 </body>

View Code

多行文本框

 1 <h3>个人简介</h3>
 2 <textarea id="article" cols="30" rows="10">不以物喜,不以己悲,先天下之忧而忧,后天下之乐而乐
 3 </textarea><br>
 4 <input type="button" value="获取" onclick="get()">
 5 <input type="button" value="更新" onclick="update()">
 6 <script type="text/javascript">
 7     function get() {
 8         // body...
 9         var contents = document.getElementById("article")
10         alert(contents.value) 
11     }
12     function update() {
13         var contents = document.getElementById("article")
14         contents.value = "瞎扯淡"
15     }
16 </script>

View Code

下拉框

 1     <h3>居住地</h3>
 2     <select id="city" >
 3         <option value="0">北京</option>
 4         <option value="1">上海</option>
 5         <option value="2" selected="selected">广州</option>
 6         <option value="3">深圳</option>
 7     </select>
 8     <input type="button" value="获取居住地" onclick="getCity()">
 9     <input type="button" value="更新" onclick="updateCity()">
10     <script type="text/javascript">
11         function getCity() {
12             // body...
13             var city = document.getElementById("city")
14             switch (city.value) {
15                 case "0":
16                     alert(‘北京‘)
17                     break;
18                 case "1":
19                     alert(‘上海‘)
20                     break;
21                 case "2":
22                     alert(‘广州‘)
23                     break;
24                 case "3":
25                     alert(‘深圳‘)
26                     break;
27                 default:
28                     // statements_def
29                     alert(‘未知城市‘)
30                     break;
31             }
32         }
33         function updateCity() {
34             var city = document.getElementById("city")
35             city.value = 0
36         }
37     </script>

View Code

单选框

 1 <h3>性别</h3>
 2 <input type="radio" name="gender" checked="checked" value=0>男
 3 <input type="radio" name="gender" value=1>女
 4 <br>
 5 <input type="button" value="显示值" onclick="getGender()">
 6 <input type="button" value="更新值" onclick="updateGender()">
 7 <script type="text/javascript">
 8     function getGender(){
 9         var gender = document.getElementsByName("gender")
10         for(var i = 0;i < gender.length;i++){
11             if(gender[i].checked){
12                 alert(gender[i].value);
13             }
14         }
15     }
16     function updateGender(){
17         var gender = document.getElementsByName("gender")
18         for(var i = 0;i < gender.length;i++){
19             if(gender[i].value == "1"){
20                 alert(‘xxx‘)
21                 gender[i].checked = true;
22             }
23         }
24     }
25 </script>

View Code

复选框

 1 <h3>爱好</h3>
 2 <input type="checkbox" class="favi" value="0">篮球 
 3 <input type="checkbox" class="favi" value="1">足球
 4 <input type="checkbox" class="favi" value="2">羽毛球
 5 <input type="checkbox" class="favi" value="3">乒乓球
 6 <br>
 7 <input type="button" value="显示值" onclick="getFavi()">
 8 <input type="button" value="反选" onclick="updateFavi()">
 9 <script type="text/javascript">
10     function getFavi(){
11         var valueList = []
12         var faviList = document.getElementsByClassName("favi")
13         for(var i=0;i<faviList.length;i++){
14             if(faviList[i].checked){
15                 valueList.push(faviList[i].value)
16             }
17         }
18         console.log(valueList)
19         alert(valueList)
20     }
21     function updateFavi(){
22         var faviList = document.getElementsByClassName("favi")
23         for(var i=0;i<faviList.length;i++){
24             if(faviList[i].checked){
25                 faviList[i].checked = false;
26             }else {
27                 faviList[i].checked = true;
28             }
29         }
30     }
31 </script>

View Code

表格

 1 <table>
 2     <thead>
 3         <tr>
 4             <th>选择</th>
 5             <th>姓名</th>
 6             <th>年龄</th>
 7         </tr>
 8     </thead>
 9     <tbody id="tb">
10         <tr>
11             <td><input type="checkbox" value="0"></td>
12             <td>李白</td>
13             <td>18</td>
14         </tr>
15         <tr>
16             <td><input type="checkbox" value="1"></td>
17             <td>杜甫</td>
18             <td>20</td>
19         </tr>
20         <tr>
21             <td><input type="checkbox" value="2"></td>
22             <td>王维</td>
23             <td>21</td>
24         </tr>
25     </tbody>
26 </table><br>
27 <input type="button" value="全选" onclick="checkAll()">
28 <input type="button" value="取消" onclick="cancelAll()">
29 <input type="button" value="反选" onclick="checkReverse()">
30 <script type="text/javascript">
31     function checkAll(){
32         var trResList = document.getElementById("tb").children;
33         for(var i = 0;i< trResList.length;i++){
34             var trTag = trResList[i];
35             trTag.firstElementChild.firstElementChild.checked = true;
36         }
37     }
38     function cancelAll(){
39         var trResList = document.getElementById("tb").children;
40         for(var i = 0;i<trResList.length;i++){
41             var trTag = trResList[i];
42             trTag.firstElementChild.firstElementChild.checked = false;
43         }
44     }
45     function checkReverse(){
46         // alert("xxx")
47         var trResList = document.getElementById("tb").children;
48         for(var i=0;i<trResList.length;i++){
49             var trTag = trResList[i];
50             var inputTagRes = trTag.firstElementChild.firstElementChild;
51             if(inputTagRes.checked){
52                 inputTagRes.checked = false;
53             }else{
54                 inputTagRes.checked = true;
55             }
56         }
57     }
58 </script>

View Code

CLASS属性

标签对象.className，class属性对应的值直接操作。
标签对象.classList.remove(cls)，class属性对应值删除某个样式。
标签对象.classList.add(cls)，class属性中添加样式。

示例三：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title></title>
  5     <style type="text/css">
  6         body{
  7             margin: 0 auto;
  8         }
  9         .header{
 10             height: 38px;
 11             background-color: #499ef3;
 12             position: fixed;top:0;right:0;left:0;
 13         }
 14         .header .menu{
 15             width: 960px;
 16             margin: 0 auto;
 17             height: 38px;
 18         /*     background-color: red; */
 19         }
 20         .header .menu .left_menu{
 21             float: left;
 22             line-height: 38px;
 23         }
 24         .header .menu .left_menu img{
 25             width: 38px;
 26             height: 38px;
 27             border-radius: 50%;
 28         }
 29         .header .menu .right_menu{
 30             float: right;
 31             line-height: 38px;
 32         }
 33         .header .menu .right_menu a{
 34             text-decoration: none;
 35             display: inline-block;
 36             line-height: 38px;
 37             padding: 0 3px;
 38             color: red;
 39         }
 40         .header .menu .right_menu a:hover{
 41             background-color: #dddddd;
 42         }
 43         .content{
 44             width: 960px;
 45             margin: auto;
 46             margin-top: 38px;
 47             word-wrap:break-word;  
 48             word-break:break-all;  
 49             overflow: hidden; 
 50         }
 51         .content p{
 52             word-wrap:break-word;  
 53             word-break:break-all;  
 54             overflow: hidden; 
 55         }
 56         .zhezhao{
 57             position: fixed;top: 0;right: 0;bottom: 0;left: 0;
 58             background-color: gray;
 59             opacity: 0.5;
 60             z-index: 1;
 61         }
 62         .login{
 63             width: 500px;
 64             height: 300px;
 65             position: fixed;
 66             top: 50%;
 67             left: 50%;
 68             margin-left: -250px;
 69             margin-top: -150px;
 70             background-color: yellow;
 71             z-index: 2;
 72         }
 73         .login .input_sty{
 74             text-align: center;
 75             margin-top: 100px;
 76         }
 77         .login .input_sty p{
 78             display: inline;
 79         }
 80         .hide{
 81             display: none;
 82         }
 83 
 84     </style>
 85 </head>
 86 <body>
 87     <div class="header">
 88         <div class="menu">
 89             <div class="left_menu">
 90                 <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2563547461,1954620067&fm=26&gp=0.jpg">
 91             </div>
 92             <div class="right_menu">
 93                 <a onclick="login()">登录</a>
 94                 <a href="">注册</a>
 95                 <a href="">收藏</a>
 96             </div>
 97         </div>
 98     </div>
 99     <div id="zhezhao_id" class="zhezhao hide"></div>
100     <div id="login_id" class="login hide">
101         <div class="input_sty">
102             <p>用户名:</p><input type="text" name="" value="请输入用户名:">
103             <br><br>
104             <p>密&nbsp;&nbsp;&nbsp码:</p><input type="password" name="" value="">
105             <br><br>
106             <input type="button" name="" value="登录">
107             <input type="button" name="" value="重置">
108             <input type="button" name="" value="返回" onclick="goBack()">
109         </div>
110     </div>
111     <div class="content">
112         <p>dsfasfasadfasfasfasdfasdfasdfasdfasdfasdfsadfasfasfasadfasfasfasdfasdfasdfasdfasdfasdfsadfasfasfasadfasfasfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfasdfasdfasdfasdfsasdfasdfasdfasdfasdfasdf</p>
113     </div>
114     <script type="text/javascript">
115         function login(){
116             // alert("xxxx")
117             document.getElementById("zhezhao_id").classList.remove("hide");
118             document.getElementById("login_id").classList.remove("hide");
119         }
120         function goBack(){
121             document.getElementById("zhezhao_id").classList.add("hide");
122             document.getElementById("login_id").classList.add("hide");
123         }
124     </script>
125 </body>
126 </html>

View Code

Style样式操作

如果想要对样式操作的粒度更细一些，可以使用style样式操作，他比class属性对样式的操作粒度更细。

示例四：

更换标题颜色

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         body {margin: 0 auto;}
 7         .header {
 8             height: 38px;
 9             background-color: #dde369;
10             text-align: center;
11             line-height: 38px;
12         }
13     </style>
14 </head>
15 <body>
16     <div id="header-id" class="header">且行且歌，行稳致远。</div>
17     <input type="button" name="" value="换肤" onclick="change()">
18     <script type="text/javascript">
19         function change() {
20             // body... 
21             document.getElementById("header-id").style.backgroundColor = "#a1648d";
22         }
23     </script>
24 </body>
25 </html>

View Code

示例五:

开关灯测试

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JavaScript学习</title>
 6     <style type="text/css">
 7         .body{
 8             position: fixed;
 9             top: 0;left: 0;bottom: 0;right: 0;
10             background-color: white;
11             z-index: 1;
12         }
13         input{
14             position: fixed;
15             top: 50%;right: 50%;
16             width: 80px;
17             height: 80px;
18             background-color: #854243;
19             z-index: 2;
20             color: white;
21             font-size: 20px;
22         }
23     </style>
24 </head>
25 <body>
26     <div id="i1" class="body">开关灯测试</div>
27     <div class="menu">
28         <input id="i2" type="button" onclick="guandeng()" name="" value="关灯">
29     </div>
30     <script type="text/javascript">
31         function guandeng(){
32             if(document.getElementById("i1").style.backgroundColor  != "gray"){
33                 document.getElementById("i1").style.backgroundColor = "gray";
34                 document.getElementById("i2").value="开灯";
35                 document.getElementById("i2").style.backgroundColor = ‘#12ddaa‘;
36             }else {
37                 document.getElementById("i1").style.backgroundColor = "white";
38                 document.getElementById("i2").value="关灯";
39                 document.getElementById("i2").style.backgroundColor = ‘#854243‘;
40             }
41             // text.innerText="xxxx";
42         }
43     </script>
44 </body>
45 </html>

View Code

示例五：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         body{
 7             margin: 0 auto;
 8         }
 9         .container{
10             width: 800px;
11             height: 200px;
12             border: 1px solid #dddddd;
13             margin: auto;
14             margin-top: 20px;
15         }
16         .container .title{
17             font-size: 20px;
18             font-weight: bold;
19             margin: 5px;
20         }
21         .container img{
22             margin: 5px;
23             width: 120px;
24             height: 120px;
25         }
26         .container .item{
27             font-size: 18px;
28             margin-left:  5px;
29             color: green;
30             /* 指定鼠标的类型 */
31             cursor: pointer;
32             position: relative;
33         }
34     </style>
35 </head>
36 <body>
37     <div class="container">
38         <div class="title">hello kugou！</div>
39         <div><img src="https://imgessl.kugou.com/custom/150/20200106/20200106143601439455.jpg"></div>
40         <div class="item" onclick="doFavor(this)">点赞</div>
41     </div>
42     <div class="container">
43         <div class="title">就是歌多！</div>
44         <div><img src="https://imgessl.kugou.com/custom/150/20200103/20200103091738993254.jpg"></div>
45         <div class="item" onclick="doFavor(this)">点赞</div>
46     </div>
47     <script type="text/javascript">
48         function  doFavor(self) {
49             var plusTag = document.createElement(‘span‘);
50             var fontSize = 10;
51             var marginLeft = 10;
52             var marginTop = 10;
53             var opacity = 1;
54             plusTag.innerText = "+1";
55             plusTag.style.color = ‘green‘;
56             plusTag.style.position = ‘absolute‘;
57             plusTag.style.fontSize = fontSize + ‘px‘;
58             plusTag.style.marginLeft = marginLeft + ‘px‘;
59             plusTag.style.marginTop = marginTop + ‘px‘;
60             plusTag.style.opacity = opacity;
61             self.appendChild(plusTag);
62             var interval = setInterval(function () {
63                 fontSize += 3;
64                 marginLeft += 5;
65                 marginTop -= 5;
66                 opacity -= 0.2;
67                 plusTag.style.fontSize = fontSize + ‘px‘;
68                 plusTag.style.marginLeft = marginLeft + ‘px‘;
69                 plusTag.style.marginTop = marginTop + ‘px‘;
70                 plusTag.style.opacity = opacity;
71                 if (opacity <= 0) {
72                     self.removeChild(plusTag);
73                     clearInterval(interval);
74                 }
75             }, 100)
76         }
77     </script>
78 </body>
79 </html>

View Code

事件

onclick 单击时触发事件
ondblclick 双击触发事件
onchange 内容修改时触发事件
onfocus 获取焦点时触发事件
onblur 失去焦点触发事件

示例六：菜单栏

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         body{
 7             margin: auto;
 8         }
 9         .pg-header{
10             height: 38px;
11             background-color: #499ef3;
12             text-align: center;
13             line-height: 38px;
14             font-size: 28px;
15             color: blue;
16             font-weight: bold;
17         }
18         .menu{
19             position: fixed;
20             width: 220px;
21             left: 0;top: 38px;bottom: 0;
22             /* background-color: gray;
23             opacity: 0.5; */
24             overflow: scroll;
25 
26         }
27         .content{
28             position: fixed;
29             top: 38px;right: 0;bottom: 0;left: 220px;
30             background-color: orange;
31             overflow: scroll;
32         }
33         .menu .title{
34             height: 28px;
35             background-color: #5f4687;
36             color: white;
37             line-height: 28px;
38             font-size: 16px;
39             padding: 8px;
40             border-bottom: 1px solid #dddddd;
41             /* border-right: 1px solid #dddddd; */
42         }
43         .menu .child{
44             /* display: block; */
45             /* background-color: yellow; */
46             border-bottom: 1px solid #dddddd;
47         }
48         .menu .child a{
49             display: block;
50             text-decoration: none;
51             padding: 5px 10px;
52             color: black;
53             z-index: 10;
54         }
55         .menu .child a:hover{
56             background-color: #dddddd;
57         }
58         .hide {
59             display: none;
60         }
61     </style>
62 </head>
63 <body>
64     <div class="pg-header">东方好莱坞</div>
65     <div class="menu">
66         <div class="title" onclick="showMenu(this)">国产电影</div>
67             <div class="child">
68                 <a href="#">我不是药神</a>
69                 <a href="#">我和我的祖国</a>
70                 <a href="#">中国机长</a>
71             </div>
72         
73         <div class="title" onclick="showMenu(this)">日韩电影</div>
74             <div class="child  hide">
75                 <a href="">我的野蛮女友</a>
76                 <a href="">素媛</a>
77                 <a href="">熔炉</a>
78             </div>
79 
80         <div class="title" onclick="showMenu(this)">欧美电影</div>
81             <div class="child hide">
82                 <a href="">肖申克的救赎</a>
83                 <a href="">飞跃疯人院</a>
84                 <a href="">阿甘正传</a>
85             </div>
86     </div>
87     <div class="content">xxxx</div>
88     <script type="text/javascript">
89         function showMenu(self){
90             // body...
91             var childList = document.getElementsByClassName(‘child‘);
92             for(var i=0;i< childList.length;i++){
93                 childList[i].classList.add("hide")
94             }
95             self.nextElementSibling.classList.remove(‘hide‘)
96         }
97     </script>
98 </body>
99 </html>

View Code

示例七：文本框

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset=‘utf-8‘/>
 5     <title>DOM</title>
 6     <style>
 7         .gray {
 8             color: gray;
 9         }
10         .red {
11             color: red;
12         }
13     </style>
14 </head>
15 <body>
16 <input type=‘text‘ class=‘gray‘ value=‘请输入关键字‘ onfocus=‘getFocus(this);‘ onblur=‘leave(this);‘/>
17 <script type="text/javascript">
18     function getFocus(self) {
19         self.className = ‘red‘;
20         if (self.value === ‘请输入关键字‘ || self.value.trim().length === 0) {
21             self.value = ‘‘;
22         }
23     }
24     function leave(self) {
25         if (self.value.length === 0) {
26             self.value = ‘请输入关键字‘;
27             self.className = ‘gray‘;
28         } else {
29             self.className = ‘red‘;
30         }
31     }
32 </script>
33 </body>
34 </html>

View Code

前端三贱客 -- JavaScript中的DOM元素

标签：元素 asd mode z-index clear 接口 user classname 下拉框

原文地址：https://www.cnblogs.com/yijiayan/p/12669575.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行