1.DOM定义
DOM： Document Object Model（文档对象模型）
利用document机制。
2.DOM操作HTML
2.1通过 id 查找 HTML 元素
<!DOCTYPE html>
<html>
<body>
<h1>通过 id 查找 HTML 元素</h1>
<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementsById</b> 方法。</p>
<p id="demo"></p>
<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"来自 intro 段落的文本是：" + myElement.innerHTML;
</script>
</body>
</html>
2.2通过标签名查找 HTML 元素（从0开始）
<!DOCTYPE html>
<html>
<body>
<h1>通过标签名查找 HTML 元素</h1>
<p>Hello World!</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'第一段中的文本 (index 0) 是：' + x[0].innerHTML;
</script>
</body>
</html>
2.3通过类名查找 HTML 元素
<!DOCTYPE html>
<html>
<body>
<h1>通过类名查找 HTML 元素</h1>
<p>Hello World!</p>
<p class="intro">DOM 很有用。</p>
<p class="intro">本例演示 <b>getElementsByClassName</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 'class ="intro" 的第一段（索引 0）：' + x[0].innerHTML;
</script>
</body>
</html>
2.4通过 CSS 选择器查找 HTML 元素（用的不多）
<!DOCTYPE html>
<html>
<body>
<h1>按查询选择器查找 HTML 元素</h1>
<p>Hello World!</p>
<p class="intro">DOM 很有用。</p>
<p class="intro">本例演示 <b>querySelectorAll</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'class ="intro" 的第一段（索引 0）：' + x[0].innerHTML;
</script>
</body>
</html>
document.querySelectorAll
3.DOM操作CSS
3.1 style.color
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">我的标题</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
单击我！</button>
</body>
</html>
3.2 style.visibility
<!DOCTYPE html>
<html>
<body>
<p id="p1">
这是文本。
这是文本。
这是文本。
这是文本。
</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'">
</body>
</html>
4.功能：隔行换色（重点）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" width="500" height="200">
<tr><td>d</td><td>3</td><td>2</td><td>r</td></tr>
<tr><td>1</td><td>323</td><td>f</td><td>11</td></tr>
<tr><td>2</td><td>434</td><td>a</td><td>22</td></tr>
<tr><td>3</td><td>464</td><td>d</td><td>33</td></tr>
<tr><td>4</td><td>5757</td><td>s</td><td>44</td></tr>
</table>
<script type="text/javascript">
var trs = document.getElementsByTagName("tr");
for(var i =0;i<trs.length;i++){
if(i%2==0){
trs[i].style.background="red";
}
}
</script>
//建议放下面
</body>
</html>
----2021.10.06