search

Home >Web Front-end >JS Tutorial >Mastering the JavaScript HTML DOM: Building Dynamic and Interactive Webpages

Mastering the JavaScript HTML DOM: Building Dynamic and Interactive Webpages

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-20 02:57:12415browse

Mastering the JavaScript HTML DOM: Building Dynamic and Interactive Webpages

JavaScript HTML DOM: A Complete Guide

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a webpage as a tree of objects, enabling developers to manipulate HTML and CSS using JavaScript. By mastering DOM, you can create dynamic, interactive web pages.

What is the DOM?

The DOM is a structured representation of an HTML document. It allows JavaScript to access and manipulate the elements, attributes, and content of a webpage dynamically.

Example:

For this HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>



<p>The DOM represents it as:<br>
</p>

<pre class="brush:php;toolbar:false">- Document
  - html
    - head
      - title
    - body
      - h1
      - p

Accessing the DOM

JavaScript provides methods to select and manipulate DOM elements.

Common Selection Methods

  1. getElementById Selects an element by its ID. 
   const title = document.getElementById("title");
   console.log(title.innerText); // Output: Hello, DOM!
  1. getElementsByClassName Selects elements by their class name (returns a collection). 
   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);
  1. getElementsByTagName Selects elements by their tag name (e.g., div, p). 
   const headings = document.getElementsByTagName("h1");
   console.log(headings[0].innerText);
  1. querySelector Selects the first element matching a CSS selector. 
   const title = document.querySelector("#title");
  1. querySelectorAll Selects all elements matching a CSS selector (returns a NodeList). 
   const paragraphs = document.querySelectorAll(".description");

DOM Manipulation

Once selected, you can modify elements, attributes, and content dynamically.

1. Changing Content

  • innerHTML: Sets or gets HTML content. 
  document.getElementById("title").innerHTML = "Welcome to the DOM!";
  • innerText or textContent: Sets or gets plain text. 
  document.getElementById("title").innerText = "Hello, World!";

2. Changing Attributes

  • Use setAttribute and getAttribute to modify element attributes. 
  const link = document.querySelector("a");
  link.setAttribute("href", "https://example.com");
  • Directly modify attributes like id, className, or src. 
  const image = document.querySelector("img");
  image.src = "image.jpg";

3. Changing Styles

Modify CSS properties directly.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>



<p>The DOM represents it as:<br>
</p>

<pre class="brush:php;toolbar:false">- Document
  - html
    - head
      - title
    - body
      - h1
      - p

Adding and Removing Elements

1. Adding Elements

  • createElement: Creates a new element.
  • appendChild: Appends an element to a parent. 
   const title = document.getElementById("title");
   console.log(title.innerText); // Output: Hello, DOM!

2. Removing Elements

  • removeChild: Removes a child element. 
   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);

Event Handling in the DOM

Events are actions or occurrences detected by the browser, such as clicks or key presses.

Adding Event Listeners

Use addEventListener to bind events to elements.

   const headings = document.getElementsByTagName("h1");
   console.log(headings[0].innerText);

Common Events

  1. Mouse Events: click, dblclick, mouseover, mouseout
  2. Keyboard Events: keydown, keyup
  3. Form Events: submit, change, focus

Traversing the DOM

You can navigate between elements using relationships in the DOM tree.

Parent and Children

  • parentNode: Gets the parent node.
  • childNodes: Lists all child nodes.
  • children: Lists all child elements. 
   const title = document.querySelector("#title");

Siblings

  • nextSibling: Gets the next sibling node.
  • previousSibling: Gets the previous sibling node.

Advanced DOM Features

1. Cloning Elements

Create a duplicate of an element using cloneNode.

   const paragraphs = document.querySelectorAll(".description");

2. Working with Classes

Use the classList property to manipulate classes.

  document.getElementById("title").innerHTML = "Welcome to the DOM!";

3. Using Templates

HTML templates allow reusable content.

  document.getElementById("title").innerText = "Hello, World!";

Best Practices for DOM Manipulation

  1. Minimize Reflows and Repaints:

    • Batch DOM changes to avoid excessive rendering.
    • Use documentFragment for multiple updates.

  2. Use Event Delegation:

    Attach events to parent elements instead of individual child elements.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>



<p>The DOM represents it as:<br>
</p>

<pre class="brush:php;toolbar:false">- Document
  - html
    - head
      - title
    - body
      - h1
      - p
  1. Avoid Inline JavaScript: Use external scripts or addEventListener for clean separation of code.

Conclusion

The JavaScript HTML DOM is a powerful tool for creating dynamic and interactive web pages. By mastering DOM manipulation, event handling, and best practices, developers can build responsive and user-friendly applications that enhance the overall user experience.

Hi, I'm Abhay Singh Kathayat!
I am a full-stack developer with expertise in both front-end and back-end technologies. I work with a variety of programming languages and frameworks to build efficient, scalable, and user-friendly applications.
Feel free to reach out to me at my business email: kaashshorts28@gmail.com.

The above is the detailed content of Mastering the JavaScript HTML DOM: Building Dynamic and Interactive Webpages. For more information, please follow other related articles on the PHP Chinese website!

JavaScript batch css html Object for select using class Interface Property Event Collection dom this innerHTML Access
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Demystifying Destructuring Assignment in JavaScriptNext article：Demystifying Destructuring Assignment in JavaScript

Related articles

See more