DOM Manipulation in JavaScript

Accessing DOM Elements

You can select elements from the DOM using various methods provided by the document object.

Common Methods:

• document.getElementById('id'): Selects a single element by its unique ID.
• document.getElementsByClassName('className'): Selects all elements with a given class name. Returns an HTMLCollection.
• document.getElementsByTagName('tagName'): Selects all elements with a given tag name. Returns an HTMLCollection.
• document.querySelector('selector'): Selects the first element that matches a CSS selector.
• document.querySelectorAll('selector'): Selects all elements that match a CSS selector. Returns a NodeList.

<div id="myDiv">Hello, World!</div>

const myDivElement = document.getElementById('myDiv');
console.log(myDivElement.textContent); // Outputs: "Hello, World!"
                

Creating and Appending Elements

JavaScript allows you to create new HTML elements dynamically and add them to the DOM.

Key Methods:

• document.createElement('tagName'): Creates a new element of the specified tag type.
• element.appendChild(childElement): Adds a node (childElement) as the last child of a parent node (element).
• element.insertBefore(newNode, referenceNode): Inserts a newNode before the referenceNode child of a parent node (element).
• document.createTextNode('text'): Creates a text node.

Modifying Element Content and Attributes

You can easily change the text, HTML content, and attributes of existing DOM elements.

Useful Properties and Methods:

• element.innerHTML: Gets or sets the HTML content within an element. Use with caution for security.
• element.textContent: Gets or sets the text content of an element and its descendants. Safer than innerHTML.
• element.setAttribute('attributeName', 'value'): Sets the value of an attribute.
• element.getAttribute('attributeName'): Gets the value of an attribute.
• element.removeAttribute('attributeName'): Removes an attribute.
• element.classList.add('className'), .remove(), .toggle(), .contains(): Methods for manipulating an element's classes.

Example: Changing Text and an Attribute

Initial Text

Modify Element

Click the button to see the text and image update.

Styling Elements

JavaScript provides powerful ways to manipulate the style of elements, either directly or by toggling CSS classes.

Methods:

• element.style.propertyName = 'value': Directly sets a CSS property (e.g., element.style.color = 'red';, element.style.backgroundColor = '#f0f0f0';). Note camelCase for multi-word properties.
• element.classList methods (as seen above): The preferred way to manage styles by adding/removing predefined CSS classes.

Removing Elements

You can remove elements from the DOM when they are no longer needed.

Methods:

• element.remove(): Removes the element itself from its parent. (Modern browsers)
• parentElement.removeChild(childElement): Removes a specific child element from its parent. (Older browsers)

Event Handling

DOM manipulation is often triggered by user interactions, such as clicks, mouse movements, or keyboard input. Event handling allows you to respond to these events.

Common Event Listeners:

• click: User clicks an element.
• mouseover / mouseout: Mouse pointer enters or leaves an element.
• keydown / keyup: User presses or releases a key.
• submit: User submits a form.
• load: A resource (like an image or script) has finished loading.
• DOMContentLoaded: The HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Methods for Adding Listeners:

• element.addEventListener('eventType', functionNameOrArrowFunction): The recommended way to attach event listeners. Allows multiple listeners for the same event.
• Inline event handlers (e.g., onclick="..."): Less flexible and generally discouraged for complex applications.