🏠
📚
Aug 27, 2016

Beginner's guide to DOM manipulation

DOM stands for Document Object Model. Every html page is internally(to browser) represented as a tree of objects. This tree is called the DOM tree.

Whenever you want to change the content of the page dynmically, e.g if a user clicks a button and you would like to show a message on the page, you need to use DOM manipulation.

To manipulate the DOM you need to be able to access it. To do that, you need to use the document object.

Document object is a global object in the browser. It is the root of the DOM tree. It represents the html page. It has properties and methods that allow you to access and manipulate the html page.

Here's how you can access the document object in the browser console.

document // type and press enter
document // type and press enter

For the scope of this article, we are going to use this hosted html page - https://2357228.playcode.io/

The code for this page is as follows.

<!DOCTYPE html>
<html>
<head>
    <title>Simple Button Example</title>
    <style>
        #myButton {
            padding: 10px 20px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        #message {
            display: none; /* Initially hidden */
            margin-top: 20px;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <button id="myButton">Click Me</button>
    <div id="message"></div>

    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            document.getElementById('message').textContent = 'Hello, World!';
            document.getElementById('message').style.display = 'block'; // Make it visible
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Simple Button Example</title>
    <style>
        #myButton {
            padding: 10px 20px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        #message {
            display: none; /* Initially hidden */
            margin-top: 20px;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <button id="myButton">Click Me</button>
    <div id="message"></div>

    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            document.getElementById('message').textContent = 'Hello, World!';
            document.getElementById('message').style.display = 'block'; // Make it visible
        });
    </script>
</body>
</html>

Accessings the DOM tree

We will use the methods of document object to access the DOM tree. Here's a list of methods which enable us to access the DOM tree.

  1. getElementById()

This method returns the element with the specified id. This method returns a single element in HTMLElement type object.

document.getElementById('myButton')
document.getElementById('myButton')
  1. getElementsByClassName()

This method returns the elements with the specified class name. This method returns a list of elements in HTMLCollection type object.

document.getElementsByClassName('myButton')
document.getElementsByClassName('myButton')
  1. getElementsByTagName()

This method returns the elements with the specified tag name. This method returns a list of elements in HTMLCollection type object.

document.getElementsByTagName('button')
document.getElementsByTagName('button')
  1. querySelector()

This method returns the first element that matches the specified CSS selector. This method returns a single element in HTMLElement type object.

document.querySelector('#myButton')
document.querySelector('#myButton')
  1. querySelectorAll()

This method returns all the elements that match the specified CSS selector. This method returns a list of elements in NodeList type object.

document.querySelectorAll('#myButton')
document.querySelectorAll('#myButton')

Manipulating the DOM tree

Once you have access to the DOM tree, you can manipulate it. You can add remove elements from tree, you can change the content of the elements, you can even modify the properties of the elements.

Let's see how we can do this.

Modifying the content of the elements

  1. element.textContent

You can modify the content of the element using the textContent property. First you need to access the element using the methods we discussed above. Then you can use the textContent property to modify the content of the element.

  1. element.innerHTML

You can modify the content of the element using the innerHTML property. First you need to access the element using the methods we discussed above. Then you can use the innerHTML property to modify the content of the element.

Try out sample modifications below in the browser console.

Modifying the properties of the elements

  1. element.setAttribute() - You can modify the properties of the element using the setAttribute() method.

  2. element.removeAttribute() - You can remove the properties of the element using the removeAttribute() method.

Adding and removing elements from the DOM tree

  1. element.appendChild() - You can add an element to the DOM tree using the appendChild() method.

  2. element.removeChild() - You can remove an element from the DOM tree using the removeChild() method.

  3. element.replaceChild() - You can replace an element from the DOM tree using the replaceChild() method.

  4. element.cloneNode() - You can clone an element from the DOM tree using the cloneNode() method.

  5. element.insertBefore() - You can insert an element before another element in the DOM tree using the insertBefore() method.

Event handling

To make your website interactive, you need to handle events. Events are actions that happen in the browser, such as a user clicking a button, hovering over an element, or submitting a form. To be more specific -

  • Mouse events: click, mouseover, mouseout, mousedown, mouseup, mousemove
  • Keyboard events: keydown, keyup, keypress
  • Form events: submit, change, focus, blur  
  • Document/Window events: load, DOMContentLoaded, resize, scroll

You can add event listeners to the elements in the DOM tree. You can add event listeners to the elements using the addEventListener() method.

element.addEventListener(type, listener, options);
element.addEventListener(type, listener, options);
  1. type - The type of the event.
  2. listener - The function to be called when the event occurs.
  3. options - The options for the event listener.

When an event occurs, an event object is created and passed as an argument to the event listener function. This object contains information about the event, such as the target element, the type of event, and any specific data related to the event (e.g., mouse coordinates, key pressed)

Here's how you can add an event listener to the button element.

If you refer our original sample page, you would notice that we have click event listener on the button.

Event Propagation

An event goes through three phases:

  1. Capturing phase - The event starts at the top of the DOM tree and trickles down to the target element.

  2. Target phase - The event reaches the target element.

  3. Bubbling phase - The event bubbles up from the target element to the top of the DOM tree. This is the default phase.

Event Delegation

Event delegation is a technique for adding event listeners to a parent element instead of adding them to each child element. This is useful when you have a lot of child elements and you don't want to add event listeners to each of them.

Here's a quick example -

<!DOCTYPE html>
<html>
<head>
    <title>Event Delegation</title>
    <style>
        #item-container {
            list-style-type: none;
            padding: 0;
        }
        #item-container li {
            padding: 8px;
            border: 1px solid #ccc;
            margin-bottom: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul id="item-container">
        <li data-item-id="1">Item 1</li>
        <li data-item-id="2">Item 2</li>
        <li data-item-id="3">Item 3</li>
    </ul>
    <p id="selected-item"></p>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const itemContainer = document.getElementById('item-container');
            const selectedItemParagraph = document.getElementById('selected-item');

            itemContainer.addEventListener('click', function(event) {
                if (event.target && event.target.nodeName === 'LI') {
                    const itemId = event.target.dataset.itemId;
                    selectedItemParagraph.textContent = 'You clicked on Item ' + itemId;
                }
            });
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Event Delegation</title>
    <style>
        #item-container {
            list-style-type: none;
            padding: 0;
        }
        #item-container li {
            padding: 8px;
            border: 1px solid #ccc;
            margin-bottom: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul id="item-container">
        <li data-item-id="1">Item 1</li>
        <li data-item-id="2">Item 2</li>
        <li data-item-id="3">Item 3</li>
    </ul>
    <p id="selected-item"></p>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const itemContainer = document.getElementById('item-container');
            const selectedItemParagraph = document.getElementById('selected-item');

            itemContainer.addEventListener('click', function(event) {
                if (event.target && event.target.nodeName === 'LI') {
                    const itemId = event.target.dataset.itemId;
                    selectedItemParagraph.textContent = 'You clicked on Item ' + itemId;
                }
            });
        });
    </script>
</body>
</html>