JavaScript DOM Nodes

Understanding DOM Nodes

The Document Object Model (DOM) is a foundational concept in web development, acting as the interface between HTML documents and JavaScript. When a web page loads, the browser parses the HTML and builds the DOM — a live, in-memory tree of objects that JavaScript can read and change. Every change you make to the DOM is reflected on the page instantly, which is what makes interactive web applications possible.

This guide covers DOM nodes: what they are, the different types you'll encounter, how to identify them, and how to create, add, remove, and replace them. By the end you'll understand the building blocks that every higher-level DOM technique — like selecting elements or traversing the tree — is built on.

What is a DOM Node?

A node is the most basic unit of the DOM tree. Everything in a document — elements, the text inside them, attributes, and even comments — is represented as a node. Each node is an object that inherits from the built-in Node class, so they all share a common set of properties (nodeType, nodeName, parentNode, childNodes, and so on) used for navigation and manipulation.

A useful way to picture it: the HTML you write is the recipe, and the DOM is the live object the browser cooks from that recipe. Once the page is loaded, you no longer edit the HTML text — you edit the nodes.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Nodes Example</title>
</head>
<body>
    <div id="example">
        <!-- This is a comment node -->
        <p>This is a text node within an element node.</p>
    </div>
    <script>
        let exampleDiv = document.getElementById('example');
        exampleDiv.style.border = '2px solid blue'; // Highlight the div element
        exampleDiv.style.padding = '10px';
    </script>
</body>
</html>

Try it Yourself »

Explanation: In this example, we access the div with the ID example and apply CSS styles to visually distinguish it. This demonstrates how to manipulate an element node's style properties directly, making it more noticeable on the page.

The Different Types of DOM Nodes

Every node carries a numeric nodeType property that tells you what kind of node it is. The most common types you'll work with are:

`nodeType`	Constant	Meaning
`1`	`Node.ELEMENT_NODE`	An HTML element such as `<div>` or `<p>`
`3`	`Node.TEXT_NODE`	The text inside an element (including whitespace)
`8`	`Node.COMMENT_NODE`	An HTML comment (`<!-- ... -->`)
`9`	`Node.DOCUMENT_NODE`	The `document` object itself, the tree root

A common surprise for beginners: whitespace counts as text nodes. The line breaks and indentation between your tags create empty text nodes, which is why childNodes often returns more items than you expect. (If you only want element children and want to skip those whitespace text nodes, use children instead of childNodes.) Attributes are also nodes, but modern code reads them with getAttribute() / setAttribute() rather than walking attribute nodes directly.

The example below clicks through the child nodes of a <div> and reports the type of each one:

