Skip to main content

DOM Manipulation

"DOM Manipulation," refers to the methods and interfaces provided by the Document Object Model (DOM) that allow you to interact with and modify the structure and content of webpages. The DOM represents the document as a hierarchical tree of nodes, where each node represents a part of the document (such as an element, attribute, or text). JavaScript allows you to manipulate the DOM, enabling dynamic changes to the content, structure, and style of webpages. Here are key concepts and operations involved in DOM manipulation:

1. Accessing Elements

To manipulate the content, you first need to access the elements. Common methods to access DOM elements include:

  • document.getElementById(id): Selects a single element by its ID.
  • document.getElementsByTagName(name): Returns a collection of elements with the given tag name.
  • document.getElementsByClassName(name): Returns a collection of elements that have the given class name.
  • document.querySelector(selector): Returns the first element that matches a specified CSS selector.
  • document.querySelectorAll(selector): Returns a list of all elements that match a specified CSS selector.

2. Changing Element Properties

Once you have a reference to an element, you can modify its properties. This includes changing the element's inner HTML, text content, attributes, and style. For example:

  • element.innerHTML: Gets or sets the HTML or XML markup contained within the element.
  • element.textContent: Sets or returns the textual content of an element and its descendants.
  • element.setAttribute(name, value): Adds a specified attribute to an element, or updates its value if it already exists.
  • element.style.property: Changes the style of an element, where property is a CSS property (in camelCase, e.g., backgroundColor).

3. Creating and Removing Elements

JavaScript allows you to create new elements and insert them into the DOM or remove existing elements:

  • document.createElement(tagName): Creates a new element with the given tag name.
  • parentNode.appendChild(childNode): Appends a node as the last child of a parent node.
  • parentNode.insertBefore(newNode, referenceNode): Inserts a new node before the reference node as a child of a specified parent node.
  • parentNode.removeChild(child): Removes a child node from the DOM.
  • element.remove(): Removes the element from the DOM.

4. Event Handling

Adding event listeners to elements enables you to execute code in response to user actions, such as clicks, keyboard input, or mouse movements:

  • element.addEventListener(event, function, useCapture): Attaches an event handler to an element. Common events include click, mouseover, mouseout, keydown, keyup, etc.

5. Traversal and Modification

The DOM provides methods and properties to traverse and modify nodes:

  • element.childNodes: Returns a live NodeList of child nodes of an element.
  • element.parentElement: Returns the parent element of the specified element.
  • element.nextSibling: Returns the next sibling in the tree.
  • element.previousSibling: Returns the previous sibling in the tree.
Back to top