文档对象模型（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>
间接查找
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>
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>
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>
多行文本框
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>
下拉框
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>
单选框
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>
复选框
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>
表格
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>
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>密  码:</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>
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>
示例五:
开关灯测试
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>
示例五：
点赞
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>
事件
- 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>
示例七：文本框
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>
原文地址：https://www.cnblogs.com/yijiayan/p/12669575.html
时间： 2024-10-25 14:14:38