真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

    This is parent content.
    This is child1.

下面的絕大多數(shù)現(xiàn)象和結(jié)論都將借助這段代碼的結(jié)構(gòu)來進(jìn)行展示說明。

getElementById 獲取到的到底是什么？

document.getElementById() 方法應(yīng)該是我們最常使用的接口之一，那么它的返回值到底是 Node 還是 Element？

我們使用以下代碼驗(yàn)證一下：

let parentEle = document.getElementById('parent');
parentEle instanceof Node
// true
parentEle instanceof Element
// true
parentEle instanceof HTMLElement
// true

可以看到，document.getElementById() 獲取到的結(jié)果既是 Node 也是 Element。

Node、ELement 和 HTMLElement 有什么關(guān)系？

上面的代碼中為什么要用 Node、Element 和 HTMLElement 來做類型判斷？它們之間到底有何關(guān)系？

看代碼：

let parentEle = document.getElementById('parent');

parentEle.__proto__
// HTMLDivElement {…}

parentEle.__proto__.__proto__
// HTMLElement {…}

parentEle.__proto__.__proto__.__proto__
// Element {…}

parentEle.__proto__.__proto__.__proto__.__proto__
// Node {…}

parentEle.__proto__.__proto__.__proto__.__proto__.__proto__
// EventTarget {…}

parentEle.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__
// {constructor: ?, …}

parentEle.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__
// null

對(duì)于以上輸出結(jié)果，我們可以用一張圖更直觀地表示它們之間的關(guān)系：

這也就解釋了為什么 getElementById 獲取到的既是 Node 也是 Element，因?yàn)?Element 繼承于 Node。

從而也可以得出一個(gè)結(jié)論：Element 一定是 Node，但 Node 不一定是 Element。

所以：Element 可以使用 Node 的所有方法。

更直白地觀察 Node 和 Element

雖然得出了上面的結(jié)論，也清楚了 Node 和 Element 的關(guān)系，但是那只是理論，我們還需要更直白的結(jié)果來強(qiáng)化對(duì)理論的認(rèn)知。

NodeList 內(nèi)容：

• [0]  "\n            This is parent content."

• [2]  "\n            "

• [4]  "\n            "

Element.children 獲取到的只是父元素點(diǎn)下的所有 div，而 Element.childNodes 獲取到的卻是父節(jié)點(diǎn)下的所有節(jié)點(diǎn)（包含文本內(nèi)容、元素）。

單個(gè) Node 的界限在哪里？

從上面例子的 NodeList 內(nèi)容中，換行符 \n 被當(dāng)成一個(gè)單獨(dú)的 Node，由此產(chǎn)生了一個(gè)新的疑惑：?jiǎn)蝹€(gè) Node 產(chǎn)生的界限在哪里？

我們將用到的 HTML 代碼去掉格式化、合并為一行，修改如下：

This is parent content.This is child1.This is child2.

輸出結(jié)果：

NodeList 中的沒有換行符了，原來之前例子中 NodeList 里的換行符是因?yàn)樵即a中， HTML 標(biāo)簽與標(biāo)簽、內(nèi)容與標(biāo)簽之間換行而產(chǎn)生的。

現(xiàn)在就可以回答單個(gè) Node 的界限在哪里了，兩個(gè)方面：

• 單個(gè)的 HTML 標(biāo)簽算是一個(gè)單獨(dú)的 Node；

• 針對(duì)非 HTML標(biāo)簽（比如文本、空格等），從一個(gè) HTML 標(biāo)簽開始，到碰到的第一個(gè) HTML 標(biāo)簽為止，如果中間有內(nèi)容（文本、空格等），那這部分內(nèi)容算是一個(gè) Node。注意：這里的 HTML 標(biāo)簽不分起始和結(jié)束。

比如，

• div 是一個(gè) Node；

• span 是一個(gè) Node；

• “ 1 2 3 ”、“ 4 5 6 ”和 “ 7 8 9 ”全都是單獨(dú)的 Node

再進(jìn)一步

因?yàn)樯厦娴睦又惺褂玫亩际菈K級(jí)元素，那如果使用行內(nèi)元素會(huì)怎樣？

試驗(yàn)一：

This is parent content.This is a span.This is child1.This is child2.

試驗(yàn)二：

    This is parent content\n.
        This is a span.
        This is child1.This is child2.
    

可以看到，即使使用了 span 元素，最后的結(jié)果也是符合上面得出的單個(gè) Node 界限結(jié)論的。

擴(kuò)展

從以上這么多例子中，我們可以再擴(kuò)展總結(jié)一下：

• HTML 中的換行只能使用
標(biāo)簽，\n 會(huì)被直接解析成字符串；

• HTML 代碼中，標(biāo)簽與文本之間、標(biāo)簽和標(biāo)簽之間的換行都會(huì)被如實(shí)記錄，反映到獲取結(jié)果上就是 \n；

• HTML 代碼中，標(biāo)簽與標(biāo)簽、文本與文本、文本與標(biāo)簽之間的空格會(huì)被如實(shí)記錄；

• node.data 內(nèi)容中 \n 后面的空格字符數(shù)和實(shí)際代碼中格式化空格配置數(shù)有關(guān)，其實(shí)也就是“空格會(huì)被如實(shí)記錄”。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js中Node和Element有哪些區(qū)別”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!