溫馨提示×

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

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

DOM節(jié)點(diǎn)和元素之間有哪些區(qū)別

發(fā)布時(shí)間：2021-01-21 11:33:26 來(lái)源：億速云 閱讀：370 作者：小新 欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)DOM節(jié)點(diǎn)和元素之間有哪些區(qū)別的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

文檔對(duì)象模型(DOM)是一個(gè)將HTML或XML文檔視為樹(shù)形結(jié)構(gòu)的接口，其中每個(gè)節(jié)點(diǎn)都是文檔的一個(gè)對(duì)象。DOM還提供了一組方法來(lái)查詢樹(shù)、改變結(jié)構(gòu)、樣式。

DOM 還使用術(shù)語(yǔ)元素(Element)它與節(jié)點(diǎn)非常相似。那么，DOM節(jié)點(diǎn)和元素之間有什么區(qū)別呢?

1. DOM節(jié)點(diǎn)

理解節(jié)點(diǎn)和元素之間區(qū)別的關(guān)鍵是理解節(jié)點(diǎn)是什么。

更高的角度來(lái)看，DOM文檔由節(jié)點(diǎn)層次結(jié)構(gòu)組成。 每個(gè)節(jié)點(diǎn)可以具有父級(jí)和/或子級(jí)。

看看下面的HTML文檔:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <!-- Page Body -->
    <h3>My Page</h3>
    <p id="content">Thank you for visiting my web page!</p>
  </body>
</html>

該文檔包含以下節(jié)點(diǎn)層次結(jié)構(gòu):

DOM節(jié)點(diǎn)和元素之間有哪些區(qū)別

<html>是文檔樹(shù)中的一個(gè)節(jié)點(diǎn)。它有2個(gè)子節(jié)點(diǎn):<head>和<body>。

<body>子有3個(gè)子節(jié)點(diǎn)的節(jié)點(diǎn):注釋節(jié)點(diǎn)  <!-- Page Body -->，標(biāo)題<h3>，段落<p>。<body>節(jié)點(diǎn)的父節(jié)點(diǎn)是<html>節(jié)點(diǎn)。

HTML文檔中的標(biāo)記代表一個(gè)節(jié)點(diǎn)，有趣的是普通文本也是一個(gè)節(jié)點(diǎn)。段落節(jié)點(diǎn)<p>有1個(gè)子節(jié)點(diǎn):文本節(jié)點(diǎn)“Thank you for visiting my web page!”。

1.2節(jié)點(diǎn)類型

我們要如何區(qū)分這些不同類型的節(jié)點(diǎn)？ 答案在于DOM Node接口，尤其是Node.nodeType屬性。

Node.nodeType可以具有代表節(jié)點(diǎn)類型的以下值之一：

  • Node.ELEMENT_NODE

  • Node.ATTRIBUTE_NODE

  • Node.TEXT_NODE

  • Node.CDATA_SECTION_NODE

  • Node.PROCESSING_INSTRUCTION_NODE

  • Node.COMMENT_NODE

  • Node.DOCUMENT_NODE

  • Node.DOCUMENT_TYPE_NODE

  • Node.DOCUMENT_FRAGMENT_NODE

  • Node.NOTATION_NODE

常量有意義地指示節(jié)點(diǎn)類型：例如Node.ELEMENT_NODE代表元素節(jié)點(diǎn)，Node.TEXT_NODE代表文本節(jié)點(diǎn)，Node.DOCUMENT_NODE文檔節(jié)點(diǎn)，依此類推。

例如，讓我們選擇段落節(jié)點(diǎn)，然后查看其nodeType屬性：

const paragraph = document.querySelector('p');

paragraph.nodeType === Node.ELEMENT_NODE; // => true

代表整個(gè)節(jié)點(diǎn)文檔樹(shù)的節(jié)點(diǎn)類型為Node.DOCUMENT_NODE：

document.nodeType === Node.DOCUMENT_NODE; // => true

