DOM 操作入门：HTML 元素操作与页面事件处理

DOM 操作入门：HTML 元素操作与页面事件处理

DOM 操作入门：HTML 元素操作与页面事件处理

在现代 web 开发中，DOM（文档对象模型）操作是前端开发者必须掌握的核心技能。无论是修改 HTML 结构、操作 CSS 样式还是处理用户交互事件，都需要通过 DOM 来实现。对于刚接触前端开发的新手来说，理解 DOM 操作可能会显得有些复杂，但只要掌握了基本概念和常用方法，就能轻松上手。

什么是 DOM？

DOM（Document Object Model）是 web 文档的标准接口。它将 HTML 和 XML 文档表示为对象的层次结构，使得开发者可以通过 JavaScript 来操作网页内容、样式和结构。

简单来说，DOM 允许我们在 JavaScript 中访问和修改 HTML 元素及其属性，并且可以对页面事件进行监听和处理。

通过 DOM，我们可以实现动态网页效果，比如响应用户交互、更新页面内容等。

1. 如何操作 HTML 元素？

在 JavaScript 中，最常见的任务之一就是操作 DOM。要操作某个元素，首先需要找到它。DOM 提供了许多方法来选择元素，包括以下几种方式：

1.1 使用 `document.getElementById()` 获取单个元素

document.getElementById() 方法用于通过元素的 ID 属性获取单个 HTML 元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM 操作入门</title>
</head>
<body>
    <h1 id="mainTitle">欢迎学习 DOM 操作！</h1>
    <script>
        // 通过 ID 获取元素
        const title = document.getElementById('mainTitle');
        console.log(title); // 输出: <h1>欢迎学习 DOM 操作！</h1>
        
        // 修改元素内容
        title.textContent = 'DOM 操作很简单！';
    </script>
</body>
</html>

1.2 使用 `document.querySelector()` 和 `document.querySelectorAll()` 获取多个元素

querySelector() 方法用于通过 CSS 选择器获取单个匹配的元素，而 querySelectorAll() 则返回所有匹配的元素集合。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM 操作入门</title>
</head>
<body>
    <div class="container">
        <p id="para1">第一个段落。</p>
        <p id="para2">第二个段落。</p>
        <p id="para3">第三个段落。</p>
    </div>
    
    <script>
        // 通过 CSS 选择器获取元素
        const para = document.querySelector('.container p');
        console.log(para); // 输出: 第一个匹配的 <p> 元素
        
        // 获取多个元素
        const paras = document.querySelectorAll('.container p');
        paras.forEach(p => {
     
            console.log(p.textContent);
        });
    </script>
</body>
</html>

1.3 创建和删除 HTML 元素

使用 document.createElement