網頁DOM編程方法（API總結與應用）-有解無憂

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

網頁DOM編程

Node、Document和Element三者關系

Node：各種型別的 DOM API 物件會從這個介面繼承，

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

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

完整的繼承關系如下圖：

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

DOM編程常用 API 總結

Node節點

屬性方法	說明
`Node.nodeName` 只讀	回傳一個包含該節點名字的`DOMString`，
`Node.nodeType`只讀	回傳一個與該節點型別對應的`無符號短整型`的值，
`Node.nodeValue`	回傳或設定當前節點的值，
`Node.textContent`	回傳或設定一個元素內所有子節點及其后代的文本內容，
`Node.firstChild` 只讀	回傳該節點的第一個子節點`Node`，如果該節點沒有子節點則回傳`null`，
`Node.lastChild` 只讀	回傳該節點的最后一個子節點`Node`，如果該節點沒有子節點則回傳`null`，
`Node.previousSibling` 只讀	回傳該節點同級的前一個節點 ( `Node`) ，如果不存在回傳 null，
`Node.nextSibling` 只讀	回傳與該節點同級的下一個節點 `Node`，如果不存在回傳`null`，
`Node.parentNode` 只讀	回傳一個當前節點 `Node`的父節點，
`Node.childNodes`只讀	回傳一個包含了該節點所有子節點的實時的`NodeList`，
`Node.appendChild()`	將指定的 childNode 引數作為最后一個子節點添加到當前節點，
`Node.removeChild()`	移除當前節點的一個子節點，這個子節點必須存在于當前節點中，
`Node.replaceChild()`	將選定的節點替換一個子節點 Node 為另外一個節點，
`Node.insertBefore()`	在當前節點下增加一個子節點 `Node`，并使該子節點位于參考節點的前面，

nodeName特別說明：

元素節點的nodeName是標簽名稱
屬性節點的nodeName是屬性名稱
文本節點的nodeName永遠是#text
檔案節點的nodeName永遠是#document

nodeValue特別說明：

元素節點的nodeValue是null（賦值無效）
文本節點的nodeValue是文本自身
屬性節點的nodeValue是屬性的值

Document節點

方法	說明
`Document.createElement()`	用給定標簽名創建一個新的元素，
`Document.createTextNode()`	創建一個文本節點，
`Document.querySelector()`	回傳檔案中與指定的選擇器匹配的第一個元素節點，
`Document.querySelectorAll()`	回傳包含檔案中與指定的選擇器匹配的所有元素節點的串列（NodeList），

注意：NodeList不是陣列，而是一個類陣列物件，可稱為DOM集合，它的遍歷方法有以下兩種方式：

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

Element節點

方法	說明
`Element.getAttribute()`	回傳元素上一個指定的屬性值，
`Element.setAttribute()`	設定指定元素上的某個屬性值，
`Element.removeAttribute()`	從指定的元素中洗掉一個屬性，
`Element.clientWidth` 只讀	回傳`Number` 表示該元素內部的寬度，
`Element.clientHeight` 只讀	回傳`Number` 表示內部相對于外層元素的高度，
`Element.clientTop` 只讀	回傳 `Number` 表示該元素距離它上邊界的高度，
`Element.clientLeft` 只讀	回傳`Number`表示該元素距離它左邊界的寬度，
`Element.scrollWidth` 只讀	回傳型別為： `Number` ，表示元素的滾動視圖寬度，
`Element.scrollHeight` 只讀	回傳型別為： `Number`，表示元素的滾動視圖高度，
`Element.scrollTop`	回傳型別為：`Number` ，表示該元素縱向滾動條距離
`Element.scrollLeft`	回傳型別為：`Number`，表示該元素橫向滾動條距離最左的位移，
`Element.getBoundingClientRect()`	回傳元素的大小及其相對于視口的位置，

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

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

offsetWidth = width + padding*2

offsetHeight = width + padding*2

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

scrollHeight = scrollTop + clientHeight

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

HTMLELement節點

屬性	說明
`HTMLElement.style`	獲取/設定元素的 style 屬性
`HTMLElement.offsetWidth`只讀	元素自身可視寬度加上左右 border 的寬度
`HTMLElement.offsetHeight` 只讀	元素自身可視高度加上上下 border 的寬度
`HTMLElement.offsetTop`只讀	元素自己 border 頂部距離父元素頂部或 body 元素 border 頂部的距離
`HTMLElement.offsetLeft`只讀	元素自己 border 左邊距離父元素 border 左邊或 body 元素 border 左邊的距離
`HTMLElement.offsetParent`只讀	元素的父元素，如果沒有就是 body 元素，若元素脫離檔案流，則為null

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

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

offsetWidth = width +border*2 +padding*2

offsetHeight = width +border*2 +padding*2

DOM編程 API 應用

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

<div >
    <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="https://www.cnblogs.com/chscript/archive/2023/01/14/點擊生成串列" 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結構的操作如下：

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

參考

MDN-Node

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542021.html

標籤：其他

上一篇：網頁DOM編程方法（API總結與應用）

下一篇：JS事件回圈機制（面試快速解題技巧）