如何使用JavaScript操作DOM节点的属性？

一、核心概念：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）。