掌握 JavaScript HTML DOM：构建动态和交互式网页-js教程-PHP中文网

Mastering the JavaScript HTML DOM: Building Dynamic and Interactive Webpages

JavaScript HTML DOM：完整指南

文档对象模型 (DOM) 是 Web 文档的编程接口。它将网页的结构表示为对象树，使开发人员能够使用 JavaScript 操作 HTML 和 CSS。通过掌握 DOM，您可以创建动态的交互式网页。

什么是 DOM？

DOM 是 HTML 文档的结构化表示。它允许 JavaScript 动态访问和操作网页的元素、属性和内容。

例子：

对于此 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

登录后复制

访问 DOM

JavaScript 提供了选择和操作 DOM 元素的方法。

常见的选择方法

getElementById 通过 ID 选择元素。

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

登录后复制

getElementsByClassName 按类名选择元素（返回集合）。

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

登录后复制

getElementsByTagName 按标签名称选择元素（例如 div、p）。

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

登录后复制

查询选择器 选择与 CSS 选择器匹配的第一个元素。

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

登录后复制

querySelectorAll 选择与 CSS 选择器匹配的所有元素（返回 NodeList）。

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

登录后复制

DOM 操作

选择后，您可以动态修改元素、属性和内容。

1.更改内容

innerHTML：设置或获取 HTML 内容。

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

登录后复制

innerText 或 textContent：设置或获取纯文本。

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

登录后复制

2.更改属性

使用setAttribute和getAttribute修改元素属性。

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

登录后复制

直接修改 id、className 或 src 等属性。

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

登录后复制

3.改变风格

直接修改 CSS 属性。

<!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.添加元素

createElement：创建一个新元素。
appendChild：将元素追加到父元素。

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

登录后复制

2.删除元素

removeChild：删除子元素。

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

登录后复制

DOM 中的事件处理

事件是浏览器检测到的操作或事件，例如单击或按键。

添加事件监听器

使用 addEventListener 将事件绑定到元素。

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

登录后复制

常见事件

鼠标事件：单击、双击、鼠标悬停、鼠标移出
键盘事件：keydown、keyup
表单事件：提交、更改、聚焦

遍历 DOM

您可以使用 DOM 树中的关系在元素之间导航。

家长和孩子

parentNode：获取父节点。
childNodes：列出所有子节点。
children：列出所有子元素。

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

登录后复制

兄弟姐妹

nextSibling：获取下一个兄弟节点。
previousSibling：获取上一个兄弟节点。

高级 DOM 功能

1.克隆元素

使用cloneNode创建元素的副本。

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

登录后复制

2.使用类

使用 classList 属性来操作类。

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

登录后复制

3.使用模板

HTML 模板允许重复使用内容。

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

登录后复制

DOM 操作的最佳实践

最小化回流和重绘：
- 批量 DOM 更改以避免过度渲染。
- 使用 documentFragment 进行多次更新。
使用事件委托:

将事件附加到父元素而不是单个子元素。

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

登录后复制