網頁DOM編程方法（API總結與應用）

• 網頁DOM編程
  • Node、Document和Element三者關係
  • DOM編程常用 API 總結
  • DOM編程 API 應用

網頁DOM編程

Node、Document和Element三者關係

Node：各種類型的 DOM API 對象會從這個介面繼承。

Document：表示在任何在瀏覽器中載入的網頁（DOM樹）。

Element：描述所有相同種類的元素所普遍具有的方法和屬性。

完整的繼承關係如下圖：

說明：圖中的子類可以從父類繼承方法和屬性。

DOM編程常用 API 總結

Node節點

nodeName特別說明：

1. 元素節點的nodeName是標簽名稱

2. 屬性節點的nodeName是屬性名稱

3. 文本節點的nodeName永遠是#text

4. 文檔節點的nodeName永遠是#document

nodeValue特別說明：

1. 元素節點的nodeValue是null（賦值無效）

2. 文本節點的nodeValue是文本自身

3. 屬性節點的nodeValue是屬性的值

Document節點

註意：NodeList不是數組，而是一個類數組對象。可稱為DOM集合。它的遍歷方法有以下兩種方式：

1. 利用自帶的forEach方法
2. 轉換成數組形式：Array.from(nodelist)、[].slice.call(nodelist)

Element節點

1. 在CSS盒模型中，可視區的寬高如下所示：

根據上面的盒模型圖，可視區的寬高可有以下計算公式：

offsetWidth = width + padding*2

offsetHeight = width + padding*2

2. 當滾動條滾動到底部時，有以下計算公式：

scrollHeight = scrollTop + clientHeight

註意：scrollTop是一個動態值，隨著滾動條向下滑動逐漸增加。而clientHeight則是一個靜態值。

HTMLELement節點

在CSS盒模型中，偏移量的寬高如下所示：

根據上面的盒模型圖，偏移量的寬高可有以下計算公式：

offsetWidth = width +border*2 +padding*2

offsetHeight = width +border*2 +padding*2

DOM編程 API 應用

接下來利用上面的API去實現以下幾個步驟。首先考慮這樣一個DOM結構，如下：

<div class="list">
    <ul style="list-style: none; text-align: center; margin: 0px; padding: 0px;">
        <li style="background-color: green;">1</li>
        <li style="background-color: green;">2</li>
        <li style="background-color: green;">3</li>
        <li style="background-color: green;">4</li>
    </ul>
</div>

假設這樣一個場景，用戶點擊了某個按鍵。我們希望能使用JS去生成上面的DOM結構。如下：

<input type="button" value="點擊生成列表" onclick="createList()">
<script>
const createList = () => {
    // 創建list，設置class屬性。插入body節點末尾
    let list = document.createElement("div");
    list.setAttribute("class", "list")
    document.body.insertBefore(list, null)
    // 創建ul節點，設置style樣式。插入list節點內部
    let ul = document.createElement("ul");
    ul.style.listStyle = "none";
    ul.style.textAlign = "center";
    ul.style.margin = "0px";
    ul.style.padding = "0px";
    list.appendChild(ul);
    // 創建4個li節點，添加內容並設置style樣式。插入ul節點內部
    let li;
    for (let i = 1; i <= 4; i++) {
        li = document.createElement("li");
        li.style.backgroundColor = "blue";
        li.textContent = i;
        ul.appendChild(li);
    }
}
</script>

按鍵點擊後生成DOM結構如下：

我們總結一下步驟。利用JS生成DOM結構的操作如下：

1. 創建元素：Document.createElement()
2. 設置屬性：Element.setAttribute()
3. 添加樣式：HTMLElement.style
4. 添加內容：Node.textContent
5. 插入父節點：Node.appendChild()

參考

MDN-Node