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

資訊專欄INFORMATION COLUMN

重學(xué)前端學(xué)習(xí)筆記（二十三）--狹義的文檔對(duì)象DOM

Guakin_Huang / 1739人閱讀

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

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

DOM API 大致包含 4 個(gè)部分

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

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

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

遍歷：遍歷 DOM 需要的 API。

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

節(jié)點(diǎn)的html寫法

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

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

parentNode

childNodes

firstChild

lastChild

nextSibling

previousSibling

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

appendChild

insertBefore

removeChild

replaceChild

3、Node 還提供了一些高級(jí) API

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

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

isEqualNode：檢查兩個(gè)節(jié)點(diǎn)是否完全相同。

isSameNode：檢查兩個(gè)節(jié)點(diǎn)是否是同一個(gè)節(jié)點(diǎn)。

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

4、DOM 標(biāo)準(zhǔn)規(guī)定了節(jié)點(diǎn)必須從文檔的 create 方法創(chuàng)建出來(lái)

createElement

createTextNode

createCDATASection

createComment

createProcessingInstruction

createDocumentFragment

createDocumentType

四、Element 與 Attribute 
元素對(duì)應(yīng)了 HTML 中的標(biāo)簽，它既有子節(jié)點(diǎn)，又有屬性。

1、把元素的 Attribute 當(dāng)作字符串來(lái)看，有以下的 API

getAttribute

setAttribute

removeAttribute

hasAttribute

2、把 Attribute 當(dāng)作節(jié)點(diǎn)

getAttributeNode

setAttributeNode

五、查找元素

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

querySelector

querySelectorAll

getElementById

getElementsByName

getElementsByTagName

getElementsByClassName

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

3、getElementsByName、getElementsByTagName、getElementsByClassName 獲取的集合并非數(shù)組，而是一個(gè)能夠動(dòng)態(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)部是有高速的索引機(jī)制，來(lái)動(dòng)態(tài)更新這樣的集合的。

六、遍歷 
DOM API 中還提供了 NodeIterator 和 TreeWalker 來(lái)遍歷樹。并且它們提供了過(guò)濾功能，還可以把屬性節(jié)點(diǎn)也包含在遍歷之內(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 的時(shí)候，直接使用遞歸和 Node 的屬性。

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

1、注意：Range API 比 節(jié)點(diǎn) API 更精確操作 DOM 樹，并且性能更高，但是使用起來(lái)比較麻煩，在實(shí)際項(xiàng)目中，并不常用，只有做底層框架和富文本編輯對(duì)它有強(qiáng)需求。

2、創(chuàng)建 Range 一般是通過(guò)設(shè)置它的起止來(lái)實(shí)現(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、通過(guò) Range 也可以從用戶選中區(qū)域創(chuàng)建

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

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

var fragment = range.extractContents()
range.insertNode(document.createTextNode("abcd"))
個(gè)人總結(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/109755.html

相關(guān)文章

  • 重學(xué)前端學(xué)習(xí)筆記（二十三）--狹義的文檔對(duì)象DOM

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

    wuaiqiu 評(píng)論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（二十三）--狹義的文檔對(duì)象DOM

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

    AlanKeene 評(píng)論0 收藏0

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

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

    blair 評(píng)論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十三）--瀏覽器工作解析（三）

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

    trigkit4 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<