如题。
大多数情况下,操作文档对象模型,就是对html文档中的各个标签进行操作。
例,设置p标签内容为“早上好!”
html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p class="c1" id="p1">123</p> </body> </html> <script src="1.js"></script>
js:
1 x = document.querySelector("p"); 2 //x = document.querySelector(".c1"); 3 //x = document.querySelector("#p1"); 4 console.log(x.textContent); 5 x.textContent = "hi";
结果:控制台出现“123”,页面上出现“hi”。
常用操作:获得指定标签x,获得/设置x的内容,添加/删除标签(见另一篇博文)。
获得指定的标签:
传统方法--用getElementById方法,通过id获得。
较新方法--用querySelector方法,通过类似Css选择器的方式(标签、类、id)获得。
上例中,第2、3行和第1行等效。
获得/设置标签的内容:
标签的内容,大致分为三种。
1、标签内的文本内容,使用标签的“textContent“属性获得/设置。
2、标签内的html内容,使用标签的“innerHTML”属性获得/设置。
例:
html
<body> <p class="c1" id="p1"><span>123</span></p> </body>
js
console.log(document.querySelector("p").textContent); console.log(document.querySelector("p").innerHTML);
document.querySelector("p").innerHTML="1<br>2<br>3";
控制台显示内容:
123
<span>123</span>
页面显示内容为带换行的123。
3、对于input标签,应当用value属性获取/设置它的值。
例:html
<body> <input type="text" id="t1" value="初始值"> </body>
js
x=document.querySelector("#t1");
console.log(x.value);
x.value="设置值";
控制台出现“初始值”,页面出现“设置值”。效果自行查看。
如果想选出一堆特定控件,可以使用“document.querySelectorAll()”方法。该方法得到一个满足条件的控件数组。
例,对一个9*9的表格,依次填入自然数序列:
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script src="js/1.js"></script> 7 <link rel="stylesheet" href="css/1.css"> 8 </head> 9 <body onload="f1();"> 10 <table> 11 <tr><td></td><td></td><td></td></tr> 12 <tr><td></td><td></td><td></td></tr> 13 <tr><td></td><td></td><td></td></tr> 14 </table> 15 </body> 16 </html>
js
1 function f1() 2 { 3 let t=10; 4 let a=document.querySelectorAll("td"); 5 for(i=0;i<a.length;i++) 6 { 7 a[i].textContent=t++; 8 } 9 }
运行结果:
html的第9行,表示body装载完毕后运行函数f1。如果把f1的运行写在第6行,则运行的第6行的时候,表格(10-14行)还未加载,也就没有预期效果。
js第4行,获得一组(此处为9个)td标签。5-8行依次赋值。
小练习:简单计算器
利用js改变元素的css属性。
可以利用元素的style属性值去获取/改变它的css属性。需要注意:
1、凡是带”-“的css属性,一律把减号去掉,减号后面的字母大写。
2、这种方式仅对元素的行内css属性值有效,故通常仅用于设置。
例:点击按钮,实现红黄绿切换。
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script src="js/1.js"></script> 7 <!-- <link rel="stylesheet" href="css/1.css"> --> 8 </head> 9 <body> 10 <div style="text-align: center;margin-top: 20px;"> 11 <div id="d1" style="height: 300px; width: 300px;background-color: red;border-radius: 50%;margin: 0 auto;"> 12 </div> 13 <input type="button" value="变色" style="margin-top: 40px;" onclick="f1();"/> 14 </div> 15 </body> 16 </html>
其中,11-12行为一个红色的圆,点击13行的按钮,执行f1函数,获取和改变圆的”background-color“属性。
js
1 function f1() 2 { 3 let a=document.querySelector("#d1"); 4 let mycolor=a.style.backgroundColor; 5 console.log(mycolor); 6 if(mycolor=="red") 7 { 8 a.style.backgroundColor="yellow"; 9 } 10 else if(mycolor=="yellow") 11 { 12 a.style.backgroundColor="green"; 13 } 14 else 15 { 16 a.style.backgroundColor="red"; 17 } 18 }
运行效果
小练习:猜数字
js代码中常常用到的两个跟时间有关的函数:
1、setTimeout(参数1,参数2)。参数1是一个函数,参数2是一个时间(毫秒)。
表示间隔参数2时间后,执行参数1表示的函数。只执行一次。
例,请人吃饭,别人思考三秒后拒绝:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script src="js/1.js"></script> 7 <script> 8 function f1() 9 { 10 a=document.querySelector("input"); 11 //三秒后回复 12 setTimeout(f2,3000,a);//可以通过追加参数的方式传递引用 13 } 14 function f2(x) 15 { 16 alert("我不去"); 17 x.value="no"; 18 } 19 </script> 20 </head> 21 <body> 22 <input type="button" value="请你吃饭" onclick="f1()"/> 23 </body> 24 </html>
效果自行查看。
2、setInterval函数与setTimeout类似,表示每隔参数2的时间执行参数1,多次执行。函数运行会返回一个数字,可以用来标识它。
使用clearInterval(标识)可以停止反复执行。
例:
var intervalID = setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2'); function myCallback(a, b) { console.log(a); console.log(b); }
在html中,点击按钮
1 <input type="button" value="停止" onclick="clearInterval(intervalID);"/>
即可停止。
结果自行查看。
小练习:js倒计时