如题。
大多数情况下，操作文档对象模型，就是对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倒计时
