电竞比分网-中国电竞赛事及体育赛事平台

分享

了解文檔對象模型DOM(Document Object Model)

 Coder編程 2021-11-13
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>認識DOM</title>
 6     </head>
 7     <body>
 8         <h2>
 9             <a href="https://www.baidu.com">DOM操作</a>
10         </h2>
11         <p>如何用JavaScript去操作HTML元素和CSS樣式,實現(xiàn)簡單的動態(tài)操作</p>
12         <ul title="歲寒知松柏">
13             <li>群陰彫品物,松柏尚桓桓。</li>
14             <li>老去惟心在,相依到歲寒。</li>
15             <li>霜嚴御史府,雨立大夫官。</li>
16             <li>犧象溝中斷,徽弦爨下殘。</li>
17             <li>光陰一鳥過,翦伐萬牛難。</li>
18             <li>春日輝桃李,蒼顏亦預(yù)觀。</li>
19         </ul>
20     </body>
21 </html>

如何用JavaScript去操作HTML元素和CSS樣式,實現(xiàn)簡單的動態(tài)操作?可以通過DOM操作,文檔對象模型DOM(Document Object Model)定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)(節(jié)點樹),DOM百度百科

如上代碼所示,是為一個DOM樹狀結(jié)構(gòu)html代碼,將HTML代碼分解為DOM節(jié)點層次圖為:

HTML文檔可以說由節(jié)點構(gòu)成的集合,三種常見的DOM節(jié)點: 

  1. 元素節(jié)點:上圖中<html>、<body>、<p>等都是元素節(jié)點,即標(biāo)簽。
  2. 文本節(jié)點:向用戶展示的內(nèi)容,如<li>...</li>中的"群陰彫品物,松柏尚桓桓"等文本
  3. 屬性節(jié)點:元素屬性,如<a>標(biāo)簽的鏈接屬性。
1 <a href="https://www.baidu.com">DOM操作</a>
2 <!--<a >屬性節(jié)點-->
3 <!--"DOM操作"是為文本節(jié)點-->

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多