1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>認(rèn)識DOM</title> 6 </head> 7 <body> 8 <h2> 9 <a href="https://www.baidu.com">DOM操作</a> 10 </h2> 11 <p>如何用JavaScript去操作HTML元素和CSS樣式,實(shí)現(xiàn)簡單的動態(tài)操作</p> 12 <ul title="歲寒知松柏"> 13 <li>群陰彫品物,松柏尚桓桓。</li> 14 <li>老去惟心在,相依到歲寒。</li> 15 <li>霜嚴(yán)御史府,雨立大夫官。</li> 16 <li>犧象溝中斷,徽弦爨下殘。</li> 17 <li>光陰一鳥過,翦伐萬牛難。</li> 18 <li>春日輝桃李,蒼顏亦預(yù)觀。</li> 19 </ul> 20 </body> 21 </html> 如何用JavaScript去操作HTML元素和CSS樣式,實(shí)現(xiàn)簡單的動態(tài)操作?可以通過DOM操作,文檔對象模型DOM(Document Object Model)定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)(節(jié)點(diǎn)樹),DOM百度百科 如上代碼所示,是為一個DOM樹狀結(jié)構(gòu)html代碼,將HTML代碼分解為DOM節(jié)點(diǎn)層次圖為: HTML文檔可以說由節(jié)點(diǎn)構(gòu)成的集合,三種常見的DOM節(jié)點(diǎn):
1 <a href="https://www.baidu.com">DOM操作</a> 2 <!--<a >屬性節(jié)點(diǎn)--> 3 <!--"DOM操作"是為文本節(jié)點(diǎn)--> |
|