一、核心概念：DOM 属性的两类形式
在操作前先分清两个易混概念，避免踩坑：
- HTML 原生属性：标签上写的属性（如
id="box"、src="img.jpg"、class="content"）； - DOM 对象属性：JS 获取 DOM 节点后，节点对象自带的属性（如
node.id、node.src、node.className）；大部分场景下两者可以互通，但部分属性有专属写法（比如class对应className）。
二、通用操作：getAttribute/setAttribute/removeAttribute
这是操作所有 HTML 属性的通用方法，无论原生属性还是自定义属性都适用，兼容性最好。
| 方法 | 作用 | 语法示例 |
|---|---|---|
getAttribute(属性名) | 获取属性值 | box.getAttribute('id') |
setAttribute(属性名, 值) | 设置 / 新增属性 | box.setAttribute('title', '提示文字') |
removeAttribute(属性名) | 删除属性 | box.removeAttribute('class') |
代码示例：通用方法操作属性
html
预览
<div id="box" class="container" data-index="1">测试div</div> <script> const box = document.getElementById('box'); // 1. 获取属性 console.log(box.getAttribute('id')); // 输出：box console.log(box.getAttribute('class')); // 输出：container console.log(box.getAttribute('data-index')); // 输出：1（自定义属性） // 2. 设置/新增属性 box.setAttribute('title', '这是一个div'); // 新增title属性 box.setAttribute('class', 'new-container'); // 修改class属性 box.setAttribute('data-type', 'test'); // 新增自定义data属性 // 3. 删除属性 box.removeAttribute('data-index'); // 删除data-index属性 // 查看修改后的HTML：<div id="box" class="new-container" data-type="test" title="这是一个div">测试div</div> console.log(box.outerHTML); </script>三、快捷操作：DOM 对象直接访问属性
对于常用的原生属性（如 id、src、href、type 等），可以直接通过DOM节点.属性名操作，比通用方法更简洁。
⚠️ 注意：部分属性名和 HTML 标签里的写法不同（核心差异）：
- HTML 里的
class→ JS 里的className（因为 class 是 JS 关键字）； - HTML 里的
for（label 标签） → JS 里的htmlFor； - HTML 里的
readonly→ JS 里的readOnly（驼峰命名）。
代码示例：快捷操作属性
html
预览
<img id="img" src="old.jpg" alt="旧图片"> <input type="text" id="input" class="form-input" readonly> <label for="input" id="label">输入框：</label> <script> const img = document.getElementById('img'); const input = document.getElementById('input'); const label = document.getElementById('label'); // 1. 获取属性 console.log(img.src); // 输出：完整的图片URL（如http://xxx/old.jpg） console.log(input.className); // 输出：form-input（对应class属性） console.log(label.htmlFor); // 输出：input（对应for属性） console.log(input.readOnly); // 输出：true（布尔值，不是字符串） // 2. 设置属性 img.src = 'new.jpg'; // 修改图片地址 img.alt = '新图片'; // 修改alt属性 input.className = 'new-form-input'; // 修改class input.readOnly = false; // 取消只读 // 3. 清空属性（部分属性可直接赋值为空） img.alt = ''; </script>四、特殊属性处理
1. class 属性：推荐用 classList（操作样式类更灵活）
直接修改className会覆盖全部类，而classList支持「添加、移除、切换、判断」单个类，是操作样式类的最佳方式。
html
预览
<div id="demo" class="box">测试样式</div> <script> const demo = document.getElementById('demo'); // 1. 添加类（不会覆盖原有类） demo.classList.add('active', 'red'); // 可同时加多个类 // 2. 移除类 demo.classList.remove('box'); // 3. 切换类（有则删，无则加，适合点击切换场景） demo.classList.toggle('active'); // 4. 判断是否包含某个类 console.log(demo.classList.contains('red')); // 输出：true </script>2. data-* 自定义属性：推荐用 dataset
HTML5 新增的data-*自定义属性（如data-id、data-name），可以通过dataset快捷访问，无需写getAttribute。
html
预览
<div id="user" data-id="1001" data-user-name="张三">用户信息</div> <script> const user = document.getElementById('user'); // 1. 获取data属性（自动转驼峰：data-user-name → userName） console.log(user.dataset.id); // 输出：1001 console.log(user.dataset.userName); // 输出：张三 // 2. 设置data属性 user.dataset.age = '20'; // 新增data-age="20" user.dataset.userName = '李四'; // 修改data-user-name="李四" // 3. 删除data属性（赋值为null或delete） delete user.dataset.age; </script>3. 布尔属性：如 checked、disabled、selected
这类属性的特点是「只要存在就生效」，JS 中对应的值是布尔类型（true/false），而非字符串。
html
预览
<input type="checkbox" id="checkbox" checked> <button id="btn" disabled>禁用按钮</button> <script> const checkbox = document.getElementById('checkbox'); const btn = document.getElementById('btn'); // 获取布尔属性 console.log(checkbox.checked); // 输出：true console.log(btn.disabled); // 输出：true // 修改布尔属性 checkbox.checked = false; // 取消勾选 btn.disabled = false; // 启用按钮 </script>五、常用场景示例
示例 1：点击按钮切换图片
html
预览
<img id="banner" src="banner1.jpg" alt="轮播图1"> <button id="changeBtn">切换图片</button> <script> const banner = document.getElementById('banner'); const changeBtn = document.getElementById('changeBtn'); let isFirst = true; changeBtn.addEventListener('click', function() { if (isFirst) { banner.src = 'banner2.jpg'; banner.alt = '轮播图2'; } else { banner.src = 'banner1.jpg'; banner.alt = '轮播图1'; } isFirst = !isFirst; }); </script>示例 2：获取表单输入框的属性并修改
html
预览
<input type="text" id="username" placeholder="请输入用户名" maxlength="10"> <button id="checkBtn">查看属性</button> <script> const username = document.getElementById('username'); const checkBtn = document.getElementById('checkBtn'); checkBtn.addEventListener('click', function() { // 获取输入框属性 console.log('占位符：', username.placeholder); console.log('最大长度：', username.maxLength); console.log('当前值：', username.value); // 修改属性 username.placeholder = '请输入真实姓名'; username.maxLength = 15; }); </script>总结
- 通用场景：用
getAttribute/setAttribute/removeAttribute操作所有属性（包括自定义属性）； - 常用原生属性：直接用
DOM节点.属性名（如img.src、input.className）更简洁； - 特殊属性：
- class 用
classList（add/remove/toggle）； - data-* 自定义属性用
dataset； - 布尔属性（checked/disabled）赋值布尔值（true/false）。
- class 用
