DOM Traversal and Manipulation using Javascript

Before DOM manipulation, it’s important to understand How to traverse the DOM

Traversing the DOM in JS

Traversing and manipulating the DOM (Document Object Model) without using any JavaScript frameworks or libraries like Angular or React involves working directly with the native DOM API. This can be done using HTML, CSS, and vanilla JavaScript. Here’s a detailed guide on how to traverse and manipulate the DOM using various event listeners and DOM manipulation methods:
 

1. Basic DOM Traversal:
   To start, you need to understand how to access elements in the DOM and traverse through their structure.

• getElementById: Retrieve an element by its unique ID.

<div id=“myElement”></<em>div</em>>

// javascript
const element = document.getElementById(“myElement”);

• getElementsByClassName: – Retrieve a collection of elements with the same class name.

<div class=“myClass”></<em>div</em>>
<div class=“myClass”></<em>div</em>>

// javascript
const elements = document.getElementsByClassName(“myClass”);

• getElementsByTagName: – Retrieve a collection of elements by their tag name.

 <<em>p</em>></<em>p</em>>
 <<em>p</em>></<em>p</em>>

// javascript
const paragraphs = document.getElementsByTagName(“p”);

• querySelector: – Retrieve the first element that matches a given CSS selector.

const element = document.querySelector(“.myClass”);

• querySelectorAll: – Retrieve a collection of elements that match a given CSS selector.

const elements = document.querySelectorAll(“.myClass”);

Dom Manipulation

DOM manipulation involves modifying elements, attributes, and content.

1. Creating Elements:

const newElement = document.createElement(“div”);

2. Appending and Inserting Elements:

parentElement.appendChild(newElement); // Append to the end
parentElement.insertBefore(newElement, referenceElement); // Insert before another element

3. Updating Attributes:

element.setAttribute(“class”, “newClass”);

4. Changing Content:

element.textContent = “New text content”;
element.innerHTML = “<p>New HTML content</p>”;

5. Removing Elements:

parentElement.removeChild(childElement);

Common DOM Events:

Here are a few common DOM events you might encounter:

• click: Triggered when an element is clicked.
• submit: Triggered when a form is submitted.
• keydown/keyup: Triggered when a keyboard key is pressed/released.
• mouseover/mouseout: Triggered when the mouse pointer enters/leaves an element.
• change: Triggered when the value of an input element changes.

Check if document has loaded
So there are multiple ways to check if the document is loaded

1. readyStateChange

The Document.readyState property describes the loading state of the document . When the value of this property changes, a readystatechange event fires on the document object.

// using event handler
document.addEventListener(“readyStateChange”, (<em>event</em>) => {
    if (event.target.readyState == 'loading') {
      console.log('document is loading...')
    }
    if (event.target.readyState == 'interactive') {
    initLoader();
  } else if (event.target.readyState === “complete”) {
        console.log('page loaded')
      initApp();
     }
}

// or
document.onreadystatechange = () => {
  if (document.readyState == "loading") {
    console.log("loading...");
  }
  if (document.readyState == "interactive") {
    console.log("interactive...");
  }
  if (document.readyState == "complete") {
    console.log("complete...");
    // init app
  }
};

2. Using ‘DOMContentLoaded’ event

• DOMContentLoaded – The DOMContentLoaded event fires when the HTML document has been completely parsed, and all deferred scripts have downloaded and executed. It doesn’t wait for other things like images, subframes, and async scripts to finish loading. (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event)

 document.addEventListener("DOMContentLoaded", (<em>event</em>) => {
   console.log("DOM fully loaded and parsed");
 });

3. Using Window load

window.addEventListener("load", (<em>event</em>) => {
  console.log("page loaded");
});

//or

window.onload = function () {
 console.log('page is loaded...'
}