DOM節(jié)點(diǎn)和元素之間有哪些區(qū)別-創(chuàng)新互聯(lián)
這篇文章給大家分享的是有關(guān)DOM節(jié)點(diǎn)和元素之間有哪些區(qū)別的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
為衡水等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及衡水網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、衡水網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！文檔對象模型(DOM)是一個(gè)將HTML或XML文檔視為樹形結(jié)構(gòu)的接口，其中每個(gè)節(jié)點(diǎn)都是文檔的一個(gè)對象。DOM還提供了一組方法來查詢樹、改變結(jié)構(gòu)、樣式。
DOM 還使用術(shù)語元素(Element)它與節(jié)點(diǎn)非常相似。那么，DOM節(jié)點(diǎn)和元素之間有什么區(qū)別呢?
1. DOM節(jié)點(diǎn)
理解節(jié)點(diǎn)和元素之間區(qū)別的關(guān)鍵是理解節(jié)點(diǎn)是什么。
更高的角度來看，DOM文檔由節(jié)點(diǎn)層次結(jié)構(gòu)組成。 每個(gè)節(jié)點(diǎn)可以具有父級和/或子級。
看看下面的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):
<html>是文檔樹中的一個(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)文檔樹的節(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ù)語，那么答案是顯而易見的:元素是特定類型的節(jié)點(diǎn)element (Node.ELEMENT_NODE)，以及文檔、注釋、文本等類型。
簡而言之，元素是使用HTML文檔中的標(biāo)記編寫的節(jié)點(diǎn)。<html>，<head>，<title>，<body>，<h3>，<p>都是元素，因?yàn)樗鼈冇蓸?biāo)簽表示。
文檔類型，注釋，文本節(jié)點(diǎn)不是元素，因?yàn)樗鼈儧]有使用標(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é)點(diǎn)的子類型，就像貓是動(dòng)物的子類型一樣。
3. DOM屬性：節(jié)點(diǎn)和元素
除了區(qū)分節(jié)點(diǎn)和元素之外，還需要區(qū)分只包含節(jié)點(diǎn)或只包含元素的DOM屬性。
節(jié)點(diǎn)類型的以下屬性評估為一個(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都返回子級列表，因此為什么要同時(shí)具有這兩個(gè)屬性？ 好問題！
考慮以下包含某些文本的段落元素：
<p> <b>Thank you</b> for visiting my web page! </p>
打開演示，然后查看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，我們可以選擇要訪問的子級集合：所有子級節(jié)點(diǎn)或僅子級是元素。
DOM文檔是節(jié)點(diǎn)的分層集合，每個(gè)節(jié)點(diǎn)可以具有父級和/或子級。如果了解節(jié)點(diǎn)是什么，那么了解DOM節(jié)點(diǎn)和元素之間的區(qū)別就很容易。
節(jié)點(diǎn)有類型，元素類型就是其中之一，元素由HTML文檔中的標(biāo)記表示。
感謝各位的閱讀！關(guān)于“DOM節(jié)點(diǎn)和元素之間有哪些區(qū)別”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
網(wǎng)頁題目：DOM節(jié)點(diǎn)和元素之間有哪些區(qū)別-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://www.rwnh.cn/article14/copide.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、搜索引擎優(yōu)化、云服務(wù)器、關(guān)鍵詞優(yōu)化、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- python中index的使用方法-創(chuàng)新互聯(lián)
- Python可以做什么-創(chuàng)新互聯(lián)
- Linux與windows的對比-創(chuàng)新互聯(lián)
- 怎么在TP5中使用bootstrap實(shí)現(xiàn)一個(gè)單圖上傳插件-創(chuàng)新互聯(lián)
- CSSclear屬性給float帶來的影響有哪些-創(chuàng)新互聯(lián)
- 23種設(shè)計(jì)模式知識(shí)點(diǎn)詳細(xì)解析(含PDF學(xué)習(xí)資料)-創(chuàng)新互聯(lián)
- 微信營銷與微博營銷的區(qū)別請問微博和微信有什么區(qū)別？-創(chuàng)新互聯(lián)
- 電商類小程序的特色是什么？ 2014-07-30
- 成都網(wǎng)站建設(shè)網(wǎng)絡(luò)推廣小程序開發(fā)公司 2022-12-09
- 小程序商家是如何盈利的 2016-08-07
- 小程序?qū)χ腔壅?wù)的優(yōu)勢和功能板塊 2016-12-11
- 微信小程序開發(fā)用什么語言？ 2022-12-01
- 全網(wǎng)營銷時(shí)代，微信小程序如何進(jìn)行運(yùn)營推廣？ 2015-06-23
- 在佛山和臺(tái)州微信小程序開發(fā)多少錢影響因素有哪些 2022-11-27
- 小程序開發(fā)公司：App和小程序開發(fā)成本對比 2023-02-13
- 小程序開發(fā)哪家公司有實(shí)力 2022-08-28
- 挑選免費(fèi)小程序模板前，都要注意些什么 2016-10-04
- 為什么說，小程序是產(chǎn)業(yè)互聯(lián)網(wǎng)的“大趨勢”？ 2016-08-11
- 成都創(chuàng)新互聯(lián)，專注小程序開發(fā) 2022-07-28