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

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

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

先看一段最簡單的HTML代碼：


    
        Document Example
    
    
        An HTML Document
        
            Text

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

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

...

"是一個node, 我們放在

里面的文字"Text"也是一個node.

再來看一張抽象了的圖：

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

接下來看一張圖，圖片來自MDN

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/83561.html

相關(guān)文章

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

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

bawn 2019-08-20 17:27 評論0 收藏0
從DOM選擇器的返回值說起

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

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

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

leap_frog 2019-08-19 17:19 評論0 收藏0
JavaScript筆記——常見DOM知識

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

madthumb 2019-08-20 18:58 評論0 收藏0
如何形成一個完整的HTML對象

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

freewolf 2019-08-23 10:28 評論0 收藏0