访问和修改DOM元素属性

作为IT工程师，访问和修改DOM元素属性是前端开发中的基础操作。以下是详细的方法：

访问DOM元素属性

1. 获取元素

// 通过ID获取
const element = document.getElementById('myElement');

// 通过类名获取（返回集合）
const elements = document.getElementsByClassName('myClass');

// 通过标签名获取
const divs = document.getElementsByTagName('div');

// 通过CSS选择器获取（返回第一个匹配项）
const firstMatch = document.querySelector('.myClass');

// 通过CSS选择器获取所有匹配项
const allMatches = document.querySelectorAll('.myClass');

2. 访问属性

// 标准属性
const id = element.id;
const className = element.className;
const href = element.href; // 适用于<a>元素等

// 自定义属性（HTML5 data-* 属性）
const dataValue = element.dataset.myAttribute; // 对应data-my-attribute

// 获取任意属性
const attrValue = element.getAttribute('data-custom');

修改DOM元素属性

1. 修改标准属性

element.id = 'newId';
element.className = 'newClass';
element.href = 'https://example.com';

2. 修改自定义属性

// HTML5 data-* 属性
element.dataset.myAttribute = 'newValue';

// 通用属性修改
element.setAttribute('data-custom', 'newValue');

3. 样式修改

// 直接修改style属性
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';

// 通过classList操作类
element.classList.add('new-class');
element.classList.remove('old-class');
element.classList.toggle('active');

4. 内容修改

// 修改文本内容
element.textContent = '新文本内容';

// 修改HTML内容
element.innerHTML = '<strong>加粗文本</strong>';

// 更安全的HTML内容修改（避免XSS）
element.innerText = '<script>alert("xss")</script>'; // 会被转义

最佳实践

1. 性能考虑：批量修改DOM时，考虑使用文档片段(documentFragment)或先隐藏元素，修改完成后再显示。

2. 安全性：使用textContent而不是innerHTML来防止XSS攻击，除非你完全信任并需要插入HTML内容。

3. 现代API：优先使用classList而不是直接操作className字符串，它提供了更清晰的方法(add/remove/toggle/contains)。

4. 数据属性：使用dataset访问自定义数据属性，它比getAttribute更符合现代标准。

5. 事件监听：修改元素后可能需要更新事件监听器，确保不会创建重复监听。

通过掌握这些方法，你可以高效地操作DOM元素属性，创建动态的网页交互体验。