The distinction between a node and an element can occasionally be difficult to make.
The word node is a general term that refers to any object in the DOM tree. The document is just one example of a native DOM element. It's also possible to use another HTML tag, like <div> or <p>.
A node of the particular node type Node.ELEMENT_NODE has a value of 1.
Some node types
| Node Type | Description |
|---|---|
| Element | Represents HTML or XML elements such as <div>, <p>, <a>, or <img>. |
| Text | Represents the text content of an HTML element. |
| Comment | Represents comments in an HTML document. |
| Attribute | Represents attributes of an HTML element. |
As well as having child nodes like text or other element nodes, element nodes can also contain attributes. In an HTML element, text nodes represent the text content. To add comments to the document, we use the <!-- --> tags around the comment nodes. Elements in HTML that have attributes are represented by attribute nodes.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>Node Types</title>
</head>
<body>
<div id="main">
<h1>Node Types</h1>
<p>Main types of nodes in the DOM:</p>
<ul>
<li>Element Nodes</li>
<li>Text Nodes</li>
<li>Comment Nodes</li>
<li>Attribute Nodes</li>
</ul>
</div>
</body>
</html>
The element nodes in this example are <html>, <head>, <title>, <body>, <div>, <h1>, <p>, <ul>, and <li>. The text contained in the <title>, <h1>,<p>, and <li> elements is included in text nodes. The id attribute of the div element is one of the attribute nodes.
In the next post we're going to learn how to select elements.
Top comments (0)