Javascript中的DOM全稱為文檔對象模型（Document Object Model）。DOM是Web頁面的基礎，它允許我們以結構化的方式訪問和操作HTML或XML文檔，從而實現動態地改變Web頁面內容和樣式。簡而言之，DOM是一種描述HTML文檔及其內容的方式，提供了一種在Javascript中操作HTML或XML文檔的方法和接口。
DOM以一棵樹的形式來表示整個文檔，其中每個元素、屬性、文本和注釋都是一個節點（node）。節點之間有層次結構，形成了一個分層的樹形結構。根據節點的不同，可以在DOM樹中進行多種操作，例如添加或刪除節點、修改節點屬性、遍歷節點等。下面是一個簡單的HTML文檔示例：
<!DOCTYPE html> <html> <head> <title>DOM示例</title> </head> <body> <div id="main"> <p>這是一個段落</p> <ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul> </div> </body> </html>
上面的HTML文檔結構可以轉換為以下的DOM樹形結構：
HTML
├── HEAD
│ └── TITLE
│ └── TextNode("DOM示例")
└── BODY
└── DIV (id="main")
├── P
│ └── TextNode("這是一個段落")
└── UL
├── LI
│ └── TextNode("列表項1")
├── LI
│ └── TextNode("列表項2")
└── LI
└── TextNode("列表項3")可以看到，DOM樹形結構中每個節點都有它們自己的屬性，其中包括節點的標簽名、屬性值、子節點以及文本節點。以下是常用的DOM節點類型：
- Element：代表頁面上的元素節點。
- Attribute：代表頁面上元素節點的屬性節點。
- Text：代表頁面上非標簽節點（例如文本節點）。
- Comment：代表頁面上注釋節點。
我們可以通過Javascript來訪問DOM樹中的節點，例如獲取節點的屬性、添加新節點、移動節點等操作。下面是一個簡單的Javascript示例，它獲取id為main的div元素節點，并將文本內容改為“Hello World!”：
<!DOCTYPE html>
<html>
<head>
<title>DOM示例</title>
<script>
window.onload = function(){
var div = document.getElementById("main");
div.innerHTML = "Hello World!";
};
</script>
</head>
<body>
<div id="main">
<p>這是一個段落</p>
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
</div>
</body>
</html>以上代碼利用Javascript的document對象的getElementById方法，獲取id為main的div元素節點，然后通過innerHTML屬性修改元素節點的文本內容。運行該代碼，頁面顯示的內容將會變為“Hello World!”。
在實際開發過程中，DOM的應用非常廣泛。可以使用DOM快速地對Web頁面進行修改、添加新元素、移動和刪除元素等操作，從而實現更加動態的Web頁面效果。同時，DOM的靈活性和擴展性也為我們提供了更加廣闊的 Web開發空間。
上一篇css所有屬性的值