dom-manipulation.md

⚑ DOM Manipulation:

DOM is stands for Document Object Model. A tree-structured representation of an HTML document, providing a programmatic interface to access and manipulate elements, attributes, and content.

DOM Manipulation is the process of dynamically modifying the structure, content, or style of an HTML document using JavaScript.

☴ Overview:

1. Selecting elements
2. Creating elements
3. Adding elements
4. Modifying elements
   • Modifying attributes
   • Changing styles
5. Removing elements
6. Event Handling
   • Attaching event listeners
   • Handling events

✦ Selecting elements:

To select a HTML element via JavaScript for DOM manipulation.

Syntax:

document.getElementById(id);
document.getElementsByTagName(tagName);
document.getElementsByClassName(className);
document.querySelector(selector);
document.querySelectorAll(selector);

let elementById = document.getElementById("myElement");
let elementsByTagName = document.getElementsByTagName("p");
let elementsByClassName = document.getElementsByClassName("myClass");
let firstElementBySelector = document.querySelector("div#submit-button");
let allElementsBySelector = document.querySelectorAll("div.myClass");

✦ Creating elements:

To create an HTML element using DOM manipulation.

Syntax:

let newElement = document.createElement(tagName);

let newParagraph = document.createElement("p");

✦ Adding elements:

To add create HTML element in the DOM tree.

Syntax:

parentElement.appendChild(childElement);
parentElement.insertBefore(childElement, referenceElement);

let container = document.getElementById("container");
container.appendChild(newParagraph);

✦ Modifying elements:

To modify the HTML element as changing their properties or removing.

✦ Modifying attributes:

To modifying the attributes and properties of the HTML elements.

Syntax:

element.setAttribute(attributeName, attributeValue);
element.getAttribute(attributeName);

let link = document.createElement("a");
link.setAttribute("href", "https://arathinai.blogspot.com");
link.setAttribute("target", "_blank");

✦ Changing styles:

To changing the default or initial style of an element.

Syntax:

element.style.propertyName = propertyValue;

let heading = document.querySelector("h1");
heading.style.color = "blue";
heading.style.fontSize = "24px";

✦ Removing elements:

To remove an element from the DOM tree.

Syntax:

parentElement.removeChild(childElement);

container.removeChild(newParagraph);

✦ Event Handling:

Events: Actions that occur in a web page, such as clicks, key presses, or mouse movements.

✦ Attaching event listeners:

To listen for an event occurrence of an element, That need to be attach specific type of event.

Syntax:

element.addEventListener(eventType, eventHandler);

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("Button clicked!");
});

✦ Handling events:

Event Handling: The process of responding to events in a web page using JavaScript.

Common events:

• click
• mouseover
• mouseout
• keydown
• keyup
• submit
• change
• load
• resize
• scroll

Custom events: Create own events using dispatchEvent() and addEventListener().

// Create a custom event
let myCustomEvent = new Event("myCustomEvent");

// Dispatch the event
document.dispatchEvent(myCustomEvent);

// Listen for the event
document.addEventListener("myCustomEvent", function() {
  console.log("Custom event fired!");
});

---

⇪ To Top

❮ Previous Topic   Next Topic ❯

⌂ Goto Home Page