操作DOM属性的核心是区分Attribute与Property：Attribute指HTML标签上的原始字符串属性，通过getAttribute、setAttribute等方法操作；Property是DOM对象的JavaScript属性，可直接访问如element.id、element.value。前者适用于自定义属性或需操作HTML结构的场景，后者更高效且能反映实时状态，尤其适合表单元素和常用属性。对于data-*属性，推荐使用dataset API；样式操作应通过style.property进行。注意避免混淆两者导致的状态错误，优先使用Property提升性能与可维护性。

JavaScript操作DOM元素属性的核心，无非就是围绕着获取、设置、移除和检查这几大需求。最直接且常用的方法是利用

getAttribute()

、

setAttribute()

、

removeAttribute()

和

hasAttribute()

这套API，它们能够让你直接与HTML元素上的那些“原始”属性打交道。当然，对于很多常用属性，JavaScript也提供了更便捷的直接属性访问方式，比如

element.id

、

element.className

，甚至是

element.style.color

等等，这些往往更符合我们日常编程的直觉。

要操作DOM元素的属性，我们主要有以下几种途径，每种都有其适用场景和一些我个人觉得需要注意的细节：

1. 获取属性值：

element.getAttribute(name)

这个方法非常直接，它会返回指定属性的字符串值。如果属性不存在，则返回

null

。

const myDiv = document.getElementById('myDiv'); const id = myDiv.getAttribute('id'); // 获取id属性 const dataValue = myDiv.getAttribute('data-custom'); // 获取自定义data属性 console.log(id, dataValue);

2. 设置属性值：

element.setAttribute(name, value)

这个方法用于设置指定属性的值。如果该属性已经存在，它的值会被更新；如果属性不存在，则会创建该属性。

value

参数会被自动转换为字符串。

const myImg = document.querySelector('img'); myImg.setAttribute('src', 'new-image.jpg'); // 设置图片的src myImg.setAttribute('alt', '一张漂亮的风景图'); // 设置alt文本 myImg.setAttribute('data-id', '12345'); // 设置自定义data属性

3. 移除属性：

element.removeAttribute(name)

顾名思义，这个方法就是用来从元素中移除指定属性的。

const myButton = document.querySelector('button'); myButton.removeAttribute('disabled'); // 移除按钮的disabled属性，使其可点击 myButton.removeAttribute('data-temp'); // 移除一个临时数据属性

4. 检查属性是否存在：

element.hasAttribute(name)

这个方法会返回一个布尔值，指示元素是否拥有指定的属性。

const myInput = document.getElementById('myInput'); if (myInput.hasAttribute('required')) {     console.log('这个输入框是必填的。'); }

5. 直接访问DOM属性（Property） 对于很多常见的HTML属性，DOM元素对象上都有对应的JavaScript属性（Property）。这包括

id

、

className

、

src

、

href

、

value

、

checked

、

disabled

等等。这些属性通常更方便，而且它们处理的值类型也更灵活（不总是字符串）。

const myHeading = document.querySelector('h1'); myHeading.id = 'mainTitle'; // 设置id myHeading.className = 'highlight important'; // 设置class myHeading.textContent = '新的标题文本'; // 设置文本内容，这其实不是属性，但很常用  const myCheckbox = document.getElementById('myCheckbox'); myCheckbox.checked = true; // 设置复选框为选中状态（布尔值） myCheckbox.value = 'optionA'; // 设置输入框的值  const myLink = document.querySelector('a'); myLink.href = 'https://www.example.com'; // 设置链接地址

值得一提的是，对于CSS样式，我们通常通过

element.style.propertyName

来操作，而不是

setAttribute('style', '...')

，后者会覆盖所有原有内联样式。

const myParagraph = document.querySelector('p'); myParagraph.style.color = 'blue'; myParagraph.style.fontSize = '18px';

*6. 使用

dataset

API操作`data-

自定义属性** HTML5引入了

data-*

属性，允许我们在HTML元素上存储自定义数据。JavaScript通过

dataset`属性提供了一个非常方便的API来操作这些属性。

