DEV Community: Folacodes

Exploring JavaScript's Document Object Model (DOM). Part 2

Folacodes — Wed, 17 Sep 2025 10:30:18 +0000

I started sharing what I learnt from a Vanilla JS course in this blogpost, this article is a continuation of that post, a part 2 if you will.

In the previous article, we explored in full details what the DOM is, how to select elements from it using various methods such as by id, name, classname and also via CSS Selectors. You should check it out to get up to speed about elements selection.

In this article we'd explore what to do with the elements selected, but first, let's uncover some fascinating facts about the DOM that might change how you think about it entirely.

DOM FACTS: The Hidden Truth

The HTML file and the DOM aren't the exact same thing. This is crucial to understand - they're related but separate entities.
Here's something that might surprise you: try creating an HTML file with just <h1>Hello World</h1> and nothing else. When you open it in a browser and inspect the DOM, you'll find <head>, <body>, and <html> tags that you never wrote. The browser silently adds these essential elements behind the scenes.
The above goes to show that the <head> and the <body> tags can be implicit in an HTML file, but they're compulsory for the DOM.
The DOM is alive, your HTML file is static. If JavaScript changes the DOM (adding elements, changing text), those changes only exist in memory. Hit "view source" and you'll see your original HTML unchanged. This is why developers use browser dev tools instead of "view source" when debugging.
It's why the "view source" (which shows the exact html file) and inspecting in the browser (which typically includes the extra things the DOM adds) are different.
The DOM treats everything as nodes - not just elements. Comments, text, even the whitespace between tags are all separate nodes with their own properties and methods.
Whitespace is invisible but real. That space between <div>One</div><div>Two</div> becomes an actual text node in the DOM. This is why sometimes you get unexpected spacing or why element.firstChild returns a text node instead of the element you expected.
Browsers are HTML fixers, not rule enforcers. The DOM doesn't just parse your HTML - it actively repairs it:

Unclosed tags get auto-closed
Invalid nesting gets re-arranged (like putting a <div> inside a <p> )
Missing attributes get default values
Malformed tables get restructured with proper <tbody> elements.

Element Manipulation: The Essentials

Most times, the reason for selecting elements in the DOM is to manipulate them. Here are the core methods:

1) Accessing and modifying text content:

Use textContent (for plain text), innerText (for visible text only), and innerHTML (for HTML content). Each serves different purposes depending on whether you want to preserve formatting or include HTML tags.

// JavaScript
element.textContent = "Plain text - safe from XSS";
element.innerText = "Respects CSS styling and visibility";  
element.innerHTML = "<strong>Can include HTML</strong> - use carefully";

2) Creating and Removing Elements:

Creating elements is like 3D printing for the web:

// JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = 'I exist in memory but not on the page yet';
document.body.appendChild(newDiv); // Now it's born into the visible DOM

Removing elements has a quirk - you can't delete yourself:

// The modern way
element.remove();

// The traditional way (still widely used)
element.parentNode.removeChild(element);

3) Adding Event Listeners: Making the DOM Interactive

Events are how the DOM talks back to JavaScript. But here's what most tutorials don't tell you, there are different ways to bind events, and they behave very differently.

Two Ways to Bind Events

1) Event Properties - The Simple But Limited Way

element.onclick = function() {
    console.log('First handler');
};

element.onclick = function() {
    console.log('Second handler - this overwrites the first!');
};
// Only "Second handler" will run

The problem with this method is that it's just a property assignment. Like any object property, setting it twice overwrites the previous value. It uses the getter/setter pattern under the hood, you're literally replacing the function stored in the onclick property.

2) addEventListener - The Powerful Approach

element.addEventListener('click', function() {
    console.log('First handler');
});

element.addEventListener('click', function() {
    console.log('Second handler');
});
// Both handlers will run

This method uses the observer design pattern, it maintains a list of functions to call when the event happens. You can add as many listeners as you want, and they'll all execute.

