JavaScript DOM - 技术栈

一、DOM 核心概念：先搞懂「是什么」

DOM（Document Object Model）是浏览器把 HTML/XML 文档转换成的树形对象结构，简单说就是把网页的每一个标签、文本、属性都变成 JavaScript 能操作的「对象」。

类比理解 ：把网页看作一棵「树」，<html>是根节点，<head>/<body>是分支节点，<div>/<p>/<a>等是子节点，文本、属性是节点的「属性 / 内容」。
核心作用 ：JavaScript 通过 DOM 可以动态修改网页内容、样式、结构，实现交互（比如点击按钮换内容、输入框实时验证、动态加载数据）。

二、DOM 核心操作：四大核心能力（附代码示例）

1. 查找 / 获取 DOM 元素（最基础，先找到才能操作）

这是所有 DOM 操作的第一步，常用方法如下：

javascript

运行

复制代码

// 1. 通过ID获取（唯一，返回单个元素）
const box = document.getElementById('box');

// 2. 通过类名获取（返回元素数组）
const items = document.getElementsByClassName('item');

// 3. 通过标签名获取（返回元素数组）
const ps = document.getElementsByTagName('p');

// 4. 通过选择器获取（最灵活，CSS选择器语法）
const btn = document.querySelector('#btn'); // 单个元素（第一个匹配项）
const lis = document.querySelectorAll('ul li'); // 所有匹配元素（伪数组）

2. 修改 DOM 元素（内容、样式、属性）

找到元素后，可修改其内容、样式、属性，实现动态效果：

javascript

运行

复制代码

// ① 修改内容
const title = document.querySelector('#title');
title.innerText = '新的标题'; // 纯文本（推荐，防XSS）
title.innerHTML = '<span style="color:red">带标签的标题</span>'; // 解析HTML标签

// ② 修改样式（行内样式，优先级高）
title.style.color = 'blue';
title.style.fontSize = '24px'; // 注意：CSS的-连接符转驼峰

// ③ 修改CSS类（推荐，批量样式管理）
title.classList.add('active'); // 添加类
title.classList.remove('active'); // 移除类
title.classList.toggle('active'); // 切换类（有则删，无则加）

// ④ 修改属性
const img = document.querySelector('img');
img.src = 'new-img.jpg'; // 修改图片地址
img.alt = '新图片'; // 修改alt属性

3. 添加 / 删除 DOM 元素（修改页面结构）

可动态创建、插入、删除元素，实现「新增内容」「删除内容」：

javascript

运行

复制代码

// ① 创建新元素
const newDiv = document.createElement('div');
newDiv.innerText = '我是新增的div';
newDiv.classList.add('new-item');

// ② 插入元素（放到某个父元素里）
const container = document.querySelector('#container');
container.appendChild(newDiv); // 插入到父元素最后
container.insertBefore(newDiv, container.firstChild); // 插入到第一个子元素前

// ③ 删除元素
container.removeChild(newDiv); // 父元素删除子元素
newDiv.remove(); // 元素自身删除（更简单）

4. 监听 DOM 事件（实现交互）

给元素绑定事件（点击、鼠标移入、输入等），触发时执行代码：

javascript

运行

复制代码

const btn = document.querySelector('#btn');
// 方式1：直接绑定
btn.onclick = function() {
  alert('按钮被点击了！');
};

// 方式2：addEventListener（推荐，可绑定多个同类型事件）
btn.addEventListener('click', function() {
  // 点击后修改自身文本
  this.innerText = '已点击';
  // 同时修改其他元素样式
  document.querySelector('#box').style.backgroundColor = 'pink';
});

// 常见事件：click（点击）、mouseover（鼠标移入）、input（输入框输入）、load（页面加载完成）

三、实战小案例：完整 DOM 交互 demo

以下是一个综合案例，实现「点击按钮新增列表项，点击列表项删除自身」：

html

预览

复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .list-item { margin: 5px; padding: 5px; border: 1px solid #ccc; }
    .active { color: red; }
  </style>
</head>
<body>
  <button id="addBtn">新增列表项</button>
  <ul id="list"></ul>

  <script>
    // 1. 获取元素
    const addBtn = document.querySelector('#addBtn');
    const list = document.querySelector('#list');

    // 2. 绑定新增按钮点击事件
    addBtn.addEventListener('click', function() {
      // 创建新列表项
      const li = document.createElement('li');
      li.className = 'list-item';
      li.innerText = `列表项${list.children.length + 1}`;

      // 给新列表项绑定删除事件
      li.addEventListener('click', function() {
        this.remove(); // 点击自身删除
      });

      // 插入到列表中
      list.appendChild(li);
    });
  </script>
</body>
</html>

总结

DOM 核心本质：把网页转换成 JS 可操作的树形对象，核心是「找元素→改元素→加 / 删元素→绑事件」。
常用操作优先级 ：查找元素优先用querySelector/querySelectorAll（灵活），修改样式优先用classList（易维护），事件绑定优先用addEventListener（多事件兼容）。
核心注意点 ：操作 DOM 前必须确保元素已加载（可把 JS 放</body>最后，或用DOMContentLoaded事件），避免「找不到元素」的报错。