DOM

DOM

javascript 的組成部分

• DOM (document object model) 文檔對象模型
• BOM (browers object model) 瀏覽器對象模型
• ECMAScript js 的核心

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-yUt9LniG-1577959454391)(./DOMltree.gif)]

DOM 節點

• 節點分類
  • 元素節點：每個 HTML元素
    • 屬性節點：HTML元素的屬性
  • 文本節點：HTML元素內的文本
    • 註釋節點：註釋
  • 文檔節點：整個文檔document
• 節點類型 — nodeType
  • 元素節點：1
    • 屬性節點：2
  • 文本節點：3
    • 註釋節點：8
  • 文檔節點：9
• 節點名稱 — nodeName
  • 元素節點：與標籤名相同
  • 文本節點：爲#text
  • 註釋節點：爲#comment
  • 文檔節點：爲#document

DOM關係

• childNodes 子節點
• children 子元素
• firstChild 第0個子節點
• firstElementChild 第0個子元素
• lastChild 最後一個子節點
• lastElementChild 最後一個子元素
• nextSibling 下一個兄弟節點
• nextElementSibling 下一個兄弟元素
• previousSibling 上一個兄弟節點
• previousElementSibling 上一個兄弟元素
• parentNode 父節點
• offsetParent 定位父級

DOM 屬性操作

注意 . 和 [] 都是 ECMAScript 中，對象的屬性操作，對象屬性的值會被存在內存中, 想要直接獲取存在 文檔中屬性，或者 想把一個屬性設置在文檔中我們需要使用DOM 的屬性操作

• el.attributes 元素所有屬性的集合
• el.getAttribute(“attr”) 獲取屬性
• el.setAttribute(“attr”,“val”) 設置屬性
• el.removeAttribute(“attr”) 移出屬性
• el.hasAttribute(“attr”) 判斷是否有這個屬性
• 只要操作了innerHTML 元素的所有子元素上，存在內存中的事件和相關的屬性都會丟失。如果希望元素的某些屬性在操作了父級的innerHTML 之後，還存在就把這個屬性加在 DOM 中

data 自定義屬性

• 在標籤中定義data自定義屬性：data-key=“value”;
• 在js操作該元素的 data 自定義屬性：el.dataset
  • 獲取：el.dataset.key
  • 設置: el.dataset.key = “value”

節點操作

創建節點

語法：element document.createElement(“tagName”); 創建一個節點
參數：tagName 標籤名稱
返回值：創建好的節點

向頁面中添加節點

• el.appendChild(node) 在元素的末尾添加一個子級
• el.insertBefore(newNode,oldNode) 在 oldNode 前邊添加入 newNode
• 在使用 appendChild 和 insertBefore時，如果添加是一個頁面上已經存在的節點，會先從原位置刪除，然後在添加到新的位置去。

替換節點

• parent.replaceChild(newNode,oldNode) 替換子元素

刪除節點

• el parent.removeChild(el) 刪除掉某個子元素 （推薦，會返回刪除的節點，兼容性較好）
• node.remove(); 刪除自己

克隆節點

• node.cloneNode(deep)
  • deep: 默認爲false
  • deep 爲 true, 克隆元素及屬性，以及元素的內容和後代，並不會克隆所帶的事件
  • deep 爲 false, 只克隆元素本身，及它的屬性

元素的尺寸獲取

• offset

  • offsetWidth 可視寬度（width(height) + padding + border）
  • offsetHeight 可視高度
  • offsetLeft 距離定位父級的left座標 （通過計算後的頁面展示的距離，如果有margin也會算進去）
  • offsetTop 距離定位父級的top座標

• client

  • clientWidth 可視寬度 - border （width(height) + padding）
  • clientHeight 可視高度 - border
  • clientTop 上邊框寬度
  • clientLeft 左邊框寬度

• scroll

  • scrollWidth 內容寬度（ 如果內容高度比元素高度要高，scrollHeight 就是內容的高度，否則就是元素的高度，包含padding ）
  • scrollHeight 內容高度
  • scrollLeft 左右滾動距離
  • scrollTop 上下滾動距離

• getBoundingClientRect() （新方法，不兼容 ie ）

  • left 元素左側距離可視區左側距離
  • top 元素頂部距離可視區頂部距離（滾動後會發生變化，可能是負值）
  • right 元素右側距離可視區左側距離
  • bottom 元素底部距離可視區頂部距離
  • width 可視寬度
  • height 可視高度

表格相關操作

• tBodies、tHead、tFoot、rows、cells

其他

• createDocumentFragment

{
    let box = document.querySelector("#box");
    console.time(1);
    let inner = "";
    for(let i = 0; i < 1000; i++){
        inner += `<div>${i}</div>`;
    }
    box.innerHTML = inner;
    console.timeEnd(1);  // 速度最快

    console.time(2);
    // let fragment = document.createDocumentFragment();
    let div = '';
    for(let i = 0; i < 1000; i++){
        div = document.createElement("div");
        div.innerHTML = i;
    }
    box.appendChild(div);
    console.timeEnd(2);  // 速度最慢

    console.time(3);
    let fragment = document.createDocumentFragment();
    for(let i = 0; i < 1000; i++){
        let div = document.createElement("div");
        div.innerHTML = i;
        fragment.appendChild(div);
    }
    box.appendChild(fragment);
    console.timeEnd(3); // 速度比一般的元素快
}

• NodeList 和 HTMLCollection

nodeList 和 HTMLCollection 區別

• nodeList
  childNodes
  querySelectorAll
• HTMLCollection
  children
  getElementsByTagName
  getElementsByClassName
• 區別：
  • nodeList 有 forEach 方法，但是 HTMLCollection 沒有forEach
  • HTMLCollection 每次調用時都會動態的去獲取, nodeList 中 childNodes 有動態更新，但是querySelectorAll 就不會動態更新