JavaScript DOM traversal
DOM traversal and manipulation in JavaScript involve navigating and modifying the structure and content of the web page. Here's a breakdown of the key concepts:
DOM Traversal
DOM traversal is the process of navigating through the DOM tree to access or manipulate elements. Here are some common methods and properties used for DOM traversal:
Selecting Elements
document.getElementById(id)
: Selects an element by its ID.document.getElementsByClassName(className)
: Selects elements by their class name.document.getElementsByTagName(tagName)
: Selects elements by their tag name.document.querySelector(selector)
: Selects the first element that matches the CSS selector.document.querySelectorAll(selector)
: Selects all elements that match the CSS selector.
Traversing the DOM Tree
parentNode
: Accesses the parent node of an element.childNodes
: Returns a NodeList of the child nodes (including text nodes) of an element.children
: Returns an HTMLCollection of the child elements (excluding text nodes) of an element.firstChild
/lastChild
: Accesses the first or last child node.firstElementChild
/lastElementChild
: Accesses the first or last child element.nextSibling
/previousSibling
: Accesses the next or previous sibling node.nextElementSibling
/previousElementSibling
: Accesses the next or previous sibling element.
Querying and Filtering
matches(selector)
: Checks if an element matches a CSS selector.closest(selector)
: Finds the closest ancestor that matches a selector.
DOM Manipulation
DOM manipulation involves changing the structure, style, or content of the DOM. Here are some common methods and properties for DOM manipulation:
Modifying Content
element.innerHTML
: Gets or sets the HTML content of an element.element.textContent
: Gets or sets the text content of an element (excluding HTML tags).element.innerText
: Gets or sets the visible text content (rendered text).
Modifying Attributes
element.getAttribute(attrName)
: Gets the value of an attribute.element.setAttribute(attrName, value)
: Sets the value of an attribute.element.removeAttribute(attrName)
: Removes an attribute.
Modifying Styles
element.style
: Accesses the inline styles of an element. You can set individual CSS properties (e.g.,element.style.color = 'red';
).
Manipulating Classes
element.classList
: Provides methods to manipulate classes:add(className)
: Adds a class.remove(className)
: Removes a class.toggle(className)
: Toggles a class.contains(className)
: Checks if a class is present.
Creating and Inserting Elements
document.createElement(tagName)
: Creates a new element.element.appendChild(newChild)
: Appends a new child element.element.insertBefore(newNode, referenceNode)
: Inserts a new element before a reference element.element.replaceChild(newChild, oldChild)
: Replaces an old child with a new child.element.removeChild(child)
: Removes a child element.
Removing Elements
element.remove()
: Removes an element from the DOM.
Example
Here’s a simple example that demonstrates some of these concepts:
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<div id="container">
<p class="text">Hello, World!</p>
<button id="changeText">Change Text</button>
</div>
<script>
// Select elements
const container = document.getElementById('container');
const p = document.querySelector('.text');
const button = document.getElementById('changeText');
// Modify content
button.addEventListener('click', () => {
p.textContent = 'Text changed!';
});
// Create and insert a new element
const newElement = document.createElement('p');
newElement.textContent = 'I am a new paragraph!';
container.appendChild(newElement);
// Remove an element
setTimeout(() => {
container.removeChild(newElement);
}, 5000); // Removes the new paragraph after 5 seconds
</script>
</body>
</html>