文档對象模型DOM(Document Object Model)定義訪問和處理HTML文档的標準方法。
DOM 將HTML文档呈現爲帶有元素、屬性和文本的樹結構(節點樹)。
先來看看下面代碼:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM</title> </head> <body> <h2><a href="https://www.wkwkk.com/">javascript DOM </a></h2> <p>對HTML元素進行操作,可添加、改變或移除CSS樣式等</p> <ul> <li>JavaScript</li> <li>DOM</li> <li>CSS</li> </ul> </body> </html>
將HTML代碼分解爲DOM節點層次圖:
HTML文档可以說由節點構成的集合,三種常見的DOM節點:
1. 元素節點:上圖中<html>、<body>、<p>等都是元素節點,即標簽。
2. 文本節點:向用戶展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節點:元素屬性,如<a>標簽的鏈接屬性href="http://www.imooc.com"。
看下面代碼:
<a href="http://www.imooc.com">JavaScript DOM</a>