> For the complete documentation index, see [llms.txt](https://short-js.webf.zone/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://short-js.webf.zone/dom/htmlelement-and-node.md).

# HTMLElement and Node

The word **Node** can be referred back to Telecommunications Networks - *a device such as a computer or switch attached to a computer or telecommunications network, or a point in a network topology where lines intersect or terminate*. From there, it probably arrived in XML to represent any type of entity in a document e.g. a Comment node, a Text node, an Element node etc. Similarly, the representation of HTML DOM has various entities like tags, text content, comments, attributes etc. - all these are called **Nodes**.

With respect to HTML DOM, there are 12 different types of `Nodes`, out of which 5 are deprecated (![](https://1340960942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LES_S5I8eL1eRZf1hVF%2F-LES_SmYZAhAD2ZUCENB%2F-LES_TqyosbCZYSghiJ1%2Fdeprecated.png?generation=1528430982500058\&alt=media)). `HTMLElement` is a `Node` of type `1 (ELEMENT_NODE)`**.**

![](https://1340960942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LES_S5I8eL1eRZf1hVF%2F-LES_SmYZAhAD2ZUCENB%2F-LES_Tr-EffJ1UwhZFD7%2Fnode-types.png?generation=1528430982498238\&alt=media)

To construct these Nodes and build the DOM Tree, the browser implementations have Interfaces. The chain of these interfaces start at `Object` as the root.

![](https://1340960942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LES_S5I8eL1eRZf1hVF%2F-LES_SmYZAhAD2ZUCENB%2F-LES_Tr1j6k6nSSr4JtO%2Fhtmlelement-and-node.png?generation=1528430982515921\&alt=media)

Let's take an example to illustrate this.

```
<html>
    <head>
        <title>Document Title</title>
    </head>
    <body>
        <h1>Some heading</h1>
        <hr />
        <p>Paragraph text goes here.</p>
    </body>
</html>
```

In the above DOM structure, `<H1>`is an instance of `HTMLHeadingElement`. The properties available on `<H1>` instance would be inherited in a fashion - `HTMLHeadingElement` << `HTMLElement` << `Element` << `Node` << `EventTarget` << `Object`. For example, the two DOM properties of the `<H1>` element (1) `.childNodes` and (2) `.children` are inherited from `Node`. Another interesting thing about these two similar sounding properties is the difference between their results. The former will list *any* type of `Node` (one text node, in this case) and the later will list `Node`only of type `1 (ELEMENT_NODE)` (none, in this case).

![](https://1340960942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LES_S5I8eL1eRZf1hVF%2F-LES_SmYZAhAD2ZUCENB%2F-LES_Tr4qK5VLQjNdpd2%2Fchildren-and-childnodes.png?generation=1528430984014346\&alt=media)

To summarize, every `HTMLElement` is a `Node` but not vice versa. The most common type of `Node` which is not an `HTMLElement` is `TEXT_NODE`.