addEventListener's Hidden Powers

The third parameter unlocks advanced behavior:

element.addEventListener('click', handler, {
    once: true,        // Run only once, then auto-remove
    passive: true,     // Promise not to call preventDefault() - performance boost
    capture: true      // Listen during capture phase instead of bubble phase
});

Event bubbling quirk: Click a button inside a div, and the div's click event fires too by default. This "bubbling up" happens unless you call event.stopPropagation() or use the capture option to listen during the downward journey instead.

Pro tip: Always use addEventListener in real projects. Event properties are mainly useful for quick prototypes or when you specifically want to ensure only one handler exists.

4) DOM Traversal: Family Navigation

The DOM's family tree structure means every element has relatives:

element.parentNode        // Go up one level
element.children         // All child elements  
element.nextElementSibling  // Next brother/sister
element.previousElementSibling // Previous sibling

Pro tip: children gives you elements only, while childNodes includes text nodes (like whitespace), which usually isn't what you want.

Wrapping Up

Understanding the DOM goes beyond just knowing how to select and manipulate elements. The real power comes from understanding what's happening behind the scenes, how browsers transform your HTML into a living document tree, why whitespace matters, and how events flow through this structure.

These insights will help you debug issues faster, write more efficient code, and understand why certain DOM behaviors seem "weird" at first glance. The DOM isn't just a programming interface it's a fascinating system that bridges the gap between static markup and dynamic web applications.

In the next article, we'll dive deeper into advanced DOM concepts like performance optimization and working with large element collections. Until then, experiment with these concepts and see how they change your perspective on web development.

You can always reach out on Twitter

Exploring JavaScript's Document Object Model (DOM).

Folacodes — Tue, 09 Sep 2025 19:34:32 +0000

In my quest to deep dive into the building blocks of Frontend Engineering, I recently took a course on Frontend Masters titled Vanilla JavaScript: You might not need a Framework by Maximiliano Firtman on Frontend Masters. It's a cool course that you should totally check out.

This article is an attempt to share what I learned from the course and further deepen my understanding of Vanilla JS. One of the key concepts the course explores in depth is the Document Object Model (DOM), which forms the foundation of how JavaScript interacts with web pages.

Having a good understanding of how the DOM works under the hood as a Frontend Engineer is key because it would help make better, performance-conscious decisions when working with JavaScript, whether using vanilla JS or frameworks like React.

Let me share the DOM definitions that resonated most with me from the course.

The DOM is a memory representation of your HTML.
The DOM is a structure browsers create in memory when rendering pages.
The DOM is a bridge that connects web pages to JavaScript through document structure.

Now, to interact with the DOM, the browser provides Application Programming Interfaces(API) called the DOM API. The DOM API is a browser API exposed to developers to manipulate the DOM from a scripting language like JavaScript.

In essence, The DOM is a structure in memory while the DOM API provides/ exposes ways in which that structure can be changed.This API is available on many Objects like:

Window global Object
Document Object (which represents the current DOM)
Every HTML Element in a web app

Working with the DOM

As earlier mentioned, the DOM APIs allow us to interact/manipulate the DOM, some of the ways by which we can do that include:

Selecting elements from the DOM: We can select elements from the DOM using several methods:

By ID: To retrieve an HTML element by its id attribute in JavaScript, the document.getElementById() method (what functions in an objects are called). This method returns a single HTML Element (or null if no element is found). Because ids are unique, it would only return the first element it encounters with that id.

<!-- HTML -->
<div id="header">Welcome to my site</div>
<p id="intro">This is the introduction paragraph</p>

// JavaScript
const headerElement = document.getElementById('header');
const introElement = document.getElementById('intro');

console.log(headerElement.textContent); 
// "Welcome to my site"
console.log(introElement.textContent); 
// "This is the introduction paragraph"

// If ID doesn't exist
const nonExistent = document.getElementById('notFound');
console.log(nonExistent); 
// null

