掌握 JavaScript HTML DOM：构建动态和交互式网页

# Web 开发# JavaScript# 初学者

JavaScript HTML DOM：完整指南

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

什么是 DOM？

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

例子：

对于此 HTML：



  
    DOM Example
  
  
    
Hello, DOM!

    
This is an example paragraph.

DOM 将其表示为：

- 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);
  • querySelector 选择第一个与 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属性。

    document.getElementById("title").style.color = "blue";
document.getElementById("title").style.fontSize = "24px";

    添加和删​​除元素

    1. 添加元素

  • createElement：创建一个新元素。
  • appendChild：将元素附加到父级。
    • const newParagraph = document.createElement("p");
newParagraph.innerText = "This is a new paragraph.";
document.body.appendChild(newParagraph);

    2. 删除元素

  • removeChild：删除子元素。
    • const element = document.getElementById("title");
  element.parentNode.removeChild(element);

    DOM 中的事件处理

    事件是浏览器检测到的动作或发生的情况，例如点击或按键。

    添加事件监听器

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

    document.getElementById("title").addEventListener("click", () => {
  alert("Title clicked!");
});

    常见事件

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

    • 遍历 DOM

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

    父母与孩子

  • parentNode：获取父节点。
  • childNodes：列出所有子节点。
  • children：列出所有子元素。
    • const parent = document.getElementById("title").parentNode;
  const children = document.body.children;

    兄弟姐妹

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

    • 高级 DOM 功能

    1. 克隆元素

    使用“cloneNode”创建元素的副本。

    const clone = document.getElementById("title").cloneNode(true);
document.body.appendChild(clone);

    2. 使用类

    使用“classList”属性来操作类。

    const element = document.getElementById("title");
element.classList.add("highlight");
element.classList.remove("highlight");
element.classList.toggle("highlight");

    3.使用模板

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

    使用模板的 JavaScript：

    const template = document.getElementById("myTemplate").content.cloneNode(true);
document.body.appendChild(template);

    DOM 操作的最佳实践

  • 尽量减少重排和重绘：批量更改 DOM 以避免过度渲染。使用 documentFragment 进行多次更新。
  • 使用事件委托：将事件附加到父元素而不是单个子元素。
    • document.body.addEventListener("click", (e) => {
     if (e.target.tagName === "BUTTON") {
       console.log("Button clicked!");
     }
   });
  • 避免内联 JavaScript：使用外部脚本或 addEventListener 来干净地分离代码。

    • 结论

    JavaScript HTML DOM 是创建动态和交互式网页的强大工具。通过掌握 DOM 操作、事件处理和最佳实践，开发人员可以构建响应迅速且用户友好的应用程序，从而增强整体用户体验。