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:

  1. 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.
  2. 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.
  3. 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:

  1. 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).
  2. 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.
  3. Modifying Styles

    • element.style: Accesses the inline styles of an element. You can set individual CSS properties (e.g., element.style.color = 'red';).
  4. 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.
  5. 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.
  6. 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>