如何访问和修改DOM元素的属性？

访问和修改DOM元素的属性可通过直接操作属性名或使用标准API方法实现，以下是具体方法与示例：

1. 通过元素对象直接访问使用点号（.）运算符直接读取属性值，若属性不存在则返回undefined。

   示例：获取id为box的元素的accessKey属性const e = document.getElementById('box');console.log(e.accessKey); // 输出当前accessKey值console.log(e.nonExistentAttr); // 输出undefined（属性不存在）

2. 通用属性访问方法

   getAttribute(name)：获取指定属性的值（包括自定义属性）。

   示例：const className = e.getAttribute('class'); // 获取class属性const dataAttr = e.getAttribute('data-custom'); // 获取自定义data属性

1. 直接赋值修改通过点号运算符直接为属性赋新值，适用于大多数标准属性（如id、title、accessKey等）。

   示例：e.accessKey = 'k'; // 修改accessKey属性e.id = 'newBox'; // 修改id属性

2. 特殊属性的修改方式

   className与classList

   直接修改className会覆盖原有类名：e.className = 'new-class'; // 覆盖所有类名

   推荐使用classList进行增删操作：e.classList.add('active'); // 添加类名e.classList.remove('old-class'); // 移除类名e.classList.toggle('highlight'); // 切换类名

   style属性style是一个对象，需通过其属性名修改内联样式：

   e.style.color = 'red'; // 修改文字颜色e.style.backgroundColor = '#f0f0f0'; // 修改背景色// 批量设置样式（推荐使用CSS类替代）Object.assign(e.style, { margin: '10px', padding: '5px' });

   自定义属性（data-*）可通过dataset对象或getAttribute/setAttribute操作：

   // 方法1：使用datasete.dataset.custom = '123'; // 修改data-custom属性console.log(e.dataset.custom); // 输出"123"// 方法2：使用getAttribute/setAttributee.setAttribute('data-custom', '456'); // 覆盖原有值

3. 标准API方法修改

   setAttribute(name, value)：设置属性值（适用于所有属性，包括自定义属性）。

   示例：e.setAttribute('title', '提示文本'); // 设置title属性e.setAttribute('data-id', '100'); // 设置自定义data属性

   removeAttribute(name)：删除指定属性。

   示例：e.removeAttribute('disabled'); // 移除disabled属性

1. 只读属性部分属性（如nodeType、tagName）为只读，尝试修改会无效或报错。

   示例：console.log(e.nodeType); // 输出节点类型（如1表示元素节点）e.nodeType = 2; // 无效操作！

2. 属性名差异

   HTML属性与DOM属性名可能不同（如class在DOM中为className，for在DOM中为htmlFor）。

   示例：// HTML: <label for="username">用户名</label>const label = document.querySelector('label');console.log(label.htmlFor); // 输出"username"

3. 性能优化

   频繁操作DOM时，建议缓存元素对象（如const e = document.getElementById('box')），避免重复查询。

   批量修改样式时，优先通过添加/移除CSS类实现，而非直接操作style对象。

通过上述方法，可高效完成DOM元素的属性访问与修改操作。根据实际需求选择直接赋值、setAttribute或专用API（如classList、dataset）以实现最佳实践。