HTML DOM修改 – BuildCodePro

HTML DOM修改知识点汇总

编程小白也能懂的DOM操作指南 – 用大白话解释所有概念，附带实例演示

知识点导航

什么是DOM？

选取DOM元素

修改内容

修改属性

修改样式

创建元素

事件监听

什么是DOM？

DOM（文档对象模型）就像你网页的蓝图。想象一下：

🏗️ HTML 是建筑图纸（结构）
🎨 CSS 是装修设计（外观）
🔧 DOM 是完整的建筑模型（包含结构和外观）
🛠️ JavaScript 是施工队（修改模型）

浏览器读取HTML后创建DOM树，JavaScript可以通过修改DOM来改变网页内容、结构和样式。

// DOM树结构示例
<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>你好世界!</h1>
    <p>这是一个段落</p>
  </body>
</html>

选取DOM元素

操作DOM前，首先要找到要操作的元素，就像找人之前要知道名字或地址：

getElementById() – 通过身份证(ID)找人
querySelector() – 通过CSS选择器找人（只找第一个）
querySelectorAll() – 通过CSS选择器找所有人（返回列表）
getElementsByClassName() – 通过班级名称找人
getElementsByTagName() – 通过标签名称找人

// 通过ID获取元素
const header = document.getElementById(‘main-header’);

// 通过CSS选择器获取第一个匹配元素
const firstItem = document.querySelector(‘.item’);

// 获取所有匹配元素
const allItems = document.querySelectorAll(‘.item’);

试试看：点击按钮改变下方文本

这段文本会被改变

修改元素内容

修改元素内容就像更换告示牌上的文字：

innerText – 只改文本（安全，不解析HTML）
textContent – 类似innerText，但获取所有文本（包括隐藏的）
innerHTML – 可以改文本也可以添加HTML元素（强大但有风险）

// 获取元素
const element = document.getElementById(‘myElement’);

// 修改纯文本
element.innerText = “新的文本内容”;

// 修改包含HTML的内容
element.innerHTML = “<strong>加粗文本</strong> 和 <em>斜体文本</em>”;

修改内容示例：

原始内容 – 点击下面按钮修改这个文本

修改元素属性

HTML元素都有属性，就像人的特征（身高、体重、衣服颜色）：

getAttribute() – 查看属性的值
setAttribute() – 设置属性的值
removeAttribute() – 删除属性
直接访问属性（如 element.src）

常用属性：id, class, src, href, alt, title, value 等

// 获取图片元素
const image = document.querySelector(‘img’);

// 获取属性值
const src = image.getAttribute(‘src’);

// 设置属性值
image.setAttribute(‘src’, ‘new-image.jpg’);
image.setAttribute(‘alt’, ‘新图片描述’);

// 直接访问属性
image.src = ‘another-image.jpg’;
image.alt = ‘另一个图片’;

属性修改示例：

修改元素样式

动态改变元素样式就像实时更换衣服和化妆：

style 属性 – 逐个修改CSS属性
classList – 添加/移除/切换CSS类
className – 替换整个class属性

推荐使用classList操作类，这样CSS和JavaScript分离更好维护。

// 获取元素
const box = document.getElementById(‘myBox’);

// 直接修改样式
box.style.backgroundColor = ‘blue’;
box.style.color = ‘white’;
box.style.padding = ’20px’;

// 使用classList添加类
box.classList.add(‘active’);

// 使用classList移除类
box.classList.remove(‘hidden’);

// 切换类（有就移除，没有就添加）
box.classList.toggle(‘highlight’);

样式修改示例：点击按钮改变下面盒子的样式

这是一个样式演示盒子

创建和添加元素

创建新元素就像凭空变出新的家具并摆放到房间里：

用createElement()创建新元素
设置元素属性或内容
用appendChild()或insertBefore()添加到DOM中

常用添加方法：

appendChild() – 添加为父元素中最后一个孩子
insertBefore() – 在指定元素前插入
prepend() – 添加为父元素中第一个孩子

// 创建新元素
const newDiv = document.createElement(‘div’);

// 设置内容和属性
newDiv.innerText = “我是新创建的div元素!”;
newDiv.className = ‘new-item’;

// 添加到容器末尾
document.getElementById(‘container’).appendChild(newDiv);

// 添加到容器开头
document.getElementById(‘container’).prepend(newDiv);

创建元素示例：

这里将会添加新元素 ↓

事件处理和监听

事件监听就像给你的元素安装各种传感器：

点击按钮（click）
鼠标移入（mouseover）
按键按下（keydown）
表单提交（submit）

添加事件监听的两种主要方式：

元素属性（onclick=”myFunction()”）
addEventListener()（更强大推荐）

// 方法1：通过属性添加事件（不推荐大量使用）
<button onclick=“handleClick()”>点击我</button>

// 方法2：使用addEventListener（推荐）
const button = document.getElementById(‘myButton’);
button.addEventListener(‘click’, function(event) {
// 处理点击事件
console.log(‘按钮被点击了!’);
});

// 移除事件监听
button.removeEventListener(‘click’, myFunction);

事件监听示例：

尝试点击按钮或将鼠标移入下方区域

知识点导航

发表评论 取消回复

发表评论取消回复