Working with the DOM in Vanilla JavaScript

Introduction

The Document Object Model (DOM) is a fundamental concept in web development. Understanding how to manipulate the DOM using vanilla JavaScript allows developers to create dynamic and interactive web pages—without relying on external libraries like jQuery. Let’s explore the core techniques for working directly with the DOM in modern JavaScript.

1. Selecting Elements

To interact with elements, you first need to select them. Modern JavaScript provides several methods:

• document.getElementById('id') – Selects a single element by its unique ID.
• document.querySelector('selector') – Returns the first element matching a CSS selector.
• document.querySelectorAll('selector') – Returns a NodeList of all matching elements.

// Examples
const heading = document.getElementById('main-title');
const firstButton = document.querySelector('.btn');
const allItems = document.querySelectorAll('li');

2. Modifying Content and Attributes

DOM elements’ content and attributes can be changed dynamically:

• .textContent and .innerHTML – Change or retrieve an element’s text or HTML content.
• .setAttribute('attr', 'value') – Set attributes like src, href, or alt.
• .classList.add(), .classList.remove(), and .classList.toggle() – Modify CSS classes easily.

heading.textContent = "Welcome to fulldev.pl!";
firstButton.setAttribute('disabled', 'true');
firstButton.classList.toggle('active');

3. Creating and Inserting Elements

You can create new elements and insert them into the DOM:

const newListItem = document.createElement('li');
newListItem.textContent = 'Vanilla JavaScript';

document.querySelector('ul').appendChild(newListItem);

• createElement – Makes a new element.
• appendChild, insertBefore, prepend – Insert elements into the DOM.

4. Removing and Replacing Elements

Elements can be removed or replaced as needed:

// Remove an element
document.querySelector('.old-item').remove();

// Replace an element
const newEl = document.createElement('p');
newEl.textContent = 'This is new!';
const oldEl = document.getElementById('to-replace');
oldEl.parentNode.replaceChild(newEl, oldEl);

5. Handling Events

Responsive interfaces rely on event handling with addEventListener:

firstButton.addEventListener('click', function() {
  alert('Button clicked!');
});

• Events like click, input, mouseover, etc., can trigger JavaScript actions.

6. Traversing the DOM

Navigate between elements using DOM relationships:

• .parentNode, .children, .nextElementSibling, .previousElementSibling

const ul = document.querySelector('ul');
console.log(ul.children); // HTMLCollection of li elements

Conclusion

Mastering DOM manipulation with vanilla JavaScript is essential for every web developer. It leads to faster, more performant code and a deeper understanding of how browsers render and manage web pages. Explore these techniques, practice often, and you’ll soon be building rich interfaces without third-party dependencies!