立即学习“Java免费学习笔记（深入）”；

<div id="userProfile" data-id="101" data-name="Alice" data-status="active"></div>

const userProfile = document.getElementById('userProfile'); console.log(userProfile.dataset.id);     // "101" console.log(userProfile.dataset.name);   // "Alice" userProfile.dataset.status = 'inactive'; // 设置data-status="inactive" userProfile.dataset.lastLogin = Date.now(); // 添加新的data-last-login属性

我个人觉得，对于自定义数据，

dataset

API是首选，它比

getAttribute/setAttribute

更语义化，也更安全。

JavaScript DOM操作中，元素的“属性（Attribute）”和“特性（Property）”有什么本质区别？

这其实是个老生常谈但又容易犯错的地方，很多初学者都会混淆。简单来说，属性（Attribute）是HTML文档中的东西，是你在HTML标签里写出来的那些键值对。而特性（Property）是JavaScript DOM对象中的东西，是你在JavaScript代码里访问的那些对象成员。它们虽然经常互相映射，但本质上是两回事。

想象一下：

• Attribute：就像是你给一个包裹贴的标签，上面写着“收件人：张三”、“重量：2kg”。这些信息都是字符串，是包裹的“描述”。
• Property：就像是快递员拿到包裹后，在系统里录入的“包裹对象”的字段。系统里可能有一个

  recipient

  字段（类型是

  User

  对象），一个

  weight

  字段（类型是

  Number

  ），还有一个

  isFragile

  字段（类型是

  Boolean

  ）。

关键区别点：

1. 来源和类型：

   • Attribute：来自HTML标记，总是字符串类型。例如，

     <input type="checkbox" checked>

     中的

     checked

     是一个布尔属性，但它的值在HTML里其实是字符串

     "checked"

     （或者根本不写值，只写属性名）。

   • Property：是DOM对象（JavaScript对象）的成员，可以是任何JavaScript数据类型（字符串、数字、布尔、对象等）。例如，

     checkbox.checked

     是一个布尔值（

     true

     或

     false

     ）。

2. 同步机制：

   • 有些Attribute和Property是同步的，比如

     id

     。你修改

     element.id

     ，HTML中的

     id

     属性也会随之改变；反之亦然。

   • 有些Attribute和Property是不同步的，或者说，它们只在初始加载时同步。最典型的例子是

     value

     属性在

     <input>

     元素上。当你用户在输入框里输入内容后，

     input.value

     （Property）会反映当前输入框里的内容，但

     input.getAttribute('value')

     （Attribute）仍然会返回HTML中最初设置的那个值。

   • 另一个例子是

     checked

     。

     checkbox.checked

     （Property）反映了复选框当前的选中状态，而

     checkbox.getAttribute('checked')

     （Attribute）只反映HTML中最初的

     checked

     属性是否存在。

3. 命名约定：

   • Attribute的命名通常是HTML规范的，比如

     class

     ，

     for

     （在

     <label>

     中）。

   • Property的命名则遵循JavaScript的驼峰命名法，比如

     className

     对应

     class

     属性，

     htmlFor

     对应

     for

     属性。

示例：

<input id="myInput" type="text" value="初始值"> <input id="myCheckbox" type="checkbox" checked>

const input = document.getElementById('myInput'); console.log(input.getAttribute('value')); // "初始值" console.log(input.value);                 // "初始值"  input.value = '用户输入的新值'; // 用户在页面上输入了新值 console.log(input.getAttribute('value')); // 仍然是 "初始值" (HTML Attribute未变) console.log(input.value);                 // "用户输入的新值" (DOM Property已变)  const checkbox = document.getElementById('myCheckbox'); console.log(checkbox.getAttribute('checked')); // "checked" (HTML Attribute存在) console.log(checkbox.checked);                 // true (DOM Property为布尔值)  checkbox.checked = false; // 用户取消选中 console.log(checkbox.getAttribute('checked')); // 仍然是 "checked" console.log(checkbox.checked);                 // false