2. DOM元素

掌握了DOM節(jié)點(diǎn)的知識(shí)之后，現(xiàn)在該區(qū)分DOM節(jié)點(diǎn)和元素了。

如果你了解節(jié)點(diǎn)術(shù)語(yǔ)，那么答案是顯而易見(jiàn)的:元素是特定類型的節(jié)點(diǎn) element (Node.ELEMENT_NODE)，以及文檔、注釋、文本等類型。

簡(jiǎn)而言之，元素是使用HTML文檔中的標(biāo)記編寫的節(jié)點(diǎn)。 <html>，<head>，<title>，<body>，<h3>，<p>都是元素，因?yàn)樗鼈冇蓸?biāo)簽表示。

文檔類型，注釋，文本節(jié)點(diǎn)不是元素，因?yàn)樗鼈儧](méi)有使用標(biāo)簽編寫：

Node是節(jié)點(diǎn)的構(gòu)造函數(shù)，HTMLElement 是 JS DOM 中元素的構(gòu)造函數(shù)。段落既是節(jié)點(diǎn)又是元素，它同時(shí)是Node和HTMLElement的實(shí)例

const paragraph = document.querySelector('p');

paragraph instanceof Node;        // => true
paragraph instanceof HTMLElement; // => true

簡(jiǎn)單地說(shuō)，元素是節(jié)點(diǎn)的子類型，就像貓是動(dòng)物的子類型一樣。

3. DOM屬性：節(jié)點(diǎn)和元素

除了區(qū)分節(jié)點(diǎn)和元素之外，還需要區(qū)分只包含節(jié)點(diǎn)或只包含元素的DOM屬性。

節(jié)點(diǎn)類型的以下屬性評(píng)估為一個(gè)節(jié)點(diǎn)或節(jié)點(diǎn)集合（NodeList）：

node.parentNode; // Node or null

node.firstChild; // Node or null
node.lastChild;  // Node or null

node.childNodes; // NodeList

但是，以下屬性是元素或元素集合（HTMLCollection）：

node.parentElement; // HTMLElement or null

node.children;      // HTMLCollection

由于node.childNodes和node.children都返回子級(jí)列表，因此為什么要同時(shí)具有這兩個(gè)屬性？ 好問(wèn)題！

考慮以下包含某些文本的段落元素：

<p>
  <b>Thank you</b> for visiting my web page!
</p>

打開(kāi)演示，然后查看parapgraph節(jié)點(diǎn)的childNodes和children屬性：

const paragraph = document.querySelector('p');

paragraph.childNodes; // NodeList:       [HTMLElement, Text]
paragraph.children;   // HTMLCollection: [HTMLElement]

paragraph.childNodes集合包含2個(gè)節(jié)點(diǎn)： <b>Thank you</b>,，以及for visiting my web page!文本節(jié)點(diǎn)！

但是，paragraph.children集合僅包含1個(gè)項(xiàng)目：<b>Thank you</b>。

由于paragraph.children僅包含元素，因此此處未包含文本節(jié)點(diǎn)，因?yàn)槠漕愋褪俏谋荆?code>Node.TEXT_NODE），而不是元素（Node.ELEMENT_NODE）。

同時(shí)擁有node.childNodes和node.children，我們可以選擇要訪問(wèn)的子級(jí)集合：所有子級(jí)節(jié)點(diǎn)或僅子級(jí)是元素。

DOM文檔是節(jié)點(diǎn)的分層集合，每個(gè)節(jié)點(diǎn)可以具有父級(jí)和/或子級(jí)。如果了解節(jié)點(diǎn)是什么，那么了解DOM節(jié)點(diǎn)和元素之間的區(qū)別就很容易。

節(jié)點(diǎn)有類型，元素類型就是其中之一，元素由HTML文檔中的標(biāo)記表示。

感謝各位的閱讀！關(guān)于“DOM節(jié)點(diǎn)和元素之間有哪些區(qū)別”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(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
助
手