DEV Community

  Isaiah   Clifford Opoku
Isaiah Clifford Opoku

Posted on

Part 7: JavaScript DOM Manipulation: Mastering Dynamic and Interactive Web Pages

JavaScript DOM Manipulation: Mastering Dynamic and Interactive Web Pages

Welcome to our comprehensive 7-part series on mastering JavaScript. In this section, we'll delve into the power of DOM manipulation in JavaScript—a crucial skill for creating dynamic and interactive web pages that engage users. Join us as we explore the fundamentals of the Document Object Model (DOM), a tree-like structure representing HTML elements, and learn how to effectively manipulate and interact with these elements using JavaScript. By the end of this section, you'll possess a solid understanding of the DOM and the ability to craft compelling web experiences.

What is DOM Manipulation?

DOM manipulation in JavaScript revolves around harnessing the Document Object Model (DOM), which serves as a hierarchical representation of HTML elements. Each element, attribute, and text within an HTML or XML document is depicted as a node—a JavaScript object with properties and methods that enable seamless manipulation and interaction.

Understanding the DOM Tree:
[DOM Tree

  • Document: The core foundation of the DOM.
  • HTML Root Element: A child of the document object.
  • Body and Head: Siblings and children of the HTML element.
  • Text: A child of the body element.
  • a Tags: Children of the body element and siblings to each other.
  • href Attribute: Child of the a (anchor) tag.

The DOM acts as a programming API for HTML and XML documents, providing a defined logical structure and specified methods for accessing and modifying them.

How to Select Elements in the DOM?

JavaScript provides several methods to select elements within the DOM. Here are some commonly used techniques:

  • document.getElementById(): Selects an element by its id attribute.

Example:

  const element = document.getElementById("myId");
Enter fullscreen mode Exit fullscreen mode
  • document.getElementsByClassName(): Selects elements by their class attribute.

Example:

  const elements = document.getElementsByClassName("myClass");
Enter fullscreen mode Exit fullscreen mode
  • document.getElementsByTagName(): Selects elements by their tag name.

Example:

  const elements = document.getElementsByTagName("p");
Enter fullscreen mode Exit fullscreen mode
  • document.querySelector(): Selects the first element that matches a specified CSS selector(s).

Example:

  const element = document.querySelector("p");
Enter fullscreen mode Exit fullscreen mode
  • document.querySelectorAll(): Selects all elements that match a specified CSS selector(s).

Example:

  const elements = document.querySelectorAll("p");
Enter fullscreen mode Exit fullscreen mode

The querySelector() and querySelectorAll() methods are particularly useful as they allow you to leverage CSS selectors, granting flexibility in selecting specific elements or groups based on attributes, classes, or structure.

Other essential properties and methods for DOM manipulation include:

  • ParentNode: Returns the parent node of an element.

Example:

  const myElement = document.getElementById("my-id");
  const parentElement = myElement.parentNode;
Enter fullscreen mode Exit fullscreen mode
  • ChildNodes: Returns a collection of an element's child nodes as a NodeList object.

Example:

  const myElement = document.getElementById("my-id");
  const childNodes = myElement.childNodes;
Enter fullscreen mode Exit fullscreen mode
  • FirstChild and LastChild: Retrieve the first and last child nodes of an element.
  const myElement = document.getElementById("my-id");
  const firstChild = myElement.firstChild;
  const lastChild = myElement.lastChild;
Enter fullscreen mode Exit fullscreen mode
  • PreviousSibling and NextSibling: Access the previous and next sibling nodes of an element.
  const myElement = document.getElementById("my-id");
  const nextSibling = myElement

.nextSibling;
  const previousSibling = myElement.previousSibling;
Enter fullscreen mode Exit fullscreen mode
  • appendChild(): Add a new child node to an element.
  const myElement = document.getElementById("my-id");
  const newChild = document.createElement("div");
  myElement.appendChild(newChild);
Enter fullscreen mode Exit fullscreen mode
  • removeChild(): Remove a child node from an element.
  const myElement = document.getElementById("my-id");
  const childToRemove = myElement.firstChild;
  myElement.removeChild(childToRemove);
Enter fullscreen mode Exit fullscreen mode
  • insertBefore(): Insert a new node before an existing child node of an element.
  const myElement = document.getElementById("my-id");
  const newChild = document.createElement("div");
  const referenceChild = myElement.firstChild;
  myElement.insertBefore(newChild, referenceChild);
Enter fullscreen mode Exit fullscreen mode
  • replaceChild(): Replace a child node of an element with a new node.
  const myElement = document.getElementById("my-id");
  const newChild = document.createElement("div");
  const oldChild = myElement.firstChild;
  myElement.replaceChild(newChild, oldChild);
Enter fullscreen mode Exit fullscreen mode

By employing these methods, you gain the ability to traverse and manipulate the DOM tree effectively. With practice, you'll be able to create captivating web pages that respond to user input, delivering a rich and interactive user experience.

How to Create and Insert Elements in the DOM?

JavaScript provides several methods for creating and inserting elements into the DOM. Here are some commonly used techniques:

  • document.createElement(): Creates a new element node.

Example:

  const newElement = document.createElement("div");
Enter fullscreen mode Exit fullscreen mode
  • document.createTextNode(): Creates a new text node.

Example:

  const newText = document.createTextNode("Hello World!");
Enter fullscreen mode Exit fullscreen mode
  • element.appendChild(): Adds a new child node to an element.

Example:

  const myElement = document.getElementById("my-id");
  const newChild = document.createElement("div");
  myElement.appendChild(newChild);
Enter fullscreen mode Exit fullscreen mode
  • element.insertBefore(): Inserts a new node before an existing child node of an element.

Example:

  const myElement = document.getElementById("my-id");
  const newChild = document.createElement("div");
  const referenceChild = myElement.firstChild;
  myElement.insertBefore(newChild, referenceChild);
Enter fullscreen mode Exit fullscreen mode
  • element.replaceChild(): Replaces a child node of an element with a new node.

Example:

  const myElement = document.getElementById("my-id");
  const newChild = document.createElement("div");
  const oldChild = myElement.firstChild;
  myElement.replaceChild(newChild, oldChild);
Enter fullscreen mode Exit fullscreen mode
  • element.cloneNode(): Creates a copy of a node.

Example:

  const myElement = document.getElementById("my-id");
  const clonedElement = myElement.cloneNode(true);
Enter fullscreen mode Exit fullscreen mode
  • element.insertAdjacentHTML(): Inserts a text as HTML, into a specified position.

Example:

  const myElement = document.getElementById("my-id");
  myElement.insertAdjacentHTML("beforeend", "<div>Hello World!</div>");
Enter fullscreen mode Exit fullscreen mode

How to Remove Elements from the DOM?

JavaScript provides several methods for removing elements from the DOM. Here are some commonly used techniques:

  • element.removeChild(): Removes a child node from an element.

Example:

  const myElement = document.getElementById("my-id");
  const childToRemove = myElement.firstChild;
  myElement.removeChild(childToRemove);
Enter fullscreen mode Exit fullscreen mode
  • element.remove(): Removes an element from the

DOM.

Example:

  const myElement = document.getElementById("my-id");
  myElement.remove();
Enter fullscreen mode Exit fullscreen mode

How to Modify Elements in the DOM?

JavaScript offers various methods for modifying elements within the DOM. Here are some commonly used techniques:

  • element.innerHTML: Sets or retrieves the HTML content of an element.

Example:

  const myElement = document.getElementById("my-id");
  myElement.innerHTML = "<p>New content</p>";
Enter fullscreen mode Exit fullscreen mode
  • element.textContent: Sets or retrieves the text content of an element.

Example:

  const myElement = document.getElementById("my-id");
  myElement.textContent = "New text";
Enter fullscreen mode Exit fullscreen mode
  • element.setAttribute(): Sets the value of an attribute on an element.

Example:

  const myElement = document.getElementById("my-id");
  myElement.setAttribute("class", "new-class");
Enter fullscreen mode Exit fullscreen mode
  • element.style.property: Sets or retrieves the value of a specific style property of an element.

Example:

  const myElement = document.getElementById("my-id");
  myElement.style.backgroundColor = "red";
Enter fullscreen mode Exit fullscreen mode
  • element.classList: Provides methods to add, remove, toggle, or check for the presence of a CSS class on an element.

Example:

  const myElement = document.getElementById("my-id");
  myElement.classList.add("new-class");
Enter fullscreen mode Exit fullscreen mode

By leveraging these methods, you can dynamically modify the content, appearance, and behavior of elements within the DOM, enabling you to create engaging and interactive web pages.

Conclusion

In this article, we've covered the basics of the DOM, including what it is, how it's structured, and how to access and manipulate it using JavaScript. We've also explored some of the most commonly used methods for creating, inserting, removing, and modifying elements within the DOM.

Thank you for reading, and happy coding!

Top comments (0)