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文檔:

My?Page

Thank?you?for?visiting?my?web?page!

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

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

子有3個(gè)子節(jié)點(diǎn)的節(jié)點(diǎn):注釋節(jié)點(diǎn)?，標(biāo)題

，段落

。節(jié)點(diǎn)的父節(jié)點(diǎn)是節(jié)點(diǎn)。

HTML文檔中的標(biāo)記代表一個(gè)節(jié)點(diǎn)，有趣的是普通文本也是一個(gè)節(jié)點(diǎn)。段落節(jié)點(diǎn)

有1個(gè)子節(jié)點(diǎn):文本節(jié)點(diǎn)“Thank you for visiting my web page!”。

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

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

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

• 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)類(lèi)型：例如Node.ELEMENT_NODE代表元素節(jié)點(diǎn)，Node.TEXT_NODE代表文本節(jié)點(diǎn)，Node.DOCUMENT_NODE文檔節(jié)點(diǎn)，依此類(lèi)推。

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

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

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

代表整個(gè)節(jié)點(diǎn)文檔樹(shù)的節(jié)點(diǎn)類(lèi)型為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)的:元素是特定類(lèi)型的節(jié)點(diǎn)?element (Node.ELEMENT_NODE)，以及文檔、注釋、文本等類(lèi)型。

簡(jiǎn)而言之，元素是使用HTML文檔中的標(biāo)記編寫(xiě)的節(jié)點(diǎn)。，，