JavaScript DOM 1－ Node, HTMLElement之間到底是什么關(guān)系

weknow619 發(fā)布于2019-08-20 17:24 / 2610人閱讀

摘要：是一個(gè)是一個(gè)我們放在里面的文字也是一個(gè)再來(lái)看一張抽象了的圖上面這張圖，表示了等的繼承關(guān)系。所以其實(shí)這個(gè)時(shí)候應(yīng)該就很清楚它們之間的關(guān)系了。每一個(gè)都會(huì)有一個(gè)的變量來(lái)標(biāo)識(shí)它是哪一種類(lèi)型的。例如下圖所示到此為止，我們應(yīng)該弄清楚，以及的相關(guān)概念了。

先看一段最簡(jiǎn)單的HTML代碼：


    
        Document Example
    
    
        An HTML Document
        
            Text

它的DOM結(jié)構(gòu)可以表示成：

整個(gè)是一個(gè)樹(shù)狀結(jié)構(gòu)，在樹(shù)狀圖里面是不是有個(gè)“節(jié)點(diǎn)”，也就是‘node’的概念？
是的，圖中的每一個(gè)框框就是一個(gè)Node對(duì)象。"...."是一個(gè)node, "

...

"是一個(gè)node, 我們放在

里面的文字"Text"也是一個(gè)node.

再來(lái)看一張抽象了的圖：

上面這張圖，表示了Node, Element, HTMLElment等的繼承關(guān)系。所以其實(shí)這個(gè)時(shí)候應(yīng)該就很清楚它們之間的關(guān)系了。Document, Element都是不同類(lèi)型的node, HTMLElment又是一種類(lèi)型的Element, 而我們最熟悉的HTMLDivElment, HTMLInputElement等都是不同類(lèi)型的HTMLElment.

接下來(lái)看一張圖，圖片來(lái)自MDN

圖上的常量都是定義在Node類(lèi)上的，所以可以直接通過(guò)Node.DOCUMENT_NODE引用。每一個(gè)node都會(huì)有一個(gè)nodeType的變量來(lái)標(biāo)識(shí)它是哪一種類(lèi)型的node。例如下圖所示：

到此為止，我們應(yīng)該弄清楚node，Node以及HTMLElement的相關(guān)概念了。
ps: 文章里把Node叫做‘類(lèi)’，只是為了更好的理解它的概念，因?yàn)樵谠趀s6之前，ECMAScript并沒(méi)有‘Class’這個(gè)東西。

GPU云服務(wù)器云服務(wù)器 javascript_dom是什么前端到底是什么云計(jì)算到底是什么 python到底是什么

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83561.html

相關(guān)文章

JavaScript DOM 3 - 查找特定位置上的節(jié)點(diǎn)

摘要：針對(duì)類(lèi)似于對(duì)象，那就是返回包含此節(jié)點(diǎn)的子節(jié)點(diǎn)的對(duì)象。當(dāng)兩個(gè)元素之間有空格的時(shí)候，即使沒(méi)有寫(xiě)入文字，但是依然會(huì)有一個(gè)節(jié)點(diǎn)。返回該節(jié)點(diǎn)的前一個(gè)和后一個(gè)兄弟節(jié)點(diǎn)。返回此元素的去除空格元素的的子節(jié)點(diǎn)個(gè)數(shù)并沒(méi)有一個(gè)對(duì)于的與它對(duì)應(yīng)。首先把，接下來(lái)用于測(cè)試的html先貼出來(lái)： item list book 1 book 2 ...

bawn 2019-08-20 17:27 評(píng)論0 收藏0
從DOM選擇器的返回值說(shuō)起

摘要：原文發(fā)布在我的獨(dú)立博客上從選擇器的返回值說(shuō)起拋開(kāi)大大解放生產(chǎn)力的，使用獲取元素要使用方法，或類(lèi)似的，第一種情況下，根據(jù)獲取時(shí)，返回值是唯一的元素而根據(jù)等獲取時(shí)候，返回值是包含所有符合條件的多個(gè)元素的列表。原文發(fā)布在我的獨(dú)立博客上 ~：從DOM選擇器的返回值說(shuō)起拋開(kāi)大大解放生產(chǎn)力的jQuery，使用JS獲取元素要使用getElementById方法，或類(lèi)似的getElem...

lmxdawn 2019-08-21 10:31 評(píng)論0 收藏0
JavaScript中DOM的層次節(jié)點(diǎn)（一）

摘要：是針對(duì)和文檔的一個(gè)，描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù)，允許開(kāi)發(fā)人員添加修改刪除節(jié)點(diǎn)的一部分。類(lèi)型級(jí)定義了接口，該接口由中的所有節(jié)點(diǎn)類(lèi)型實(shí)現(xiàn)。添加的這些屬性分別對(duì)應(yīng)于每個(gè)元素中都存在的下列標(biāo)準(zhǔn)特性。 DOM是針對(duì)HTML和XML文檔的一個(gè)API，描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù)，允許開(kāi)發(fā)人員添加、修改、刪除節(jié)點(diǎn)的一部分。 DOM將HTML和XML文檔描繪成一個(gè)有多個(gè)節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)，節(jié)點(diǎn)分為12種不同的...

leap_frog 2019-08-19 17:19 評(píng)論0 收藏0
JavaScript筆記——常見(jiàn)DOM知識(shí)

摘要：前言本篇文章以介紹常見(jiàn)的節(jié)點(diǎn)知識(shí)元素操作方法為目的，其中也對(duì)一些比較容易忽略的問(wèn)題進(jìn)行簡(jiǎn)要說(shuō)明。此外，還有一些方式可以獲得相關(guān)的元素節(jié)點(diǎn)。利用字符串拼接使用字符串拼接的方法插入元素是效率最高的。前言本篇文章以介紹常見(jiàn)的DOM節(jié)點(diǎn)知識(shí)、DOM元素操作方法為目的，其中也對(duì)一些比較容易忽略的問(wèn)題進(jìn)行簡(jiǎn)要說(shuō)明。才疏學(xué)淺，如有紕漏之處或建議歡迎留下評(píng)論。 Node節(jié)點(diǎn) 首先，簡(jiǎn)單看看Node...

madthumb 2019-08-20 18:58 評(píng)論0 收藏0
如何形成一個(gè)完整的HTML對(duì)象

摘要：定義是一個(gè)由可以接收事件的對(duì)象實(shí)現(xiàn)的接口，并且可以為它們創(chuàng)建偵聽(tīng)器。重點(diǎn)分割線只有通過(guò)上面的繼承關(guān)系，我們得到的元素才是一個(gè)完整的對(duì)象，我們才能為它設(shè)置獲取屬性綁定事件添加樣式類(lèi)等操作。寫(xiě)在前面，本文將同步發(fā)布于Blog、掘金、segmentfault、知乎等處，如果本文對(duì)你有幫助，記得為我得到我的個(gè)人技術(shù)博客項(xiàng)目給個(gè)star哦。為何寫(xiě)這篇文章？你可能做Web開(kāi)發(fā)已經(jīng)有一段時(shí)間，...

freewolf 2019-08-23 10:28 評(píng)論0 收藏0