<!DOCTYPE html>
<html>
<head>
    <title>Node Types Interactive Example</title>
    <style>
        #info {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
        #output {
            border: 1px solid #ccc;
            padding: 10px;
        }
        button {
            cursor: pointer;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="info">
        <!-- This is a comment node -->
        <p>Element node with a <span>child element node</span> and some text.</p>
    </div>
    <button onclick="displayNodeTypes()">Show Node Types</button>
    <div id="output">Node types will be displayed here.</div>
    <script>
        function displayNodeTypes() {
            const infoDiv = document.getElementById('info');
            const outputDiv = document.getElementById('output');
            outputDiv.innerHTML = '';  // Clear previous output
            const nodeTypes = [];

            // Iterate over all child nodes of the div
            infoDiv.childNodes.forEach(node => {
                let typeDescription = '';
                switch(node.nodeType) {
                    case Node.ELEMENT_NODE:
                        typeDescription = 'Element node: ' + node.tagName;
                        break;
                    case Node.TEXT_NODE:
                        // Trim text content and check if it's not empty
                        let textContent = node.textContent.trim();
                        if (textContent) {
                            typeDescription = 'Text node: "' + textContent + '"';
                        }
                        break;
                    case Node.COMMENT_NODE:
                        typeDescription = 'Comment node: "' + node.textContent.trim() + '"';
                        break;
                }

                // Only add non-empty descriptions
                if (typeDescription) {
                    nodeTypes.push(typeDescription);
                    const p = document.createElement('p');
                    p.textContent = typeDescription;
                    outputDiv.appendChild(p);
                }
            });

            // If no nodes are visible or found
            if (nodeTypes.length === 0) {
                outputDiv.textContent = 'No visible nodes found.';
            }
        }
    </script>
</body>
</html>

Try it Yourself »

The HTML document demonstrates how to identify and display different types of DOM nodes (like element, text, and comment nodes). It includes a styled section to show these nodes, a button that triggers a JavaScript function to analyze and list these nodes, and an area to display the results. The JavaScript function inspects each node within a designated part of the document, categorizes it, and outputs its type and details.

Manipulating DOM Nodes

Interactive pages are built by changing nodes after the page has loaded. The four operations you'll reach for most often are creating, adding, removing, and replacing nodes. For a broader tour of the techniques built on top of these, see DOM manipulation.

Creating and Adding Nodes

Creating a node and adding it are two separate steps. document.createElement() makes a detached node that isn't on the page yet; appendChild() (or append(), prepend(), insertBefore()) is what actually inserts it into the tree:

<!DOCTYPE html>
<html>
<head>
    <title>Add Node Example</title>
</head>
<body>
    <button onclick="addNewParagraph()">Add Paragraph</button>
    <script>
        function addNewParagraph() {
            let newNode = document.createElement('p');
            newNode.textContent = 'This is a new paragraph.';
            document.body.appendChild(newNode);
        }
    </script>
</body>
</html>

Try it Yourself »

Explanation: This example includes a button that, when clicked, triggers a function to create a new paragraph element (<p>) and appends it to the body of the document. It demonstrates how JavaScript can be used to dynamically add content to a page, which is particularly useful for applications that need to update in real time without reloading the page.

Removing Nodes

To take a node off the page, call removeChild() on its parent, or — more simply in modern browsers — call node.remove() directly on the node itself. The example uses removeChild() so you can see the parent/child relationship explicitly:

<!DOCTYPE html>
<html>
<head>
    <title>Remove Node Example</title>
</head>
<body>
    <div id="container">
        <p id="toBeRemoved">This paragraph will be removed. <button onclick="removeParagraph()">Remove</button></p>
    </div>
    <script>
        function removeParagraph() {
            let parentNode = document.getElementById('container');
            let childNode = document.getElementById('toBeRemoved');
            parentNode.removeChild(childNode);
        }
    </script>
</body>
</html>

Try it Yourself »

Explanation: This script provides a practical demonstration of removing a DOM element using a button embedded within the paragraph itself. The removeChild() method is used to remove the specified element, showcasing a dynamic user-initiated action that alters the document structure directly.

Replacing Nodes

replaceChild(newNode, oldNode) swaps one node for another in a single step, preserving the old node's position in the tree:

<!DOCTYPE html>
<html>
<head>
    <title>Replace Node Example</title>
</head>
<body>
    <div id="oldElement">This element will be replaced. <button onclick="replaceElement()">Replace</button></div>
    <script>
        function replaceElement() {
            let newNode = document.createElement('div');
            newNode.textContent = 'This is a replacement.';
            let oldNode = document.getElementById('oldElement');
            oldNode.parentNode.replaceChild(newNode, oldNode);
        }
    </script>
</body>
</html>

Try it Yourself »

Explanation: In this interactive example, a button triggers the replacement of an existing div with a newly created div. This illustrates the replaceChild() method, which is particularly useful in situations where an element needs to be updated based on user actions or external events, such as receiving new data from a server.

Best Practices and Tips

Minimize DOM manipulations: Each change can trigger the browser to recalculate layout (a reflow) and redraw the page (a repaint). Batch your changes instead of touching the DOM in a tight loop.
Read, then write: Mixing reads (like offsetHeight) and writes inside a loop forces repeated layout thrashing. Group all your reads together and all your writes together.
Build off-screen, insert once: Use a DocumentFragment (shown below) to assemble many elements before inserting them in a single operation.
Cache your selections: Store getElementById/querySelector results in a variable rather than re-querying the same element repeatedly. See DOM performance optimization for more.

Info

Always ensure cross-browser compatibility when performing DOM manipulations. Testing across different browsers helps prevent unexpected behavior and ensures a consistent user experience.

DocumentFragment Example

A DocumentFragment is a lightweight, off-screen container for nodes. Because it isn't part of the live document, appending nodes to it costs nothing in layout — the browser only reflows once, when you insert the whole fragment into the page. This makes it ideal for adding many elements at once:

<!DOCTYPE html>
<html>
<head>
    <title>DocumentFragment Example</title>
</head>
<body>
    <div id="list-container">
        <h2>Item List</h2>
        <ul id="item-list">
            <!-- Items will be added here -->
        </ul>
        <button id="add-items">Add 100 Items</button>
    </div>

    <script>
        const itemList = document.getElementById('item-list');
        const addItemsButton = document.getElementById('add-items');

        addItemsButton.addEventListener('click', () => {
            // Create a DocumentFragment
            const fragment = document.createDocumentFragment();

            // Add 100 list items to the fragment
            for (let i = 1; i <= 100; i++) {
                const listItem = document.createElement('li');
                listItem.textContent = `Item ${i}`;
                fragment.appendChild(listItem);
            }

            // Append the fragment to the item list
            itemList.appendChild(fragment);
        });
    </script>
</body>
</html>

Try it Yourself »

We start by selecting the <ul> element where the new items will be added and the button that will trigger the addition.
When the "Add 100 Items" button is clicked, we create a DocumentFragment object.
We then create 100 <li> elements in a loop, set their text content, and append each to the DocumentFragment.
Finally, we append the DocumentFragment to the <ul> element. Since the fragment is not part of the live DOM during the construction phase, this approach minimizes the reflows and repaints, enhancing performance.

Using DocumentFragment is particularly useful when you need to add a large number of elements to the DOM at once, as it reduces the overhead associated with multiple reflows and repaints, leading to smoother and faster updates.

DOM nodes vs DOM trees

DOM nodes and DOM trees are related concepts, but they refer to different aspects of how a web document is structured and manipulated:

DOM Nodes: A DOM node is an individual component within the Document Object Model (DOM). Every element, text, comment, and attribute within an HTML or XML document is considered a node. Nodes are the fundamental building blocks of a document. For example, an <h1> tag, the text within that tag, and even the attributes of that tag (like class="title") are all separate nodes.
DOM Tree: The DOM tree refers to the entire structure or hierarchy of nodes as they are organized in the document. It is a tree-like representation that shows how all the nodes in a document are related to each other. Nodes in this tree have parent-child relationships, just like folders and files might on your computer. For instance, in an HTML document, the <body> node might be a parent node, with several child nodes like <div>, <p>, and <img> that represent different parts of the web page.

In simple terms, you can think of a DOM node as a single point or a piece of a larger puzzle, while the DOM tree represents the complete puzzle or the whole set of relationships among these points. The DOM tree is useful for navigating and manipulating the structure of a document via programming languages like JavaScript, as it allows developers to find (select), modify, or update elements efficiently within the nested hierarchy.

Conclusion

Nodes are the atoms of the DOM. Once you can recognize the different node types, read a node's nodeType, and confidently create, add, remove, and replace nodes, every higher-level DOM task becomes approachable. Keep performance in mind — batch your changes and reach for a DocumentFragment when inserting many elements at once.

Practice

Which of the following are types of DOM nodes in a web document?

Understanding DOM Nodes

What is a DOM Node?

The Different Types of DOM Nodes

Manipulating DOM Nodes

Creating and Adding Nodes

Removing Nodes

Replacing Nodes

Best Practices and Tips

DocumentFragment Example

DOM nodes vs DOM trees

Conclusion

What to read next

Practice