DOM属性操作

DOM属性操作的基本概念

DOM属性操作是JavaScript与网页交互的核心方式之一。每个HTML元素都有属性和特性，通过JavaScript可以动态读取、修改这些属性。属性分为标准属性和自定义属性，标准属性如id、class、href等，自定义属性则以data-开头。

// 获取元素
const link = document.getElementById('myLink');

// 读取属性
console.log(link.href); // 标准属性
console.log(link.getAttribute('data-custom')); // 自定义属性

标准属性的访问与修改

标准HTML属性可以直接通过DOM元素的属性访问器来操作。这种方式比getAttribute/setAttribute更高效，但只能用于标准属性。

const img = document.querySelector('img');

// 读取标准属性
const srcValue = img.src;
const altValue = img.alt;

// 修改标准属性
img.src = 'new-image.jpg';
img.alt = '新的图片描述';

自定义属性的处理

HTML5引入了data-*属性规范，用于存储自定义数据。这些属性可以通过dataset属性访问，JavaScript会自动将连字符格式转换为驼峰命名。

<div id="user" data-user-id="12345" data-account-status="active"></div>

const userDiv = document.getElementById('user');

// 读取data属性
console.log(userDiv.dataset.userId); // "12345"
console.log(userDiv.dataset.accountStatus); // "active"

// 修改data属性
userDiv.dataset.accountStatus = 'inactive';

getAttribute和setAttribute方法

这两个方法可以操作任何属性，包括标准属性和自定义属性。当需要操作非标准属性时，必须使用这些方法。

const element = document.getElementById('myElement');

// 获取属性
const value = element.getAttribute('aria-label');

// 设置属性
element.setAttribute('role', 'button');

// 移除属性
element.removeAttribute('disabled');

布尔属性的特殊处理

像disabled、checked、readonly等布尔属性有其特殊性。它们的存在与否决定状态，值通常不重要。

const checkbox = document.querySelector('input[type="checkbox"]');

// 正确的布尔属性设置方式
checkbox.checked = true; // 推荐
checkbox.setAttribute('checked', ''); // 也可以

// 错误的做法
checkbox.setAttribute('checked', 'true'); // 不推荐

样式属性的操作

style属性比较特殊，可以通过style对象访问内联样式，也可以通过classList操作类名。

const box = document.getElementById('box');

// 直接修改样式
box.style.color = 'blue';
box.style.backgroundColor = '#f0f0f0';

// 批量修改样式
box.style.cssText = 'width: 100px; height: 100px; border: 1px solid black;';

// 类名操作
box.classList.add('active');
box.classList.remove('inactive');
box.classList.toggle('highlight');

表单元素属性

表单元素有特殊的属性如value、checked、selected等，这些属性与用户交互状态密切相关。

const input = document.querySelector('input[type="text"]');
const select = document.querySelector('select');

// 获取/设置值
console.log(input.value);
input.value = '新的值';

// 选择框
console.log(select.selectedIndex);
console.log(select.options[select.selectedIndex].value);

性能优化考虑

频繁的DOM属性操作会影响性能，特别是在循环中。最佳实践包括：

// 不好的做法
for (let i = 0; i < 1000; i++) {
  document.getElementById('item').style.left = i + 'px';
}

// 好的做法 - 使用变量缓存DOM引用
const item = document.getElementById('item');
for (let i = 0; i < 1000; i++) {
  item.style.left = i + 'px';
}

// 更好的做法 - 使用requestAnimationFrame
function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}
animate();

属性与特性的区别

属性和特性(property和attribute)在DOM中有重要区别。属性是DOM对象的JavaScript属性，特性是HTML标签上的原始值。

const input = document.querySelector('input');

// 设置特性
input.setAttribute('value', '初始值');

// 用户输入后
input.value = '用户输入的值';

console.log(input.getAttribute('value')); // "初始值"
console.log(input.value); // "用户输入的值"

动态创建元素的属性设置

创建新元素时，可以在添加到DOM前设置其属性，这比之后修改更高效。

// 创建新元素
const newDiv = document.createElement('div');

// 设置属性
newDiv.id = 'dynamicDiv';
newDiv.className = 'container';
newDiv.setAttribute('data-role', 'widget');

// 添加到DOM
document.body.appendChild(newDiv);

属性操作的浏览器兼容性

不同浏览器对某些属性的处理可能有差异，特别是较旧的IE浏览器。

// 处理class属性的跨浏览器方案
const element = document.getElementById('myElement');

// 设置class
if ('classList' in element) {
  element.classList.add('new-class');
} else {
  const className = element.getAttribute('class') || '';
  element.setAttribute('class', className + ' new-class');
}

属性变更的监听

MutationObserver API可以监听DOM属性的变化，比已废弃的MutationEvents更高效。

const targetNode = document.getElementById('observed');

// 配置观察选项
const config = { attributes: true, attributeOldValue: true };

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(`属性 ${mutation.attributeName} 从 ${mutation.oldValue} 变为 ${targetNode.getAttribute(mutation.attributeName)}`);
  });
});

// 开始观察
observer.observe(targetNode, config);

// 停止观察
// observer.disconnect();

特殊元素的属性

某些元素如iframe、video、canvas等有独特的属性需要特别处理。

const iframe = document.querySelector('iframe');

// iframe属性
iframe.src = 'https://example.com';
iframe.allowFullscreen = true;

const video = document.querySelector('video');
// video属性
video.autoplay = true;
video.controls = false;

安全相关的属性操作

操作某些属性可能涉及安全风险，如innerHTML、src等，需要注意防范XSS攻击。

// 不安全的做法
element.innerHTML = userProvidedContent;

// 相对安全的做法
element.textContent = userProvidedContent;

// 或者使用专门的库进行净化
function sanitize(html) {
  // 实现净化逻辑
  return safeHtml;
}
element.innerHTML = sanitize(userProvidedContent);

自定义元素属性

Web Components允许创建自定义元素，这些元素可以有自定义属性和对应的属性反射。

class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['size', 'theme'];
  }

  constructor() {
    super();
    // 元素初始化
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // 属性变化时的处理
    if (name === 'size') {
      this.style.fontSize = newValue;
    }
  }
}

customElements.define('my-element', MyElement);

属性操作的调试技巧

浏览器开发者工具提供了多种方式来检查和调试DOM属性。

// 在控制台检查元素属性
console.dir(document.getElementById('debug'));

// 监控属性变化
const obj = {};
Object.defineProperty(obj, 'value', {
  set(newValue) {
    console.log('值被修改为:', newValue);
    this._value = newValue;
  },
  get() {
    return this._value;
  }
});

obj.value = 'test'; // 控制台会输出变化