JavaScript: DOM Manipulation

DOM (Document Object Model) is a tree that the browser creates from the HTML document. By operating on this tree with JavaScript, you can dynamically change the page's content, structure, and attributes—like picking fruit from a tree, grafting new branches, or cutting dead wood.

1. Selecting Elements

The first step in DOM manipulation is always "find it first".

▶ Example: Comparing Five Selection Methods

<div id="box" class="card active">Hello</div>
<div class="card">World</div>
<p class="card">JS</p>

<script>
const byId = document.getElementById('box');
console.log('byId:', byId.textContent);

const byClass = document.getElementsByClassName('card');
console.log('byClass count:', byClass.length);

const byTag = document.getElementsByTagName('p');
console.log('byTag:', byTag[0].textContent);

const first = document.querySelector('.card');
console.log('querySelector:', first.textContent);

const all = document.querySelectorAll('.card');
console.log('querySelectorAll count:', all.length);
</script>

2. Modifying Content

After finding an element, the most common need is to change "what it says".

• textContent: reads/writes plain text, safe and efficient.
• innerHTML: reads/writes HTML strings, can insert tags, but has XSS risk.

▶ Example: textContent vs innerHTML

<div id="safe"></div>
<div id="danger"></div>

<script>
const safe = document.getElementById('safe');
safe.textContent = '<b>This will not be bold</b>';

const danger = document.getElementById('danger');
danger.innerHTML = '<b>This will be bold</b>';
</script>

3. Modifying Attributes

HTML element attributes (id, class, src, href, etc.) can also be read and written with JS.

▶ Example: Manipulating Link Attributes

<a id="link" href="https://example.com" target="_blank">Example Link</a>

<script>
const link = document.getElementById('link');

console.log('href:', link.getAttribute('href'));

link.setAttribute('href', 'https://mdn.io');
link.setAttribute('title', 'Click to go to MDN');

link.removeAttribute('target');

console.log('After modification:', link.getAttribute('href'));
</script>

4. Creating and Inserting Elements

One of the core DOM manipulation abilities: "create" an element out of thin air, then attach it to the tree.

▶ Example: Dynamically Adding List Items

<ul id="list">
  <li>Existing item</li>
</ul>

<script>
const list = document.getElementById('list');

const li = document.createElement('li');
li.textContent = 'Newly added item';
list.appendChild(li);

const li2 = document.createElement('li');
li2.textContent = 'Inserted at the beginning';
list.insertBefore(li2, list.firstChild);
</script>

5. Removing and Cloning Elements

▶ Example: Removing and Cloning

<ul id="fruits">
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

<script>
const fruits = document.getElementById('fruits');

const banana = fruits.children[1];
const removed = fruits.removeChild(banana);
console.log('Removed:', removed.textContent);

const clone = fruits.cloneNode(true);
document.body.appendChild(clone);
console.log('Cloned the list');
</script>

❓ FAQ

📖 Summary

• Two camps for selecting elements: getElementBy* (better performance) and querySelector* (more flexible). For daily use, querySelector is sufficient.
• Use textContent for text changes, use innerHTML only when you need HTML. The latter requires XSS prevention.
• Attribute operations: getAttribute to read, setAttribute to write, removeAttribute to delete.
• Standard flow for creating elements: createElement → set content/attributes → appendChild to mount.
• Two ways to remove elements: remove() (element removes itself), removeChild() (parent removes it, and you get the node back).
• cloneNode(true) deep-clones including all descendants, cloneNode(false) clones only the shell.

📝 Exercises

1. Basic: Create a page that uses createElement and appendChild to dynamically generate a list containing 5 city names.
2. Intermediate: Add a delete button to the list from the previous exercise. When clicked, use removeChild to delete the corresponding list item.
3. Challenge: Implement a simple "note manager"—an input field + add button. Each time you add a note, create a card with a delete button. Clicking the delete button removes that card.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us