1辉饱、認(rèn)識(shí)DOM
文檔對(duì)象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM?將HTML文檔呈現(xiàn)為帶有元素拣展、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）彭沼。
將HTML代碼分解為DOM節(jié)點(diǎn)層次圖:
HTML文檔可以說由節(jié)點(diǎn)構(gòu)成的集合，三種常見的DOM節(jié)點(diǎn):
1. 元素節(jié)點(diǎn)：上圖中<html><body><p>等都是元素節(jié)點(diǎn)备埃，即標(biāo)簽姓惑。
2. 文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如<li>....</li>中的JavaScript瓜喇、DOM挺益、CSS等文本。
3. 屬性節(jié)點(diǎn):元素屬性乘寒，如<a>標(biāo)簽的鏈接屬性望众。
看下面代碼:
<a >Javascript DOM</a>
2、通過id獲取元素并了解innerHTML屬性
學(xué)過HTML/CSS樣式，都知道烂翰，網(wǎng)頁由標(biāo)簽將信息組織起來夯缺，而標(biāo)簽的id屬性值是唯一的，就像是每人有一個(gè)身份證號(hào)一樣甘耿，只要通過身份證號(hào)就可以找到相對(duì)應(yīng)的人踊兜。那么在網(wǎng)頁中，我們通過id先找到標(biāo)簽佳恬，然后進(jìn)行操作捏境。
語法:
document.getElementById(“id”)
如果是下邊的代碼
結(jié)果會(huì)出現(xiàn)null或[object HTMLParagraphElement]。因?yàn)檩敵龅淖兞坎⑽传@取到HTML中<p>標(biāo)簽中的內(nèi)容毁葱。
innerHTML 屬性
innerHTML 屬性用于獲取或替換 HTML 元素的內(nèi)容垫言。
語法:
Object.innerHTML
注意:
1.Object是獲取的元素對(duì)象，如通過document.getElementById("ID")獲取的元素倾剿。
2.注意書寫筷频，innerHTML區(qū)分大小寫。
我們通過id="con"來獲取<p>元素的內(nèi)容前痘，并將元素的內(nèi)容輸出和改變?cè)氐膬?nèi)容凛捏。代碼：
結(jié)果：
3、改變HTML樣式
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式芹缔。如何改變 HTML 元素的樣式呢坯癣？
語法:
Object.style.property=new style;
注意:Object是獲取的元素對(duì)象，如通過document.getElementById("id")獲取的元素乖菱。
看看下面的代碼:
改變<p>元素的樣式坡锡，將顏色改為紅色，字號(hào)改為20,背景顏色改為藍(lán)：
<p id="pcon">Hello World</p>
<script>
var mychar=document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20px";
mychar.style.backgroundColor="blue";
</script>
結(jié)果：
4窒所、顯示和隱藏鹉勒。（display屬性）
網(wǎng)頁中經(jīng)常會(huì)看到顯示和隱藏的效果，可通過display屬性來設(shè)置吵取。
語法：
Object.style.display= value
注意:Object是獲取的元素對(duì)象禽额，如通過document.getElementById("id")獲取的元素。
value取值：
5皮官、控制類名（className 屬性）
className 屬性設(shè)置或返回元素的class 屬性脯倒。
語法：
object.className = classname
作用:
1.獲取元素的class 屬性
2. 為網(wǎng)頁內(nèi)的某個(gè)元素指定一個(gè)css樣式來更改該元素的外觀
看看下面代碼，獲得<p>元素的 class 屬性和改變className：
結(jié)果：
