JavaScript DOM 1－ Node, HTMLElement之間究竟是什麼關係

時間 2019-12-06

標籤 javascript dom node htmlelement 之間究竟什麼關係欄目 JavaScript 简体版

原文原文鏈接

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

<html>
    <head>
        <title>Document Example</title>
    </head>
    <body>
        <h1>An HTML Document</h1>
        <div>
            <p>Text</p>
        </div>
    </body>
</html>

它的DOM結構能夠表示成：
node

整個是一個樹狀結構，在樹狀圖裏面是否是有個「節點」，也就是‘node’的概念？
是的，圖中的每個框框就是一個Node對象。'<html>....</html>'是一個node, '<div>...</div>'是一個node, 咱們放在<p>裏面的文字'Text'也是一個node.es6

再來看一張抽象了的圖：
spa

上面這張圖，表示了Node, Element, HTMLElment等的繼承關係。因此其實這個時候應該就很清楚它們之間的關係了。Document, Element都是不一樣類型的node, HTMLElment又是一種類型的Element, 而咱們最熟悉的HTMLDivElment, HTMLInputElement等都是不一樣類型的HTMLElment.code

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

圖上的常量都是定義在Node類上的，因此能夠直接經過Node.DOCUMENT_NODE引用。每個node都會有一個nodeType的變量來標識它是哪種類型的node。例以下圖所示：
對象

到此爲止，咱們應該弄清楚node，Node以及HTMLElement的相關概念了。
ps: 文章裏把Node叫作‘類’，只是爲了更好的理解它的概念，由於在在es6以前，ECMAScript並無‘Class’這個東西。繼承