Element vs Node

Imagine that a web page is constructed by a tree of nodes. Considering a common HTML page has a structure like this:

<!doctype html>
<html>
    <head>
        <meta ... />
        <title>...</title>
    </head>
    <body>
        ...
    </body>
</html>

The root node of tree is a document node which has two children, the doctype and the html tag. The html tag is constructed by its children, head and body, and so on.

Each node has a property named nodeType which is a number to identity its type. It can be used to distinguish the kind of node from other one. For example, the following div has only one child node whose value is Hello:

<div>Hello</div>

The div node is an element node, while its child node (Hello) is a text node. The following table taken from MDN shows the popular node types:

Node.ELEMENT_NODE (1): An element node which is a HTML tag, such as <div>, <p> , etc.
Node.TEXT_NODE (3): The actual text inside an element node
Node.COMMENT_NODE (8): A comment node, such as 
Node.DOCUMENT_NODE (9): A document node
Node.DOCUMENT_TYPE_NODE (10): A document type node, such as <!DOCTYPE html>

In a nutshell, a node represents a single node in the document tree, and an element is a particular type of node which is a HTML tag.

← double quotes vs single quote

encodeURI vs encodeURIComponent →

Hit the Subscribe button for the latest news on my tools. No spam. Ever!

Element vs Node

Products

Resources

Follow me