国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

wuaiqiu / 996人閱讀

摘要：事件觸發和監聽事件相關。文檔是一個由標簽嵌套而成的樹形結構，因此，也是使用樹形的對象模型來描述一個文檔。節點的寫法三是樹繼承關系的根節點。七表示一個上的范圍，這個范圍是以文字為最小單位的。

筆記說明 
重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：kaimo313@foxmail.com。
一、DOM API 介紹 
文檔對象模型：用來描述文檔，特指 HTML 文檔，同時它又是一個對象模型，使用對象這樣的概念來描述 HTML 文檔。

DOM API 大致包含 4 個部分

節點：DOM 樹形結構中的節點相關 API。

事件：觸發和監聽事件相關 API。

Range：操作文字范圍相關 API。

遍歷：遍歷 DOM 需要的 API。

HTML 文檔是一個由標簽嵌套而成的樹形結構，因此，DOM 也是使用樹形的對象模型來描述一個 HTML 文檔。
二、節點 
DOM 的樹形結構所有的節點有統一的接口 Node。

節點的html寫法

Element: ...
Text: text
Comment: 
DocumentType: 
ProcessingInstruction:
三、Node 
Node 是 DOM 樹繼承關系的根節點。

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

parentNode

childNodes

firstChild

lastChild

nextSibling

previousSibling

2、Node 中也提供了操作 DOM 樹的 API

appendChild

insertBefore

removeChild

replaceChild

3、Node 還提供了一些高級 API

compareDocumentPosition：是一個用于比較兩個節點中關系的函數。

contains：檢查一個節點是否包含另一個節點的函數。

isEqualNode：檢查兩個節點是否完全相同。

isSameNode：檢查兩個節點是否是同一個節點。

cloneNode：復制一個節點，如果傳入參數 true，則會連同子元素做深拷貝。

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

createElement

createTextNode

createCDATASection

createComment

createProcessingInstruction

createDocumentFragment

createDocumentType

四、Element 與 Attribute 
元素對應了 HTML 中的標簽，它既有子節點，又有屬性。

1、把元素的 Attribute 當作字符串來看，有以下的 API

getAttribute

setAttribute

removeAttribute

hasAttribute

2、把 Attribute 當作節點

getAttributeNode

setAttributeNode

五、查找元素

1、document 節點提供了查找元素的能力

querySelector

querySelectorAll

getElementById

getElementsByName

getElementsByTagName

getElementsByClassName

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

3、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

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

六、遍歷 
DOM API 中還提供了 NodeIterator 和 TreeWalker 來遍歷樹。并且它們提供了過濾功能，還可以把屬性節點也包含在遍歷之內。
6.1、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.2、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 的屬性。

七、Range 
Range API 表示一個 HTML 上的范圍，這個范圍是以文字為最小單位的。

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

2、創建 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)

3、通過 Range 也可以從用戶選中區域創建

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

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

var fragment = range.extractContents()
range.insertNode(document.createTextNode("abcd"))
個人總結

不懂一些概念可以參考:

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114685.html

相關文章

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

    摘要：事件觸發和監聽事件相關。文檔是一個由標簽嵌套而成的樹形結構，因此，也是使用樹形的對象模型來描述一個文檔。節點的寫法三是樹繼承關系的根節點。七表示一個上的范圍，這個范圍是以文字為最小單位的。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的...

    Guakin_Huang 評論0 收藏0

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

    摘要：事件觸發和監聽事件相關。文檔是一個由標簽嵌套而成的樹形結構，因此，也是使用樹形的對象模型來描述一個文檔。節點的寫法三是樹繼承關系的根節點。七表示一個上的范圍，這個范圍是以文字為最小單位的。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的...

    AlanKeene 評論0 收藏0

  • 26天學通前端開發（配資料）

    摘要：網上有很多前端的學習路徑文章，大多是知識點羅列為主或是資料的匯總，數據量讓新人望而卻步。天了解一個前端框架。也可以關注微信公眾號曉舟報告，發送獲取資料，就能收到下載密碼，網盤地址在最下方，獲取教程和案例的資料。 前言 好的學習方法可以事半功倍，好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑，還要寫學習方法，還要發資料，干貨滿滿，準備接招。 網上有很多前端的學習路徑文章，大多是知...

    blair 評論0 收藏0

  • 重學前端學習筆記（十三）--瀏覽器工作解析（三）

    摘要：三操作過程首先，須把規則進行處理。后代選擇器空格后代選擇器的作用范圍是父節點的所有子節點，因此規則是在匹配到本標簽的結束標簽時回退。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，...

    trigkit4 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<