DOM.md

DOM Manipulation in JavaScript with ES6+

Table of Contents

Introduction to the DOM Accessing DOM Elements - Selecting Elements - Traversing the DOM Manipulating DOM Elements - Creating and Appending Elements - Modifying Element Content - Modifying Element Attributes - Styling Elements Event Handling - Adding Event Listeners - Event Object ES6+ Features in DOM Manipulation - Arrow Functions - Template Literals - Destructuring - Promises and Async/Await

---

Introduction to the DOM

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of objects, where each object corresponds to a part of the document (e.g., elements, attributes, text). JavaScript can be used to manipulate the DOM, allowing dynamic changes to the content and structure of a web page.

Accessing DOM Elements

Selecting Elements

Method	Description	Example
document.getElementById()	Selects an element by its ID	const element = document.getElementById('myId');
document.querySelector()	Selects the first element that matches a CSS selector	const element = document.querySelector('.myClass');
document.querySelectorAll()	Selects all elements that match a CSS selector	const elements = document.querySelectorAll('p');
document.getElementsByClassName()	Selects elements by class name	const elements = document.getElementsByClassName('myClass');
document.getElementsByTagName()	Selects elements by tag name	const elements = document.getElementsByTagName('div');

Traversing the DOM

Property	Description	Example
parentNode	Returns the parent node of the specified node	const parent = element.parentNode;
childNodes	Returns a collection of a node's child nodes	const children = element.childNodes;
firstChild	Returns the first child node of a node	const firstChild = element.firstChild;
lastChild	Returns the last child node of a node	const lastChild = element.lastChild;
nextSibling	Returns the next sibling node	const nextSibling = element.nextSibling;
previousSibling	Returns the previous sibling node	const previousSibling = element.previousSibling;

Manipulating DOM Elements

Creating and Appending Elements

Method	Description	Example
document.createElement()	Creates a new element	const newDiv = document.createElement('div');
element.appendChild()	Adds a new child node to an element	element.appendChild(newDiv);
element.insertBefore()	Inserts a node before a specified child node	element.insertBefore(newDiv, referenceNode);
element.removeChild()	Removes a child node from an element	element.removeChild(childNode);
element.replaceChild()	Replaces a child node with a new node	element.replaceChild(newNode, oldNode);

Modifying Element Content

Property	Description	Example
element.innerHTML	Sets or returns the HTML content of an element	element.innerHTML = '<p>New content</p>';
element.textContent	Sets or returns the text content of an element	element.textContent = 'New text';
element.innerText	Sets or returns the visible text content of an element	element.innerText = 'Visible text';

Modifying Element Attributes

Method	Description	Example
element.getAttribute()	Returns the value of an attribute	const value = element.getAttribute('src');
element.setAttribute()	Sets the value of an attribute	element.setAttribute('src', 'newImage.jpg');
element.removeAttribute()	Removes an attribute from an element	element.removeAttribute('src');
element.hasAttribute()	Checks if an element has a specific attribute	const hasSrc = element.hasAttribute('src');

Styling Elements

Property	Description	Example
element.style	Accesses the inline style of an element	element.style.color = 'red';
element.classList	Manages CSS classes of an element	element.classList.add('newClass');

Event Handling

Adding Event Listeners

Method	Description	Example
element.addEventListener()	Attaches an event handler to an element	element.addEventListener('click', myFunction);
element.removeEventListener()	Removes an event handler from an element	element.removeEventListener('click', myFunction);

Event Object

Property	Description	Example
event.target	Returns the element that triggered the event	const target = event.target;
event.type	Returns the type of event	const type = event.type;
event.preventDefault()	Prevents the default action of an event	event.preventDefault();

ES6+ Features in DOM Manipulation

Arrow Functions

Arrow functions provide a concise syntax for writing event handlers.

element.addEventListener('click', (event) => {
  console.log('Element clicked:', event.target);
});

Template Literals

Template literals allow embedding expressions inside strings, making it easier to create dynamic content.

const name = 'John';
element.innerHTML = `<p>Hello, ${name}!</p>`;

Destructuring

Destructuring can be used to extract values from objects and arrays, making code more readable.

const { style } = element;
style.color = 'blue';

Promises and Async/Await

Promises and async/await can be used to handle asynchronous DOM operations, such as fetching data and updating the DOM.

async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); element.innerHTML = <p>${data.message}</p>; }

async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); element.innerHTML = <p>${data.message}</p>; }

Tip

Use modern JavaScript features like arrow functions, template literals, and destructuring to write cleaner code. Leverage event delegation to handle events more efficiently, especially when dealing with dynamically added elements. Always consider performance when manipulating the DOM, as excessive changes can lead to slow rendering.

[EOF]