自学内容网 自学内容网
自学内容网 > 正文

如何用 JavaScript 操作 DOM 元素？

🕗 发布于 2024-12-08 06:28 javascript  前端  

如何用 JavaScript 操作 DOM 元素？——结合实际项目代码示例讲解

在前端开发中，DOM（文档对象模型）操作是与页面交互的核心。通过 DOM 操作，开发者可以动态地修改页面内容、响应用户交互、控制样式等。JavaScript 提供了强大的 DOM 操作 API，帮助开发者高效地实现这些功能。

本文将结合实际项目代码示例，系统讲解如何用 JavaScript 操作 DOM 元素。我们将从基础操作开始，逐步深入到更复杂的应用场景。

目录

  1. 引言：什么是 DOM 操作？
  2. DOM 元素的获取
    • getElementById()
    • getElementsByClassName()
    • querySelector() 与 querySelectorAll()
  3. DOM 元素的修改
    • 修改文本内容
    • 修改属性
    • 修改样式
  4. DOM 元素的创建与插入
    • 创建新元素
    • 插入新元素
    • 删除元素
  5. 事件处理与 DOM 操作
  6. 实际项目代码示例
    • 示例 1: 基础 DOM 操作
    • 示例 2: 动态创建元素并插入
    • 示例 3: 事件处理与 DOM 更新
  7. 总结与最佳实践

1. 引言：什么是 DOM 操作？

DOM（文档对象模型）是浏览器提供的一种接口，它将 HTML 文档中的每个元素、属性、文本节点都映射为一个对象。在 JavaScript 中，我们可以通过 DOM 操作来访问和修改这些对象，从而动态更新页面内容和响应用户交互。

常见的 DOM 操作包括：

  • 获取元素
  • 修改元素内容、属性、样式
  • 创建和删除元素
  • 绑定事件

2. DOM 元素的获取

JavaScript 提供了多种方法来获取页面上的 DOM 元素：

getElementById()

通过元素的 id 获取单个元素。

let element = document.getElementById('myElement');
console.log(element);  // 输出对应 id 为 'myElement' 的元素
getElementsByClassName()

通过元素的 class 获取一组元素，返回一个类数组（HTMLCollection）。

let elements = document.getElementsByClassName('myClass');
console.log(elements);  // 输出所有类名为 'myClass' 的元素
querySelector() 与 querySelectorAll()
  • querySelector() 获取第一个匹配的元素。
  • querySelectorAll() 获取所有匹配的元素，返回一个 NodeList（类数组）。
let firstDiv = document.querySelector('div');
console.log(firstDiv);  // 输出第一个 <div> 元素

let allDivs = document.querySelectorAll('div');
console.log(allDivs);   // 输出所有 <div> 元素

3. DOM 元素的修改

修改文本内容

可以使用 textContent 或 innerText 修改元素的文本内容。

let element = document.getElementById('myElement');
element.textContent = '新的文本内容';  // 修改文本
修改属性

可以通过 setAttribute() 和 getAttribute() 修改或获取元素的属性值。

let imgElement = document.querySelector('img');
imgElement.setAttribute('src', 'newImage.jpg');  // 修改图片路径

let srcValue = imgElement.getAttribute('src');   // 获取当前图片路径
console.log(srcValue);  // 输出: 'newImage.jpg'
修改样式

可以使用 style 属性直接修改内联样式，或者通过 classList 操作类名来修改样式。

let div = document.getElementById('myDiv');
div.style.backgroundColor = 'red';  // 修改背景色

// 使用 classList 操作类名
div.classList.add('newClass');  // 添加类
div.classList.remove('oldClass');  // 移除类

4. DOM 元素的创建与插入

创建新元素

可以使用 document.createElement() 创建新的 HTML 元素。

let newDiv = document.createElement('div');
newDiv.textContent = '这是一个新创建的 div 元素';
document.body.appendChild(newDiv);  // 将新元素添加到页面中
插入新元素

可以使用 appendChild() 将新元素插入到父元素中，或者使用 insertBefore() 在指定位置插入元素。

let parent = document.getElementById('parentElement');
let newDiv = document.createElement('div');
newDiv.textContent = '新插入的元素';

// 将新元素添加到父元素的末尾
parent.appendChild(newDiv);

// 在父元素的第一个子元素前插入新元素
let firstChild = parent.firstChild;
parent.insertBefore(newDiv, firstChild);
删除元素

使用 removeChild() 删除元素，或者直接使用 remove() 删除元素本身。

let elementToRemove = document.getElementById('elementToDelete');
elementToRemove.remove();  // 直接删除该元素

// 或者通过父元素删除
let parent = document.getElementById('parentElement');
parent.removeChild(elementToRemove);

5. 事件处理与 DOM 操作

JavaScript 可以通过事件处理器来响应用户的操作（如点击、键盘输入等）。

绑定事件

使用 addEventListener() 来绑定事件处理函数，常见的事件包括 click、mouseover、keydown 等。

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('按钮被点击了！');
});
事件对象

事件处理函数可以接收一个事件对象作为参数，该对象包含了有关事件的详细信息。

let button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  console.log(event.target);  // 输出触发事件的元素
  console.log(event.type);    // 输出事件类型，'click'
});

6. 实际项目代码示例

示例 1: 基础 DOM 操作

假设我们需要实现一个简单的交互：点击按钮时，修改某个元素的文本和样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM 操作示例</title>
</head>
<body>
  <div id="message">点击按钮改变文本</div>
  <button id="changeTextBtn">改变文本</button>

  <script>
    let button = document.getElementById('changeTextBtn');
    button.addEventListener('click', function() {
      let messageDiv = document.getElementById('message');
      messageDiv.textContent = '文本已被修改！';
      messageDiv.style.color = 'blue';
    });
  </script>
</body>
</html>
示例 2: 动态创建元素并插入

我们需要在页面加载时动态生成并插入一个列表。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态创建列表</title>
</head>
<body>
  <ul id="itemList"></ul>

  <script>
    let items = ['苹果', '香蕉', '橙子'];
    let ul = document.getElementById('itemList');

    items.forEach(function(item) {
      let li = document.createElement('li');
      li.textContent = item;
      ul.appendChild(li);
    });
  </script>
</body>
</html>
示例 3: 事件处理与 DOM 更新

我们要实现一个简单的计数器，点击按钮时数字加一。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计数器</title>
</head>
<body>
  <div id="counter">0</div>
  <button id="incrementBtn">加一</button>

  <script>
    let counterDiv = document.getElementById('counter');
    let button = document.getElementById('incrementBtn');
    let count = 0;

    button.addEventListener('click', function() {
      count++;
      counterDiv.textContent = count;
    });
  </script>
</body>
</html>

7. 总结与最佳实践

  • 获取元素：可以通过 getElementById()、querySelector() 等方法获取 DOM 元素。
  • 修改元素：可以使用 textContent、setAttribute()、style 等方法修改元素的内容、属性和样式。

原文地址：https://blog.csdn.net/huang3513/article/details/144318207

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2025