一、介紹
這節(jié)課呢，我們來了解的是JavaScript HTML DOM
通過 HTML DOM(文檔對象模型)，可訪問 JavaScript HTML 文檔的所有元素。
DOM 全稱是 Document Object Model，也就是文檔對象模型。是針對XML的基于樹的API。描述了處理網(wǎng)頁內(nèi)容的方法和接口，是HTML和XML的API，DOM把整個頁面規(guī)劃成由節(jié)點(diǎn)層級構(gòu)成的文檔。
這個DOM定義了一個HTMLDocument和HTMLElement做為這種實(shí)現(xiàn)的基礎(chǔ),就是說為了能以編程的方法操作這個 HTML 的內(nèi)容（比如添加某些元素、修改元素的內(nèi)容、刪除某些元素），我們把這個 HTML 看做一個對象樹（DOM樹），它本身和里面的所有東西比如 <div></div> 這些標(biāo)簽都看做一個對象，每個對象都叫做一個節(jié)點(diǎn)（node），節(jié)點(diǎn)可以理解為 DOM 中所有 Object 的父類。
DOM 有什么用？就是為了操作 HTML 中的元素，比如說我們要通過 JS 把這個網(wǎng)頁的標(biāo)題改了，直接這樣就可以了：
document.title = 'how to make love';
這個 API 使得在網(wǎng)頁被下載到瀏覽器之后改變網(wǎng)頁的內(nèi)容成為可能。
HTML DOM 允許 JavaScript 改變 HTML 元素的內(nèi)容。
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。
在接下來的學(xué)習(xí)中，您將學(xué)到：
如何改變 HTML 元素的內(nèi)容 (innerHTML)
如何改變 HTML 元素的樣式 (CSS)
如何對 HTML DOM 事件做出反應(yīng)
如何添加或刪除 HTML 元素
二、知識點(diǎn)介紹
1、HTML DOM
2、查找HTML元素
3、改變HTML輸出流
4、改變HTML內(nèi)容
5、改變HTML屬性
6、改變HTML樣式
7、使用事件
三、上課對應(yīng)視頻的說明文檔
1、HTML DOM (文檔對象模型)
當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構(gòu)造為對象的樹：
HTML DOM 樹
通過可編程的對象模型，JavaScript 獲得了足夠的能力來創(chuàng)建動態(tài)的 HTML。
JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)
2、查找 HTML 元素
通常，通過 JavaScript，您需要操作 HTML 元素。
為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：
通過 id 找到 HTML 元素
通過標(biāo)簽名找到 HTML 元素
通過類名找到 HTML 元素
2.1、通過 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最簡單的方法，是通過使用元素的 id。
本例查找 id="intro" 元素：
實(shí)例
var x=document.getElementById("intro");
如果找到該元素，則該方法將以對象（在 x 中）的形式返回該元素。
如果未找到該元素，則 x 將包含 null。
2.2、通過標(biāo)簽名查找 HTML 元素
本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：
實(shí)例
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
2.3、通過類名找到 HTML 元素
本例通過 getElementsByClassName 函數(shù)來查找 class="intro" 的元素：
實(shí)例
var x=document.getElementsByClassName("intro");
3、改變 HTML 輸出流
JavaScript 能夠創(chuàng)建動態(tài)的 HTML 內(nèi)容：
今天的日期是： Wed Sep 19 2018 17:29:47 GMT+0800
在 JavaScript 中，document.write() 可用于直接向 HTML 輸出流寫內(nèi)容。
實(shí)例
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
絕對不要在文檔(DOM)加載完成之后使用 document.write()。這會覆蓋該文檔。
4、改變HTML內(nèi)容
修改 HTML 內(nèi)容的最簡單的方法是使用 innerHTML 屬性。
如需改變 HTML 元素的內(nèi)容，請使用這個語法：
document.getElementById(id).innerHTML=新的 HTML
本例改變了 <p>元素的內(nèi)容：
實(shí)例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
本例改變了<h1>元素的內(nèi)容：
實(shí)例
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新標(biāo)題";
</script>
</body>
</html>
實(shí)例講解：
?上面的 HTML 文檔含有 id="header" 的 <h1> 元素
?我們使用 HTML DOM 來獲得 id="header" 的元素
?JavaScript 更改此元素的內(nèi)容 (innerHTML)
5、改變 HTML 屬性
如需改變 HTML 元素的屬性，請使用這個語法：
document.getElementById(id).attribute=新屬性值
本例改變了 <img> 元素的 src 屬性：
實(shí)例
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
實(shí)例講解：
?上面的 HTML 文檔含有 id="image" 的 <img> 元素
?我們使用 HTML DOM 來獲得 id="image" 的元素
?JavaScript 更改此元素的屬性（把 "smiley.gif" 改為 "landscape.jpg"）
6、改變 HTML 樣式
如需改變 HTML 元素的樣式，請使用這個語法：
document.getElementById(id).style.property=新樣式
下面的例子會改變 <p> 元素的樣式：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通過腳本修改。</p>
</body>
</html>
7、使用事件
HTML DOM 允許我們通過觸發(fā)事件來執(zhí)行代碼。
比如以下事件：
?元素被點(diǎn)擊。
?頁面加載完成。
?輸入框被修改。
?……
在接下來的章節(jié)，你會學(xué)到更多關(guān)于事件的知識。
本例改變了 id="id1" 的 HTML 元素的樣式，當(dāng)用戶點(diǎn)擊按鈕時：
實(shí)例
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">我的標(biāo)題 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
點(diǎn)我!</button>
</body>
</html>
7.1、使用事件顯示和隱藏
<script type="text/javascript">
function yin(){
//document.getElementById("m2").style.visibility="hidden";
if(document.getElementById("m2").style.display=="none"){
document.getElementById("m2").style.display="";
}else{
document.getElementById("m2").style.display="none";
}
}
function chu(){
//document.getElementById("m2").style.visibility="visible";
document.getElementById("m2").style.display="";
}
</script>
<img src="image/1.jpg"? id="m1"/>
<img src="image/2.jpg"? id="m2"/>
<img src="image/3.jpg"? id="m3"/>
<input type="button" value="變化" onclick="yin()"/>
<input type="button" value="顯示" onclick="chu()"/>
7.2、圖片的替換
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
float:left;
}
#b1{
width:1066px;
height:708px;
background-image:url(290009.jpg);
}
#b2{
width:1066px;
height:708px;
background-image:url(290053.jpg);
display:none;
}
</style>
<script type="text/javascript">
function yin(){
document.getElementById("b1").style.display="none";
document.getElementById("b2").style.display="none";
}
function xian2(){
yin();
document.getElementById("b2").style.display="block";
}
function xian1(){
yin();
document.getElementById("b1").style.display="block";
}
</script>
</head>
<body>
<div id="b1" onclick="xian2()"></div>
<div id="b2" onclick="xian1()"></div>
</body>
</html>
7.3、全選和反選
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function quan(qs){
var cks=document.getElementsByName("hobby");
//if(document.getElementById("qs").checked){
//if(qs.checked){
for(var i=0;i<cks.length;i++){?
cks[i].checked=qs.checked;?
}
//}
/*else{
for(var i=0;i<cks.length;i++){?
cks[i].checked=false;? ?
}
}*/
}
function fan(){
var cks=document.getElementsByName("hobby");
for(var i=0;i<cks.length;i++){?
cks[i].checked=!(cks[i].checked);? ?
}?
}
</script>
</head>
<body>
<input type="checkbox" onclick="quan(this)" id="qs"/>
全選<br />
<input type="checkbox" name="hobby"/>
足球<br />
<input type="checkbox" name="hobby"/>
籃球<br />
<input type="checkbox" name="hobby"/>
臺球<br />
<input type="checkbox" name="hobby"/>
乒乓球<br />
<input type="checkbox" name="hobby"/>
射箭<br />
<input type="checkbox" name="hobby"/>
網(wǎng)球<br />
<input type="button" value="反選" onclick="fan()">
</body>
</html>
