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樣式，實作簡單的動態操作</p> 12 <ul title="歲寒知松柏"> 13 <li>群陰彫品物，松柏尚桓桓，</li> 14 <li>老去惟心在，相依到歲寒，</li> 15 <li>霜嚴御史府，雨立大夫官，</li> 16 <li>犧象溝中斷，徽弦爨下殘，</li> 17 <li>光陰一鳥過，翦伐萬牛難，</li> 18 <li>春榷訓桃李，蒼顏亦預觀，</li> 19 </ul> 20 </body> 21 </html>
如何用JavaScript去操作HTML元素和CSS樣式，實作簡單的動態操作？可以通過DOM操作，檔案物件模型DOM（Document Object Model）定義訪問和處理HTML檔案的標準方法，DOM 將HTML檔案呈現為帶有元素、屬性和文本的樹結構（節點樹），DOM百度百科
如上代碼所示，是為一個DOM樹狀結構html代碼，將HTML代碼分解為DOM節點層次圖為：
HTML檔案可以說由節點構成的集合，三種常見的DOM節點:
- 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標簽，
- 文本節點:向用戶展示的內容，如<li>...</li>中的"群陰彫品物，松柏尚桓桓"等文本
- 屬性節點:元素屬性，如<a>標簽的鏈接屬性href="http://www.imooc.com"，
1 <a href="https://www.baidu.com">DOM操作</a> 2 <!--<a href="https://www.baidu.com">屬性節點--> 3 <!--"DOM操作"是為文本節點-->
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/141706.html
標籤：JavaScript
上一篇：JavaScript 基礎知識