By Classname: We can also get an HTML element by its classname, using the document.getElementsByClassName() method. This method returns a Live HTML Collection(HTML Collection) - a live collection that automatically updates when the DOM changes.

<!-- HTML -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<p class="card">Card 3</p>

// JavaScript
const cardElements = document.getElementsByClassName('card');
console.log(cardElements.length); // 3

// Access individual elements
console.log(cardElements[0].textContent); // "Card 1"
console.log(cardElements[1].textContent); // "Card 2"

// Live collection - updates automatically
const newCard = document.createElement('div');
newCard.className = 'card';
newCard.textContent = 'Card 4';
document.body.appendChild(newCard);

console.log(cardElements.length); // Now 4 (automatically updated!)

Note - Live HTMLCollections don't have all the modern Array interface such as filter, map, reduce or forEach.
Modern array functions can be added to a live HTMLCollection by creating an Array from it using the Array.from() method.

By Name: Elements can also be retrieved using their name attribute with the document.getElementsByName() method. This method returns a Static Element Collection (A NodeList). Since the name attribute is not required to be unique (unlike id), this method typically returns a collection of elements, even if there's only one element with that name.

<form>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
  <input type="radio" name="gender" value="other"> Other
</form>

// JavaScript
const genderInputs = document.getElementsByName('gender');
console.log(genderInputs.length); // 3

// Loop through the collection
genderInputs.forEach((input, index) => {
    console.log(`Input ${index + 1}: ${input.value}`);
});
// Output:
// Input 1: male
// Input 2: female  
// Input 3: other

// Check which one is selected
const selectedGender = Array.from(genderInputs).find(input => input.checked);
console.log(selectedGender?.value); // Value of selected radio button

By CSS Selectors: Elements can also be gotten using CSS selectors through the document.querySelector(selector) method. This method returns the first Element within the document that matches the specified CSS selector. If no matching element is found, it returns null.

<!-- HTML -->
<div class="container">
  <h1 id="main-title">Welcome</h1>
  <p class="intro">First paragraph</p>
  <p class="intro">Second paragraph</p>
  <button type="submit" data-action="save">Save</button>
  <input type="email" placeholder="Enter email">
</div>

// Select by ID (same as getElementById)
const title = document.querySelector('#main-title');
console.log(title.textContent); // "Welcome"

// Select by class (returns first matching element)
const firstIntro = document.querySelector('.intro');
console.log(firstIntro.textContent); // "First paragraph"

// Select by element tag
const firstParagraph = document.querySelector('p');
console.log(firstParagraph.textContent); // "First paragraph"

// Select by attribute
const submitButton = document.querySelector('[type="submit"]');
const saveButton = document.querySelector('[data-action="save"]');
console.log(submitButton.textContent); // "Save"

// Select by complex CSS selector
const emailInput = document.querySelector('input[type="email"]');
console.log(emailInput.placeholder); // "Enter email"

// Descendant selector
const containerTitle = document.querySelector('.container h1');
console.log(containerTitle.textContent); // "Welcome"

// If selector doesn't match anything
const nonExistent = document.querySelector('.not-found');
console.log(nonExistent); // null

Conclusion
Understanding how to select DOM elements is the foundation of JavaScript web development. Whether you're using getElementById() for unique elements, getElementsByClassName() for collections, getElementsByName() for form elements, or querySelector() for flexible CSS-based selection, mastering these methods gives you the tools to interact with any web page.

In the next part of this series, we'll explore how to manipulate these selected elements - modifying their content, attributes, styles, and structure. We'll also dive into creating new elements and handling events to build truly interactive web applications.
The DOM might seem complex at first, but once you understand these selection fundamentals, you're well on your way to becoming proficient in vanilla JavaScript.

And remember, this knowledge directly transfers to framework work too - React, Vue, and others are all built on these same DOM principles under the hood.

Stay tuned for Part 2 where we'd explore more on DOM manipulation.

You can always reach out on Twitter