溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

js中Node和Element有哪些區(qū)別

發(fā)布時(shí)間：2022-02-25 15:20:41 來源：億速云 閱讀：191 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了js中Node和Element有哪些區(qū)別，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

js中Node和Element有哪些區(qū)別

準(zhǔn)備工作

在正式開始介紹 Node 和 Element 區(qū)別之前，我們先準(zhǔn)備以下代碼：

<div id="parent">
    This is parent content.
    <div id="child1">This is child1.</div>
    <div id="child2">This is child2.</div>
</div>

下面的絕大多數(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)系：

js中Node和Element有哪些區(qū)別

這也就解釋了為什么 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)知。

js中Node和Element有哪些區(qū)別

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 代碼去掉格式化、合并為一行，修改如下：

<div id="parent">This is parent content.<div id="child1">This is child1.</div><div id="child2">This is child2.</div></div>

輸出結(jié)果：

js中Node和Element有哪些區(qū)別

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> 1 2 3 <span> 4 5 6 </span> 7 8 9 </div>，針對(duì)這段代碼來說：

  • 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)一：

<div id="parent">This is parent content.<span>This is a span.</span><div id="child1">This is child1.</div><div id="child2">This is child2.</div></div>

js中Node和Element有哪些區(qū)別

試驗(yàn)二：

<body>
    <div id="parent">This is parent content\n.
        <span>This is a span.</span>
        <div id="child1">This is child1.</div><div id="child2">This is child2.</div>
    </div>
</body>

js中Node和Element有哪些區(qū)別

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

擴(kuò)展

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

  • HTML 中的換行只能使用 </br> 標(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í)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手