1. 动态修改元素属性的核心价值
在Web开发中，动态修改元素属性是构建交互式页面的基础技能。我见过太多新手开发者习惯性使用jQuery的attr()方法，却对原生JavaScript的getAttribute和setAttribute一知半解。实际上，这两个原生API在性能、兼容性和灵活性上都有独特优势。
最近接手一个老项目重构，发现前任开发者大量使用innerHTML直接替换元素内容来实现动态效果，导致XSS漏洞频发。改用setAttribute规范操作后，不仅安全性提升，代码可维护性也显著改善。这让我意识到，有必要系统梳理这两个基础但强大的API。
2. 属性操作基础：getAttribute详解
2.1 基本语法与返回值
getAttribute方法用于获取元素指定属性的当前值，其基本语法如下：
let value = element.getAttribute(attributeName);这里有个容易踩坑的点：无论HTML中属性是否显式设置，getAttribute都能获取到对应值。对于布尔型属性（如disabled、checked），传统认知认为应该返回true/false，但实际上：
<input type="checkbox" id="myCheckbox" checked> <script> console.log(document.getElementById('myCheckbox').getAttribute('checked')); // 返回空字符串""而非布尔值true </script>2.2 特殊属性处理规则
不同属性在getAttribute时有特殊表现：
style属性：返回CSS字符串而非对象
div.getAttribute('style') // "color: red; font-size: 16px;"事件处理属性：返回代码字符串
<button onclick="alert('click')">Click</button> <script> btn.getAttribute('onclick') // "alert('click')" </script>自定义数据属性：建议使用dataset而非getAttribute
// 更推荐的方式 div.dataset.userId // 而非 div.getAttribute('data-user-id')
2.3 与点符号访问的区别
很多开发者混淆getAttribute与直接属性访问的区别：
| 访问方式 | 获取内容 | 示例 |
|---|---|---|
| element.attribute | DOM对象属性值 | img.src返回解析后的完整URL |
| getAttribute() | HTML原始属性值 | img.getAttribute('src')返回原始值 |
典型场景：获取图片src时，直接访问属性会返回完整URL，而getAttribute可能返回相对路径。
3. 属性修改利器：setAttribute深度解析
3.1 基础用法与特殊值处理
setAttribute用于设置或修改元素属性，完整语法：
element.setAttribute(name, value);处理布尔属性时有个实用技巧：
// 正确设置布尔属性 input.setAttribute('disabled', ''); // 等效于disabled="disabled" // 移除布尔属性应该用removeAttribute input.removeAttribute('disabled');3.2 性能优化建议
在循环中频繁操作DOM属性时，需要注意：
批量修改：先操作DOM片段再插入
const fragment = document.createDocumentFragment(); items.forEach(item => { const div = document.createElement('div'); div.setAttribute('data-id', item.id); fragment.appendChild(div); }); container.appendChild(fragment);避免布局抖动：连续读取和修改属性时，使用requestAnimationFrame
function updateElements() { requestAnimationFrame(() => { elements.forEach(el => { el.setAttribute('data-state', 'active'); }); }); }
3.3 安全注意事项
直接使用setAttribute注入HTML内容存在XSS风险：
// 危险操作！ userDiv.setAttribute('onclick', userInput); // 安全做法 userDiv.addEventListener('click', handler);对于动态设置的URL，务必编码处理：
const safeUrl = encodeURIComponent(userInput); link.setAttribute('href', safeUrl);4. 实战应用场景与进阶技巧
4.1 动态主题切换实现
通过修改data-theme属性实现主题切换：
function setTheme(themeName) { document.documentElement.setAttribute('data-theme', themeName); // CSS中通过[data-theme="dark"]选择器应用样式 }4.2 表单动态验证
实时更新aria-invalid属性辅助无障碍访问：
input.addEventListener('blur', () => { const isValid = validate(input.value); input.setAttribute('aria-invalid', !isValid); });4.3 自定义指令实现
模仿Vue指令实现属性绑定：
function bindDirective(selector, attr, callback) { document.querySelectorAll(selector).forEach(el => { const value = el.getAttribute(attr); callback(el, value); el.removeAttribute(attr); }); } // 使用示例 bindDirective('[x-show]', 'x-show', (el, value) => { el.style.display = value === 'true' ? 'block' : 'none'; });5. 常见问题排查手册
5.1 属性设置无效的排查步骤
- 检查元素是否已正确挂载到DOM
- 确认属性名拼写正确（区分大小写）
- 使用getAttribute验证是否设置成功
- 检查CSS是否覆盖了属性效果
5.2 性能问题分析
当发现属性操作导致页面卡顿时：
- 使用Chrome DevTools的Performance面板录制
- 检查是否存在强制同步布局（读取后立即修改）
- 考虑使用MutationObserver批量处理
5.3 跨浏览器兼容方案
针对IE特殊处理：
// IE兼容性封装 function safeSetAttribute(el, name, value) { if (el.setAttribute) { el.setAttribute(name, value); } else { // IE6/7备用方案 el[name] = value; } }6. 现代API的替代方案
虽然getAttribute/setAttribute仍然有效，但某些场景下有更好的选择：
classList代替className操作
// 传统方式 div.setAttribute('class', 'active'); // 现代方式 div.classList.add('active');dataset处理自定义数据
// 传统方式 div.getAttribute('data-user-id'); // 现代方式 div.dataset.userId;CSSStyleDeclaration操作样式
// 传统方式 div.setAttribute('style', 'color: red'); // 现代方式 div.style.color = 'red';
在实际项目中，我通常会根据目标浏览器支持情况混合使用这些API。对于需要支持老旧浏览器的项目，getAttribute/setAttribute仍然是可靠的选择；而对于现代浏览器项目，可以更多采用新的DOM API。
