JavaScript學習筆記之DOM介紹
目錄
- 1、簡介
- 2、方法
- 3、屬性
- 4、訪問節點
- 5、修改節點
- 6、添加節點
- 7、刪除節點
- 8、替換節點
- 9、改變 CSS
1、簡介
文檔對象模型（Document Object Model，DOM）使 JavaScript 可以訪問和操作 HTML 文檔
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型，根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都被視為節點，而 HTML 文檔則被視為節點樹
2、方法
DOM 方法定義在節點上執行的動作，以下列出常用的 DOM 方法：
- getElementById()：返回帶有指定 ID 的節點
- getElementsByTagName()：返回帶有指定標簽名稱的節點列表
- getElementsByClassName()：返回帶有指定類名的節點列表
- appendChild()：添加子節點
- removeChild()：刪除子節點
- replaceChild()：替換子節點
- createElement()：創建元素節點
- createTextNode()：創建文本節點
- createAttribute()：創建屬性節點
- getAttribute()：返回指定的屬性值
- setAttribute()：設置屬性為指定的值
3、屬性
DOM 屬性是節點的值，以下列出常用的 DOM 屬性：
innerHTML：獲取元素內容
nodeName：規定節點名稱，只讀
| nodeName | 值 |
|---|---|
| 元素節點 | 與標簽名相同 |
| 屬性節點 | 與屬性名相同 |
| 文本節點 | #text |
| 文檔節點 | #document |
- nodeValue：規定節點的值
| nodeValue | 值 |
|---|---|
| 元素節點 | undefined 或 null |
| 屬性節點 | 屬性值 |
| 文本節點 | 文本本身 |
- nodeType：規定節點類型，只讀
| nodeType | 值 |
|---|---|
| 元素節點 | 1 |
| 屬性節點 | 2 |
| 文本節點 | 3 |
| 註釋節點 | 8 |
| 文檔節點 | 9 |
4、訪問節點
（1）getElementById()
使用 getElementById() 方法可以返回帶有指定 ID 的節點
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p id="dom">Hello DOM!</p>
<script>
x = document.getElementById("dom");
document.write("id 為 dom 的文本: " + x.innerHTML);
</script>
</body>
</html>
<!-- 頁面內容：
Hello World!
Hello DOM!
id 為 dom 的文本: Hello DOM!
-->（2）getElementsByTagName()
使用 getElementsByTagName() 方法可以返回帶有指定標簽名稱的節點列表
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>Hello DOM!</p>
<script>
x = document.getElementsByTagName("p");
document.write("第一段文本: " + x[0].innerHTML);
</script>
</body>
</html>
<!-- 頁面內容：
Hello World!
Hello DOM!
第一段文本: Hello World!
-->（3）getElementsByClassName()
使用 getElementsByClassName() 方法可以返回帶有指定類名的節點列表
5、修改節點
（1）修改節點內容
修改節點內容最簡單的方法是使用 innerHTML 屬性
可以通過以下語法修改 HTML 元素的內容
document.getElementById("...").innerHTML = value;（2）修改節點屬性
可以通過以下語法修改 HTML 元素的屬性
document.getElementById("...").attribute = value;6、添加節點
如果需要添加新的節點，可以按照下面三個步驟進行：
- 創建新的節點
- 找到已存在的節點
- 將新的節點追加到已存在的節點 —— appendChild
// 創建新的元素節點 para
var para = document.createElement("p");
// 創建新的文本節點 text
var text = document.createTextNode("This is a new paragraph.");
// 將文本節點 text 添加到元素節點 para
para.appendChild(text);
// 找到已存在的元素節點 element
var element = document.getElementById("...");
// 將新的元素節點 para 追加到已存在的元素節點 element
element.appendChild(para);7、刪除節點
如果需要刪除已經存在的節點，可以按照下面三個步驟進行：
- 找到待刪除節點的父節點
- 找到待刪除節點
- 從父節點中刪除子節點 —— removeChild
// 找到待刪除節點的父節點 parent
var parent = document.getElementById("div1");
// 找到待刪除節點 child
var child = document.getElementById("p1");
// 從父節點 parent 中刪除子節點 child
parent.removeChild(child);也可以先找到待刪除節點，然後通過 parentNode 屬性查找待刪除節點的父節點
// 找到待刪除節點 child
var child = document.getElementById("p1");
// 通過 parentNode 屬性查找待刪除節點的父節點，然後從父節點中刪除子節點 child
child.parentNode.removeChild(child);8、替換節點
替換節點與添加和刪除節點類似，需要四個步驟：
- 創建新的節點
- 找到待替換節點的父節點
- 找到待替換節點
- 從父節點中替換子節點成新的節點 —— replaceChild
// 創建新的元素節點 para
var para = document.createElement("p");
// 創建新的文本節點 text
var text = document.createTextNode("This is a new paragraph.");
// 將文本節點 text 添加到元素節點 para
para.appendChild(text);
// 找到待替換節點的父節點 parent
var parent = document.getElementById("div1");
// 找到待替換節點 child
var child = document.getElementById("p1");
// 從父節點 parent 中替換子節點 child 成新的節點 para
parent.replaceChild(para,child);同樣的，可以通過 parentNode 屬性查找待替換節點的父節點
9、改變 CSS
HTML DOM 允許通過 JavaScript 改變 HTML 元素的樣式
可以通過以下語法修改 HTML 元素的樣式
document.getElementById("...").style.property = value;Background 屬性
background：在一行中設置所有的背景屬性
backgroundColor：設置元素的背景顏色
- backgroundImage：設置元素的背景圖像
- backgroundPosition：設置背景圖像的起始位置
- backgroundRepeat：設置背景圖像是否重復
backgroundAttachment：設置背景圖像是否固定
Border 屬性
- border：在一行中設置四個邊框的所有屬性
- borderTop：在一行中設置頂邊框的所有屬性
- borderRight：在一行中設置右邊框的所有屬性
- borderBottom：在一行中設置底邊框的所有屬性
- borderLeft：在一行中設置左邊框的所有屬性
- borderColor：設置所有四個邊框的顏色
- borderStyle：設置所有四個邊框的樣式
- borderWidth：設置所有四個邊框的寬度
Margin 屬性
- margin：在一行中設置元素的邊距
- marginTop：設置元素的上邊距
- marginRight：設置元素的右邊距
- marginBottom：設置元素的下邊距
- marginLeft：設置元素的左邊距
Padding 屬性
- padding：在一行中設置元素的填充
- paddingTop：設置元素的上填充
- paddingRight：設置元素的右填充
- paddingBottom：設置元素的下填充
- paddingLeft：設置元素的左填充
Outline 屬性
- outline：在一行中設置元素輪廓的所有屬性
- outlineColor：設置圍繞元素的輪廓顏色
- outlineStyle：設置圍繞元素的輪廓樣式
- outlineWidth：設置圍繞元素的輪廓寬度
List 屬性
- listStyle：在一行中設置列表的所有屬性
- listStyleType：設置列表項標記的類型
- listStyleImage：設置列表項標記為圖像
- listStylePosition：設置列表項標記的位置
Table 屬性
- borderCollapse：設置表格邊框是否合並為單邊框
- borderSpacing：設置分隔單元格邊框的距離
- captionSide：設置表格標題的位置
- emptyCells：顯示空單元格的顯示
- tableLayout：設置顯示表格單元格、行以及列的算法
Text 屬性
- color：文本顏色
- font：在一行中設置字體的所有屬性
- fontFamily：字體系列
- fontSize：字體大小
- fontWeight：字體粗細
- fontStyle：字體樣式
- fontStretch：緊縮或伸展字體
- fontVariant：小型大寫字母
- letterSpacing：字間距
- wordSpacing：詞間距
- lineHeight：行間距
- textAlign：文本對齊
- textIndent：文本縮進
- textDecoration：文本修飾
- textShadow：文本陰影
- textTransform：文本大寫
- whiteSpace：空白顯示
參考資料：
http://www.w3school.com.cn/js/index.asp
http://www.w3school.com.cn/htmldom/index.asp
http://www.w3school.com.cn/jsref/dom_obj_style.asp
JavaScript學習筆記之DOM介紹