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

資訊專欄INFORMATION COLUMN

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

AlanKeene / 2176人閱讀

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

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

DOM API 大致包含 4 個部分

節(jié)點：DOM 樹形結(jié)構(gòu)中的節(jié)點相關(guān) API。

事件：觸發(fā)和監(jiān)聽事件相關(guān) API。

Range：操作文字范圍相關(guān) API。

遍歷：遍歷 DOM 需要的 API。

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

節(jié)點的html寫法

Element: ...
Text: text
Comment: 
DocumentType: 
ProcessingInstruction:
三、Node 
Node 是 DOM 樹繼承關(guān)系的根節(jié)點。

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

parentNode

childNodes

firstChild

lastChild

nextSibling

previousSibling

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

appendChild

insertBefore

removeChild

replaceChild

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

compareDocumentPosition：是一個用于比較兩個節(jié)點中關(guān)系的函數(shù)。

contains：檢查一個節(jié)點是否包含另一個節(jié)點的函數(shù)。

isEqualNode：檢查兩個節(jié)點是否完全相同。

isSameNode：檢查兩個節(jié)點是否是同一個節(jié)點。

cloneNode：復制一個節(jié)點，如果傳入?yún)?shù) true，則會連同子元素做深拷貝。

4、DOM 標準規(guī)定了節(jié)點必須從文檔的 create 方法創(chuàng)建出來

createElement

createTextNode

createCDATASection

createComment

createProcessingInstruction

createDocumentFragment

createDocumentType

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

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

getAttribute

setAttribute

removeAttribute

hasAttribute

2、把 Attribute 當作節(jié)點

getAttributeNode

setAttributeNode

五、查找元素

1、document 節(jié)點提供了查找元素的能力

querySelector

querySelectorAll

getElementById

getElementsByName

getElementsByTagName

getElementsByClassName

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

3、getElementsByName、getElementsByTagName、getElementsByClassName 獲取的集合并非數(shù)組，而是一個能夠動態(tài)更新的集合。

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

瀏覽器內(nèi)部是有高速的索引機制，來動態(tài)更新這樣的集合的。

六、遍歷 
DOM API 中還提供了 NodeIterator 和 TreeWalker 來遍歷樹。并且它們提供了過濾功能，還可以把屬性節(jié)點也包含在遍歷之內(nèi)。
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 比 節(jié)點 API 更精確操作 DOM 樹，并且性能更高，但是使用起來比較麻煩，在實際項目中，并不常用，只有做底層框架和富文本編輯對它有強需求。

2、創(chuàng)建 Range 一般是通過設置它的起止來實現(xiàn)

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 也可以從用戶選中區(qū)域創(chuàng)建

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

4、更改 Range 選中區(qū)段內(nèi)容由 extractContents（取出） 和 insertNode（插入） 來實現(xiàn)。

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

不懂一些概念可以參考:

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53917.html

相關(guān)文章

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

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

    Guakin_Huang 評論0 收藏0

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

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

    wuaiqiu 評論0 收藏0

  • 26天學通前端開發(fā)（配資料）

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

    blair 評論0 收藏0

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

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

    trigkit4 評論0 收藏0

發(fā)表評論

0條評論

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