Back to Guides

JavaScript DOM Manipulation Guide

javascript
dom
manipulation
events

Selecting Elements

document.querySelector('.class');
document.querySelectorAll('.class');

Modifying Elements

const element = document.getElementById('example');
element.innerHTML = '<b>Updated Content</b>';
element.style.color = 'red';

Event Listeners

  • Attach multiple event handlers.
const button = document.querySelector('button');
 
button.addEventListener('click', () => console.log('Clicked!'));
button.addEventListener('mouseover', () => console.log('Hovered!'));

DOM Traversal

const parent = document.querySelector('.parent');
const children = parent.children;
console.log(children);

Creating and Appending Elements

const newDiv = document.createElement('div');
newDiv.textContent = 'Hello, World!';
document.body.appendChild(newDiv);

Advanced Manipulation

  • Delegated Events.
document.querySelector('#list').addEventListener('click', event => {
  if (event.target.tagName === 'LI') {
    console.log(`Item ${event.target.textContent} clicked.`);
  }
});