JavaScript DOM Manipulation: A Complete Guide
Learn how to select, modify, and create HTML elements using JavaScript.
Selecting Elements
getElementById: Select by ID
const header = document.getElementById('header');
querySelector: Select first match
const btn = document.querySelector('.btn');
querySelectorAll: Select all matches
const items = document.querySelectorAll('li');
Modifying Content
textContent: Change text
element.textContent = 'New text';
innerHTML: Change HTML
element.innerHTML = 'Bold';
Styling Elements
element.style.color = 'red';
element.style.backgroundColor = 'blue';
Or use classList:
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('open');
Creating Elements
const div = document.createElement('div');
div.textContent = 'Hello';
document.body.appendChild(div);
Event Handling
button.addEventListener('click', (e) => {
console.log('Clicked!');
});