基础知识dom属性修改

在JavaScript中操作DOM元素的方式确实有多种，核心可以分为三大类：修改样式、修改HTML属性、修改DOM对象自身的特性。它们的使用场景和效果各有不同，我们用具体例子来梳理清楚：

一、修改元素样式（外观）

主要用于改变元素的视觉表现（颜色、大小、位置等），核心是操作CSS相关的属性。

1. 直接通过 .style 修改行内样式

这是最直接的方式，修改的是元素的行内样式（对应HTML标签中的style属性）。
语法：元素.style.样式属性名 = 值
注意：CSS属性中的连字符（如font-size）在JS中要转为驼峰命名（fontSize）。

<div id="box">测试文本</div>
<script>
  const box = document.getElementById('box');
  
  // 修改行内样式（直接作用于元素的style属性）
  box.style.color = 'red'; // 文字变红
  box.style.fontSize = '20px'; // 字体大小20px
  box.style.backgroundColor = '#f0f0f0'; // 背景色浅灰
</script>

效果：相当于给元素添加了style="color: red; font-size: 20px; background-color: #f0f0f0"。

2. 通过 className 或 classList 切换CSS类

不直接写样式，而是通过切换CSS类名来应用预定义的样式（推荐这种，符合"样式与逻辑分离"）。

<style>
  .active { color: blue; border: 1px solid #000; }
  .big { font-size: 24px; }
</style>
<div id="box">测试文本</div>
<script>
  const box = document.getElementById('box');
  
  // 方式1：用className直接替换类名（会覆盖原有类）
  box.className = 'active'; // 现在元素有class="active"
  
  // 方式2：用classList添加/移除类（更灵活，不覆盖原有类）
  box.classList.add('big'); // 增加class="big"，现在是"active big"
  box.classList.remove('active'); // 移除"active"，现在是"big"
</script>

二、修改HTML属性（标签上的属性）

HTML标签上的属性（如id、src、href、disabled等），可以通过两种方式操作：

• setAttribute() 和 getAttribute()（标准方法，操作的是HTML属性本身）
• 直接访问DOM对象的对应属性（部分属性有对应关系）

1. setAttribute(属性名, 值) 和 getAttribute(属性名)

这是操作HTML属性的标准API，完全对应标签上写的属性。

<img id="pic" src="old.jpg" alt="旧图片">
<a id="link" href="/old">旧链接</a>

<script>
  const pic = document.getElementById('pic');
  const link = document.getElementById('link');
  
  // 修改图片的src属性
  pic.setAttribute('src', 'new.jpg'); // 图片src变为new.jpg
  console.log(pic.getAttribute('src')); // 输出 "new.jpg"
  
  // 修改链接的href属性
  link.setAttribute('href', '/new'); // 链接href变为/new
  link.setAttribute('title', '新链接'); // 增加title属性
</script>

效果：标签会变成 <img src="new.jpg" alt="旧图片"> 和 <a href="/new" title="新链接">旧链接</a>。

2. 直接访问DOM对象的属性（property）

DOM元素在JS中是一个对象，它有很多自带的属性（称为property），部分属性和HTML属性（attribute）是对应的（但不完全一致）。

<img id="pic" src="old.jpg">
<input id="user" type="text" value="初始值">

<script>
  const pic = document.getElementById('pic');
  const input = document.getElementById('user');
  
  // DOM对象的src属性（对应HTML的src属性）
  pic.src = 'new.jpg'; // 和setAttribute('src', 'new.jpg')效果类似
  
  // DOM对象的value属性（对应输入框的当前值）
  input.value = '新值'; // 输入框会显示"新值"
  
  // DOM对象的id属性（对应HTML的id属性）
  pic.id = 'new-pic'; // 元素id变为"new-pic"
</script>

关键区别：attribute vs property

• attribute：是HTML标签上的属性（写在代码里的），通过setAttribute操作，值永远是字符串。
• property：是DOM对象的属性（JS中的对象属性），值可以是各种类型（字符串、布尔值、数字等）。

举例说明差异：

<input type="checkbox" checked="checked" id="cb">

<script>
  const cb = document.getElementById('cb');
  
  // attribute：获取的是HTML上写的属性值（字符串）
  console.log(cb.getAttribute('checked')); // 输出 "checked"（即使写的是checked="true"，也会返回"true"）
  
  // property：获取的是DOM对象的状态（布尔值）
  console.log(cb.checked); // 输出 true（表示复选框当前是勾选状态）
</script>

当用户点击复选框时，cb.checked（property）会变为false，但getAttribute('checked')（attribute）仍然是"checked"（因为HTML标签没改）。

三、特殊场景：修改DOM结构或内容

除了样式和属性，还可能需要修改元素的内容或结构，常见方式：

1. 修改文本内容：element.textContent

   const p = document.querySelector('p');
   p.textContent = '新的文本内容'; // 只改文本，会转义HTML标签
   

2. 修改HTML内容：element.innerHTML

   const div = document.querySelector('div');
   div.innerHTML = '<span>新的<span style="color:red">HTML</span>内容</span>'; // 解析HTML标签
   

3. 添加/删除子元素：appendChild、removeChild等

   const newSpan = document.createElement('span');
   newSpan.textContent = '新元素';
   document.body.appendChild(newSpan); // 向body添加子元素
   

总结：怎么选？

• 改样式：优先用classList切换CSS类；临时简单样式用.style。
• 改HTML属性：简单场景直接用DOM对象的property（如img.src、input.value）；需要严格对应HTML标签属性时用setAttribute。
• 改内容：纯文本用textContent；带HTML结构用innerHTML（注意XSS风险）。

记住：DOM对象的property是"当前状态"，HTML的attribute是"初始设置"，两者有时会同步（如id），有时不同步（如checked、value），这是最容易混淆的点。