怎么使用JavaScript操作DOM元素属性？

狼影

发布时间：2025-09-21 17:15:01

677人浏览过

来源于php中文网

原创

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

怎么使用javascript操作dom元素属性？

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免费学习笔记（深入）”；

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
```
）。

关键区别点：

来源和类型：
- Attribute：来自HTML标记，总是字符串类型。例如，
  中的
```
checked
```
  是一个布尔属性，但它的值在HTML里其实是字符串
```
"checked"
```
  （或者根本不写值，只写属性名）。
- Property：是DOM对象（JavaScript对象）的成员，可以是任何JavaScript数据类型（字符串、数字、布尔、对象等）。例如，
```
checkbox.checked
```
  是一个布尔值（
```
true
```
  或
```
false
```
  ）。
同步机制：
- 有些Attribute和Property是同步的，比如
```
id
```
  。你修改
```
element.id
```
  ，HTML中的
```
id
```
  属性也会随之改变；反之亦然。
- 有些Attribute和Property是不同步的，或者说，它们只在初始加载时同步。最典型的例子是
```
value
```
  属性在
  元素上。当你用户在输入框里输入内容后，
```
input.value
```
  （Property）会反映当前输入框里的内容，但
```
input.getAttribute('value')
```
  （Attribute）仍然会返回HTML中最初设置的那个值。
- 另一个例子是
```
checked
```
  。
```
checkbox.checked
```
  （Property）反映了复选框当前的选中状态，而
```
checkbox.getAttribute('checked')
```
  （Attribute）只反映HTML中最初的
```
checked
```
  属性是否存在。
命名约定：
- Attribute的命名通常是HTML规范的，比如
```
class
```
  ，
```
for
```
  （在
  中）。
- Property的命名则遵循JavaScript的驼峰命名法，比如
```
className
```
  对应
```
class
```
  属性，
```
htmlFor
```
  对应
```
for
```
  属性。

示例：

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内部的数据结构。
反映当前状态： 对于表单元素，如
的
```
value
```
或
的
```
checked
```
，直接属性访问会反映用户当前的交互状态，而
```
getAttribute
```
可能只返回HTML中定义的初始值。这是非常关键的一点，如果你想获取用户输入，就必须用
```
element.value
```
。
CSS样式操作： 总是通过
```
element.style.propertyName
```
来操作内联样式，而不是
```
setAttribute('style', '...')
```
，后者会覆盖掉所有已有的内联样式。

使用

setAttribute

/
getAttribute
/
removeAttribute
的场景：

美图AI开放平台

美图推出的AI人脸图像处理平台

下载

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

setAttribute

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

*处理自定义属性（`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属性操作中，我见过不少开发者掉进一些“坑”里，或者没有采用最佳实践，导致代码不够健壮或性能不佳。这里我总结一些常见的陷阱和我认为的最佳实践。

常见的陷阱：

混淆Attribute和Property： 这是最常见的错误，我在上面已经详细解释了。记住，
```
getAttribute('value')
```
可能不是你想要的，尤其是当用户已经与表单元素交互后。
```
element.value
```
才是你通常需要获取的当前值。同样，设置布尔属性（如
```
disabled
```
、
```
checked
```
）时，
```
element.disabled = true
```
远比
```
setAttribute('disabled', 'disabled')
```
或
```
setAttribute('disabled', true)
```
更正确、更语义化。
大小写敏感性问题： HTML属性名通常不区分大小写（尽管规范建议小写），但在JavaScript中，DOM属性名是区分大小写的。例如，
```
element.className
```
是无效的，必须是
```
element.className
```
。自定义
```
data-*
```
属性在HTML中是小写连字符形式（
```
data-user-id
```
），但在
```
dataset
```
中会转换为驼峰命名（
```
element.dataset.userId
```
）。
频繁操作DOM导致的性能问题： 每次修改DOM属性，都可能导致浏览器重新计算布局（reflow）和重新绘制（repaint），这是非常耗费性能的。如果在一个循环中频繁修改多个元素的属性，或者在短时间内多次修改同一个元素的属性，页面可能会出现卡顿或闪烁。
不当使用
```
innerHTML
```
：虽然
```
innerHTML
```
可以方便地设置元素的HTML内容，但如果内容来自不可信的用户输入，它会带来XSS（跨站脚本攻击）的风险。此外，每次设置
```
innerHTML
```
都会解析并重新创建内部的DOM结构，这比直接操作DOM元素效率更低。
忘记移除不再需要的属性： 有时我们为了临时状态添加了属性（比如
```
disabled
```
），但在状态改变后忘记移除它。这可能导致用户界面行为异常，或者在某些情况下，不必要的属性会增加DOM树的大小。
过度依赖内联样式： 直接通过
```
element.style.property
```
设置样式虽然方便，但如果大量使用，会使得样式难以管理和维护，也降低了CSS的复用性。

最佳实践：

优先使用DOM Property访问： 除非有明确的理由（如上面提到的特殊场景），否则总是优先使用
```
element.id
```
、
```
element.value
```
、
```
element.checked
```
等直接属性访问方式。它更直观、类型更安全，且通常性能更好。
利用
```
dataset
```
API管理自定义数据： 对于需要在HTML元素上存储的自定义数据，始终使用
```
data-*
```
属性配合
```
element.dataset
```
来操作。这比使用
```
getAttribute
```
/
```
setAttribute
```
更清晰、更规范。
批量操作DOM，减少重绘/回流：
- DocumentFragment： 如果你需要创建大量DOM元素并添加到页面，可以先将它们添加到
```
DocumentFragment
```
  中，然后一次性将
```
DocumentFragment
```
  添加到真实DOM中。这样只会触发一次重绘/回流。
- 离线操作： 在对一个元素进行大量修改之前，可以先将其从DOM树中移除（
```
element.remove()
```
  ），修改完成后再重新添加回去。
- CSS类名管理样式： 避免直接操作
```
element.style
```
  来切换复杂样式。定义好CSS类，然后通过
```
element.classList.add()
```
  、
```
element.classList.remove()
```
  、
```
element.classList.toggle()
```
  来增删类名，让浏览器去处理样式变化。这不仅性能更好，也让样式管理更清晰。
对用户输入进行验证和清理： 如果你需要将用户输入的内容设置到DOM元素的属性中（特别是
```
src
```
、
```
href
```
、
```
innerHTML
```
等），务必进行严格的验证和清理，以防止XSS攻击。例如，对于URL，要确保它是一个合法的URL；对于文本内容，可以使用
```
textContent
```
而不是
```
innerHTML
```
来避免HTML注入。
明确移除临时属性： 当一个临时属性（如
```
disabled
```
）不再需要时，使用
```
removeAttribute()
```
或将对应的DOM Property设置为
```
false
```
（如
```
element.disabled = false
```
）来明确地移除它。
代码可读性和维护性： 保持代码简洁明了，避免过度复杂的DOM操作逻辑。使用有意义的变量名和函数名，必要时添加注释。