JavaScript HTML DOM (文档对象模型)

天天向上

发布： 2025-02-27 23:43:16

原创

912 人浏览过

HTML DOM（Document Object Model）是浏览器的 JavaScript 环境中用于访问和操作 HTML 文档的接口。它将网页结构化为一个树形结构，可以通过 JavaScript 对网页进行动态的操作，如修改内容、样式、结构等。

DOM 是网页的编程接口，所有 HTML 元素都被表示为 DOM 树中的节点。通过 JavaScript 可以访问这些节点，并进行增、删、改、查等操作。

1. DOM 树结构

DOM 将网页的每个 HTML 元素表示为一个对象，形成一个树形结构，称为 DOM 树。

文档节点（Document）：最顶层的节点，代表整个网页。
元素节点（Element）：代表 HTML 标签，例如 <div>, <p>, <h1> 等。
文本节点（Text）：代表元素中的文本内容。
属性节点（Attribute）：代表元素的属性，如 id, class, href 等。

2. 获取 DOM 元素

JavaScript 提供了多种方法来访问 DOM 中的元素。

常用获取元素的方法：

getElementById(id)：根据元素的 id 获取元素。
getElementsByClassName(className)：根据类名获取元素。
getElementsByTagName(tagName)：根据标签名获取元素。
querySelector(selector)：返回文档中匹配指定 CSS 选择器的第一个元素。
querySelectorAll(selector)：返回文档中所有匹配指定 CSS 选择器的元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Example</title>
</head>
<body>
  <h1 id="header">Hello, World!</h1>
  <p class="text">This is a paragraph.</p>
  <div class="content">This is a div element.</div>

  <script>
    // 使用 getElementById 获取元素
    const header = document.getElementById('header');
    console.log(header.innerText);  // 输出: Hello, World!

    // 使用 getElementsByClassName 获取元素
    const paragraphs = document.getElementsByClassName('text');
    console.log(paragraphs[0].innerText);  // 输出: This is a paragraph.

    // 使用 querySelector 获取元素
    const div = document.querySelector('.content');
    console.log(div.innerText);  // 输出: This is a div element.

    // 使用 querySelectorAll 获取所有匹配的元素
    const allParagraphs = document.querySelectorAll('p');
    console.log(allParagraphs.length);  // 输出: 1
  </script>
</body>
</html>

3. 操作 DOM 元素

获取到 DOM 元素后，你可以使用 JavaScript 来操作这些元素，如修改其内容、样式、属性等。

修改内容：

innerHTML：获取或设置元素的 HTML 内容。
innerText：获取或设置元素的文本内容。

修改样式：

style：通过 JavaScript 修改元素的行内样式。

修改属性：

setAttribute(attributeName, value)：设置元素的属性。
getAttribute(attributeName)：获取元素的属性。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Manipulation Example</title>
</head>
<body>
  <h1 id="header">Hello, World!</h1>
  <p class="text">This is a paragraph.</p>

  <script>
    // 修改元素内容
    const header = document.getElementById('header');
    header.innerText = "New Heading!";  // 修改文本内容

    // 修改元素的样式
    header.style.color = 'blue';  // 设置文本颜色为蓝色

    // 修改元素属性
    const paragraph = document.querySelector('.text');
    paragraph.setAttribute('class', 'newClass');  // 修改类名
    console.log(paragraph.getAttribute('class'));  // 输出: newClass
  </script>
</body>
</html>

4. 创建和删除元素

你可以通过 JavaScript 动态地创建新的 HTML 元素，或者删除现有的元素。

创建元素：

createElement(tagName)：创建一个新的 HTML 元素。
createTextNode(text)：创建一个新的文本节点。

删除元素：

removeChild(child)：从父元素中删除子元素。
remove()：删除当前元素本身。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Create and Remove DOM Elements</title>
</head>
<body>
  <div id="container">
    <h2>Old Header</h2>
  </div>

  <script>
    // 创建新的元素
    const newHeading = document.createElement('h2');
    const textNode = document.createTextNode('New Header');
    newHeading.appendChild(textNode);

    // 将新的元素添加到 DOM 中
    const container = document.getElementById('container');
    container.appendChild(newHeading);  // 将新元素添加到 container 中

    // 删除旧的元素
    const oldHeading = container.querySelector('h2');
    container.removeChild(oldHeading);  // 删除旧的 header
  </script>
</body>
</html>

5. 事件处理

你可以通过 JavaScript 为 DOM 元素添加事件监听器，从而响应用户的交互。

常用的事件方法：

addEventListener(type, listener)：为元素添加事件监听器。
removeEventListener(type, listener)：移除事件监听器。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Handling Example</title>
</head>
<body>
  <button id="clickButton">Click Me</button>

  <script>
    const button = document.getElementById('clickButton');

    // 添加点击事件监听器
    button.addEventListener('click', function() {
      alert("Button clicked!");
    });

    // 移除事件监听器
    // button.removeEventListener('click', function() { alert("Button clicked!"); });
  </script>
</body>
</html>

6. DOM 事件类型

常见的 DOM 事件类型有：

鼠标事件：click, mouseover, mouseout, mousedown, mouseup 等。
键盘事件：keydown, keyup, keypress 等。
表单事件：submit, change, focus, blur 等。

总结

DOM：Document Object Model，是 HTML 和 XML 文档的编程接口，允许脚本动态地访问和修改网页内容。
JavaScript 可以通过 DOM 提供的 API 来 获取、操作、修改 HTML 元素。
常用的 DOM 方法包括 getElementById(), querySelector(), createElement()，以及事件方法如 addEventListener()。
JavaScript 使得 HTML 页面更加动态，可以响应用户的交互，修改网页的结构、样式和内容。

更多详细内容请关注其他相关文章。