重學前端學習筆記（二十三）--狹義的文檔對象DOM

時間 2019-12-07

標籤前端學習筆記二十三狹義文檔對象 dom 欄目 HTML 简体版

原文原文鏈接

筆記說明

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，天天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的能夠加入winter的專欄學習【原文有winter的語音】，若有侵權請聯繫我，郵箱：kaimo313@foxmail.com。

1、DOM API 介紹

文檔對象模型：用來描述文檔，特指 HTML 文檔，同時它又是一個 對象模型，使用對象這樣的概念來描述 HTML 文檔。

DOM API 大體包含 4 個部分html

節點：DOM 樹形結構中的節點相關 API。
事件：觸發和監聽事件相關 API。
Range：操做文字範圍相關 API。
遍歷：遍歷 DOM 須要的 API。

HTML 文檔是一個由標籤嵌套而成的樹形結構，所以， DOM 也是使用樹形的對象模型來描述一個 HTML 文檔。

2、節點

DOM 的樹形結構全部的節點有統一的接口 Node。

節點的html寫法前端

Element: <tagname>...</tagname>
Text: text
Comment: <!-- comments -->
DocumentType: <!Doctype html>
ProcessingInstruction: <?a 1?>

3、Node

Node 是 DOM 樹繼承關係的根節點。

一、Node 提供了一組屬性，來表示它在 DOM 樹中的關係node

parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling

二、Node 中也提供了操做 DOM 樹的 API數組

appendChild
insertBefore
removeChild
replaceChild

三、Node 還提供了一些高級 API瀏覽器

compareDocumentPosition：是一個用於比較兩個節點中關係的函數。
contains：檢查一個節點是否包含另外一個節點的函數。
isEqualNode：檢查兩個節點是否徹底相同。
isSameNode：檢查兩個節點是不是同一個節點。
cloneNode：複製一個節點，若是傳入參數 true，則會連同子元素作深拷貝。

四、DOM 標準規定了節點必須從文檔的 create 方法建立出來app

createElement
createTextNode
createCDATASection
createComment
createProcessingInstruction
createDocumentFragment
createDocumentType

4、Element 與 Attribute

元素對應了 HTML 中的標籤，它既有子節點，又有屬性。

一、把元素的 Attribute 看成字符串來看，有如下的 API框架

getAttribute
setAttribute
removeAttribute
hasAttribute

二、把 Attribute 看成節點dom

getAttributeNode
setAttributeNode

5、查找元素

一、document 節點提供了查找元素的能力函數

querySelector
querySelectorAll
getElementById
getElementsByName
getElementsByTagName
getElementsByClassName

二、getElementById、getElementsByName、getElementsByTagName、getElementsByClassName，這幾個 API 的性能高於 querySelector。性能

三、getElementsByName、getElementsByTagName、getElementsByClassName 獲取的集合並不是數組，而是一個可以動態更新的集合。

var cxk = document.getElementsByClassName('kaimo');
console.log(cxk.length); // 0

var kaimo = document.createElement('div');
kaimo.setAttribute('class', 'kaimo')
document.documentElement.appendChild(kaimo)
console.log(cxk.length); // 1

瀏覽器內部是有高速的索引機制，來動態更新這樣的集合的。

6、遍歷

DOM API 中還提供了 NodeIterator 和 TreeWalker 來遍歷樹。而且它們提供了過濾功能，還能夠把屬性節點也包含在遍歷以內。

6.一、`NodeIterator` 的基本用法

var iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_COMMENT, null, false);

var node;
while(node = iterator.nextNode()){
    console.log(node);
}

6.二、`TreeWalker` 的用法

var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null, false)

var node;
while(node = walker.nextNode()){
    if(node.tagName === "p")
        node.nextSibling();
    console.log(node);
}

建議須要遍歷 DOM 的時候，直接使用遞歸和 Node 的屬性。

7、Range

Range API 表示一個 HTML 上的範圍，這個範圍是以文字爲最小單位的。

一、注意：Range API 比 節點 API 更精確操做 DOM 樹，而且性能更高，可是使用起來比較麻煩，在實際項目中，並不經常使用，只有作底層框架和富文本編輯對它有強需求。

二、建立 Range 通常是經過設置它的起止來實現

var range = new Range(),
    firstText = p.childNodes[1],
    secondText = em.firstChild
range.setStart(firstText, 9) // do not forget the leading space
range.setEnd(secondText, 4)

三、經過 Range 也能夠從用戶選中區域建立

// 用於處理用戶選中區域
var range = document.getSelection().getRangeAt(0);

四、更改 Range 選中區段內容由 extractContents（取出）和 insertNode（插入） 來實現。

var fragment = range.extractContents()
range.insertNode(document.createTextNode("abcd"))

我的總結

不懂一些概念能夠參考:

一、https://developer.mozilla.org/zh-CN/docs/Web/API/Document

二、https://www.runoob.com/jsref/dom-obj-document.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。