Skip to main content

6. DOM Manipulation

The Document Object Model (DOM) is the interface between JavaScript and HTML. It lets you read, change, and create elements on the page, making your site dynamic and interactive.

6.1 DOM Basics​

What is the DOM?​

The DOM is a tree-like structure representing your HTML. Every tag is a node (element, text, comment, etc.).

DOM Tree Structure​

<body>
	<div>
		<p>Hello</p>
	</div>
</body>

This becomes:

body
└── div
		└── p

6.2 Selecting Elements​

By ID​

let el = document.getElementById('main');

By Class​

let items = document.getElementsByClassName('item');

By Tag​

let divs = document.getElementsByTagName('div');

Modern: querySelector / querySelectorAll​

let first = document.querySelector('.item');
let all = document.querySelectorAll('li');

6.3 DOM Traversal​

Move between elements:

let parent = el.parentNode;
let children = el.childNodes;
let first = el.firstChild;
let next = el.nextSibling;

6.4 Manipulation​

Changing Content​

el.innerHTML = '<b>Bold!</b>';
el.textContent = 'Just text';

Attributes​

el.setAttribute('data-id', 123);
let id = el.getAttribute('data-id');

Styles & Classes​

el.style.color = 'red';
el.classList.add('active');
el.classList.remove('active');

6.5 Create & Remove Elements​

Creating​

let newDiv = document.createElement('div');
newDiv.textContent = 'Hi!';
document.body.appendChild(newDiv);

Inserting & Removing​

let parent = document.getElementById('container');
let child = document.getElementById('child');
parent.removeChild(child);

let before = document.getElementById('before');
parent.insertBefore(newDiv, before);

Next: Event Handling