Document Object Model in Java Script.pptx

Document Object Model in Java Script.pptx

• 1.
  DOM in JS
• 2.
  Document Object Model DOMstands for Document Object Model. It is a programming interface provided by browsers to interact with and manipulate HTML. The DOM represents the structure of a document as a tree of objects. Each object in this tree corresponds to a part of the document, such as an element, attribute, or text node. Key Concepts of the DOM: •Tree Structure: •The DOM represents a document as a hierarchical tree structure. Each node in the tree represents part of the document. •Nodes: •Element Nodes: Represent HTML or XML elements (e.g., <div>, <p>, <a>). •Attribute Nodes: Represent attributes of elements (e.g., id="myId"). •Text Nodes: Represent the text content inside elements. •Access and Manipulation: •JavaScript can be used to access, modify, add, or delete nodes in the DOM. •Events: The DOM allows you to handle user interactions (e.g., clicks, form submissions) through event listeners.
• 4.
  Common DOM Methodsand their uses: •Element Selection: •document.getElementById(id): Selects a single element by its unique ID. •document.getElementsByClassName(className): Returns a collection of elements with a specific class name. •document.getElementsByTagName(tagName): Returns a collection of elements with a specific tag name (e.g., p, div). •document.querySelector(selector): Returns the first element that matches a specified CSS selector. •document.querySelectorAll(selector): Returns all elements thatmatch a specified CSS selector.
• 5.
  Common DOM Methodsand their uses: •Content and Attribute Manipulation: •element.innerHTML: Gets or sets the HTML content inside an element. •element.textContent: Gets or sets the text content inside an element (excluding HTML tags). •element.getAttribute(attributeName): Retrieves the value of a specified attribute. •element.setAttribute(attributeName, value): Sets or changes the value of a specified attribute. •element.removeAttribute(attributeName): Removes a specified attribute.
• 6.
  Common DOM Methodsand their uses: •Structure Manipulation (Creating, Adding, Removing Elements): •document.createElement(tagName): Creates a new HTML element. •parentNode.appendChild(childNode): Adds a new child node to a parent node. •parentNode.removeChild(childNode): Removes a child node from a parent node. •parentNode.insertBefore(newNode, referenceNode): Inserts a new node before a reference node. •parentNode.replaceChild(newChild, oldChild): Replaces an existing child node with a new one.
• 7.
  Common DOM Methodsand their uses: •Event Handling: •element.addEventListener(event, function, useCapture): Attaches an event listener to an element, executing a function when the specified event occurs (e.g., 'click', 'mouseover'). •element.removeEventListener(event, function, useCapture): Removes an event listener.
• 8.
  Common DOM Methodsand their uses: •Styling: •element.style.propertyName: Accesses or modifies the inline CSS style of an element (e.g., element.style.color = 'red’). Example: <p id="demo">Hello</p> let element = document.getElementById("demo"); // <p id="demo">Hello</p> element.style.color = "red"; // changes text color to red These methods are fundamental for creating dynamic and interactive web applications, allowing developers to respond to user actions, update content, and change the visual presentation of a page.