Mastering the JavaScript HTML DOM: Building Dynamic and Interactive Webpages-JS Tutorial-php.cn

Mastering the JavaScript HTML DOM: Building Dynamic and Interactive Webpages

Mary-Kate Olsen

Release： 2024-12-20 02:57:12

Original

357 people have browsed it

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

Copy after login

Accessing the DOM

JavaScript provides methods to select and manipulate DOM elements.

Common Selection Methods

getElementById Selects an element by its ID.

   const title = document.getElementById("title");
   console.log(title.innerText); // Output: Hello, DOM!

Copy after login

getElementsByClassName Selects elements by their class name (returns a collection).

   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);

Copy after login

getElementsByTagName Selects elements by their tag name (e.g., div, p).

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

Copy after login

querySelector Selects the first element matching a CSS selector.

   const title = document.querySelector("#title");

Copy after login

querySelectorAll Selects all elements matching a CSS selector (returns a NodeList).

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

Copy after login

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!";

Copy after login

innerText or textContent: Sets or gets plain text.

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

Copy after login

2. Changing Attributes

Use setAttribute and getAttribute to modify element attributes.

  const link = document.querySelector("a");
  link.setAttribute("href", "https://example.com");

Copy after login

Directly modify attributes like id, className, or src.

  const image = document.querySelector("img");
  image.src = "image.jpg";

Copy after login

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

Copy after login

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!

Copy after login

2. Removing Elements

removeChild: Removes a child element.

   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);

Copy after login

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);

Copy after login

Common Events

Mouse Events: click, dblclick, mouseover, mouseout
Keyboard Events: keydown, keyup
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");

Copy after login

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");

Copy after login

2. Working with Classes

Use the classList property to manipulate classes.

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

Copy after login

3. Using Templates

HTML templates allow reusable content.

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

Copy after login

Best Practices for DOM Manipulation

Minimize Reflows and Repaints:
- Batch DOM changes to avoid excessive rendering.
- Use documentFragment for multiple updates.
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

Copy after login

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!