我的经验是，理解这个区别对于编写健壮的DOM操作代码至关重要，特别是处理表单元素的状态时。

什么时候应该用

setAttribute

，什么时候直接访问DOM属性更方便？

这是一个很实用的问题，我个人在写代码时也会经常权衡。没有绝对的答案，但有一些指导原则可以遵循。

优先使用直接访问DOM属性（Property）：

对于绝大多数常见的HTML属性，如

id

、

className

、

src

、

href

、

value

、

checked

、

disabled

、

readonly

、

selected

、

innerHTML

、

textContent

、

style

等，直接访问DOM属性通常是更推荐、更方便、更高效的方式。

• 类型安全和语义化： DOM属性会自动处理数据类型。例如，

  element.checked = true

  直接设置布尔值，比

  setAttribute('checked', 'checked')

  或

  setAttribute('checked', '')

  更清晰，也避免了字符串转换的潜在问题。

  element.disabled = true

  比

  setAttribute('disabled', 'disabled')

  更直观。

• 效率： 通常，直接访问DOM属性比调用

  getAttribute

  /

  setAttribute

  方法更快，因为它们直接映射到DOM内部的数据结构。

• 反映当前状态： 对于表单元素，如

  <input>

  的

  value

  或

  <checkbox>

  的

  checked

  ，直接属性访问会反映用户当前的交互状态，而

  getAttribute

  可能只返回HTML中定义的初始值。这是非常关键的一点，如果你想获取用户输入，就必须用

  element.value

  。

• CSS样式操作： 总是通过

  element.style.propertyName

  来操作内联样式，而不是

  setAttribute('style', '...')

  ，后者会覆盖掉所有已有的内联样式。

使用

setAttribute

getAttribute

removeAttribute

的场景：

尽管直接属性访问很方便，但

setAttribute

等方法也有其不可替代的用武之地。

Snyk Code

当下比较流行的代码安全检查工具

27

查看详情

• *处理自定义属性（`data-

  除外）：** 如果你需要操作非标准或浏览器不直接支持的自定义属性（虽然现在大多用

  data-*

  了），或者一些不常用的标准属性但没有直接DOM Property的，

  setAttribute`是唯一的选择。

• *操作`data-

  属性（旧浏览器兼容或特定需求）：** 尽管

  dataset

  API是操作

  data-*

  的首选，但在一些非常老的浏览器环境下，或者当你需要精确地以字符串形式获取或设置这些属性时，

  getAttribute

  /

  setAttribute`依然可用。

• 一些特殊属性： 某些HTML属性没有直接的DOM Property映射，或者它们的Property行为与Attribute行为有微妙差异。例如，

  colspan

  、

  rowspan

  等表格布局属性，或者一些

  aria-*

  无障碍属性。

• 需要确保HTML属性的存在或移除： 有时候，你可能需要确保某个HTML属性（即使它没有值，比如

  disabled

  ）是确实存在或确实被移除的。

  setAttribute

  可以明确地添加它，

  removeAttribute

  可以明确地移除它。

• SVG或XML命名空间属性： 在处理SVG或XML文档时，你可能需要使用

  setAttributeNS

  来处理带命名空间的属性。

我的建议： 我的经验是，如果你不确定，先尝试直接访问DOM属性。如果它能满足你的需求，并且行为符合预期，那就用它。只有当直接属性访问无法实现你的目标，或者你明确需要操作HTML层面的原始字符串属性时，才转向使用

setAttribute

这套API。这能让你的代码更简洁、更符合JavaScript的惯例，也更容易理解。

操作DOM元素属性时，有哪些常见的陷阱和最佳实践？

在DOM属性操作中，我见过不少开发者掉进一些“坑”里，或者没有采用最佳实践，导致代码不够健壮或性能不佳。这里我总结一些常见的陷阱和我认为的最佳实践。

常见的陷阱：

