文檔對(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)簽的鏈接屬性href="http://idcbgp.cn"。
節(jié)點(diǎn)屬性:
遍歷節(jié)點(diǎn)樹:
以上圖ul為例,它的父級(jí)節(jié)點(diǎn)body,它的子節(jié)點(diǎn)3個(gè)li,它的兄弟結(jié)點(diǎn)h2、P。
DOM操作:
注意:前兩個(gè)是document方法。
在JavaScript入門篇中,對(duì)DOM進(jìn)行了基礎(chǔ)講解(http://idcbgp.cn/learn/36),我們通過任務(wù)來回顧下。
在右邊編輯器第11行補(bǔ)充代碼,通過getElementById獲取id為con的h2標(biāo)簽。
在右邊編輯第12行補(bǔ)充代碼,修改h2標(biāo)簽的樣式,將顏色設(shè)為紅色。
在右邊編輯器第13行補(bǔ)充代碼,修改h2標(biāo)簽的樣式,將背景顏色設(shè)為灰色(#CCC)。
在右邊編輯第14行補(bǔ)充代碼,通過style.display實(shí)現(xiàn)隱藏。
var mychar = document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor ="#ccc";
mychar.style.display="none";
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)