JavaScript操作DOM属性详解

想要精通JavaScript DOM操作？本文为你奉上全攻略！本文深入剖析了操作DOM元素属性的关键：区分Attribute与Property。Attribute是HTML标签上的原始字符串属性，通过`getAttribute`、`setAttribute`等方法操作，适用于自定义属性或需操作HTML结构的场景。Property是DOM对象的JavaScript属性，如`element.id`、`element.value`，更高效且能反映实时状态，尤其适合表单元素和常用属性。同时，我们还介绍了`data-*`属性的`dataset API`，以及如何通过`style.property`进行样式操作。避免混淆Attribute与Property，优先使用Property，能显著提升性能与可维护性。掌握这些技巧，让你在JavaScript DOM操作中游刃有余！

操作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来操作这些属性。

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

使用setAttribute/getAttribute/removeAttribute的场景：

尽管直接属性访问很方便，但setAttribute等方法也有其不可替代的用武之地。

• *处理自定义属性（`data-除外）：** 如果你需要操作非标准或浏览器不直接支持的自定义属性（虽然现在大多用data-*了），或者一些不常用的标准属性但没有直接DOM Property的，setAttribute`是唯一的选择。
• *操作`data-属性（旧浏览器兼容或特定需求）：** 尽管datasetAPI是操作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代码。

好了，本文到此结束，带大家了解了《JavaScript操作DOM属性详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！