1. 混淆Attribute和Property： 这是最常见的错误，我在上面已经详细解释了。记住，

   getAttribute('value')

   可能不是你想要的，尤其是当用户已经与表单元素交互后。

   element.value

   才是你通常需要获取的当前值。同样，设置布尔属性（如

   disabled

   、

   checked

   ）时，

   element.disabled = true

   远比

   setAttribute('disabled', 'disabled')

   或

   setAttribute('disabled', true)

   更正确、更语义化。

2. 大小写敏感性问题： HTML属性名通常不区分大小写（尽管规范建议小写），但在JavaScript中，DOM属性名是区分大小写的。例如，

   element.className

   是无效的，必须是

   element.className

   。自定义

   data-*

   属性在HTML中是小写连字符形式（

   data-user-id

   ），但在

   dataset

   中会转换为驼峰命名（

   element.dataset.userId

   ）。

3. 频繁操作DOM导致的性能问题： 每次修改DOM属性，都可能导致浏览器重新计算布局（reflow）和重新绘制（repaint），这是非常耗费性能的。如果在一个循环中频繁修改多个元素的属性，或者在短时间内多次修改同一个元素的属性，页面可能会出现卡顿或闪烁。

4. 不当使用

   innerHTML

   ： 虽然

   innerHTML

   可以方便地设置元素的HTML内容，但如果内容来自不可信的用户输入，它会带来XSS（跨站脚本攻击）的风险。此外，每次设置

   innerHTML

   都会解析并重新创建内部的DOM结构，这比直接操作DOM元素效率更低。

5. 忘记移除不再需要的属性： 有时我们为了临时状态添加了属性（比如

   disabled

   ），但在状态改变后忘记移除它。这可能导致用户界面行为异常，或者在某些情况下，不必要的属性会增加DOM树的大小。

6. 过度依赖内联样式： 直接通过

   element.style.property

   设置样式虽然方便，但如果大量使用，会使得样式难以管理和维护，也降低了CSS的复用性。

最佳实践：

1. 优先使用DOM Property访问： 除非有明确的理由（如上面提到的特殊场景），否则总是优先使用

   element.id

   、

   element.value

   、

   element.checked

   等直接属性访问方式。它更直观、类型更安全，且通常性能更好。

2. 利用

   dataset

   API管理自定义数据： 对于需要在HTML元素上存储的自定义数据，始终使用

   data-*

   属性配合

   element.dataset

   来操作。这比使用

   getAttribute

   /

   setAttribute

   更清晰、更规范。

3. 批量操作DOM，减少重绘/回流：

   • DocumentFragment： 如果你需要创建大量DOM元素并添加到页面，可以先将它们添加到

     DocumentFragment

     中，然后一次性将

     DocumentFragment

     添加到真实DOM中。这样只会触发一次重绘/回流。

   • 离线操作： 在对一个元素进行大量修改之前，可以先将其从DOM树中移除（

     element.remove()

     ），修改完成后再重新添加回去。

   • CSS类名管理样式： 避免直接操作

     element.style

     来切换复杂样式。定义好CSS类，然后通过

     element.classList.add()

     、

     element.classList.remove()

     、

     element.classList.toggle()

     来增删类名，让浏览器去处理样式变化。这不仅性能更好，也让样式管理更清晰。

4. 对用户输入进行验证和清理： 如果你需要将用户输入的内容设置到DOM元素的属性中（特别是

   src

   、

   href

   、

   innerHTML

   等），务必进行严格的验证和清理，以防止XSS攻击。例如，对于URL，要确保它是一个合法的URL；对于文本内容，可以使用

   textContent

   而不是

   innerHTML

   来避免HTML注入。

5. 明确移除临时属性： 当一个临时属性（如

   disabled

   ）不再需要时，使用

   removeAttribute()

   或将对应的DOM Property设置为

   false

   （如

   element.disabled = false

   ）来明确地移除它。

6. 代码可读性和维护性： 保持代码简洁明了，避免过度复杂的DOM操作逻辑。使用有意义的变量名和函数名，必要时添加注释。

总之，操作DOM属性是前端开发的核心任务之一。理解其底层机制，并遵循最佳实践，能帮助我们写出更高效、更健壮、更易于维护的JavaScript代码。