js实现attr
JavaScript 实现类似 jQuery 的 attr() 方法
在原生 JavaScript 中，可以通过操作 DOM 元素的属性来实现类似 jQuery 的 attr() 功能。以下是几种常见实现方式：
获取元素属性
使用 getAttribute() 方法获取元素属性值：
const element = document.getElementById('myElement');
const value = element.getAttribute('data-attr');设置元素属性
使用 setAttribute() 方法设置元素属性：
element.setAttribute('data-attr', 'newValue');移除元素属性
使用 removeAttribute() 方法移除属性：
element.removeAttribute('data-attr');自定义 attr() 函数
可以封装一个类似 jQuery 的 attr() 函数：
function attr(element, attributeName, value) {
if (value === undefined) {
return element.getAttribute(attributeName);
} else {
element.setAttribute(attributeName, value);
return element;
}
}
// 使用示例
const el = document.querySelector('#test');
attr(el, 'data-id', '123'); // 设置属性
const id = attr(el, 'data-id'); // 获取属性处理布尔属性
对于 checked、disabled 等布尔属性，可以直接操作 DOM 属性：
// 设置布尔属性
element.checked = true;
// 获取布尔属性
const isChecked = element.checked;注意事项
- HTML 属性和 DOM 属性有所不同，
getAttribute()获取的是 HTML 属性，而直接访问属性如element.id获取的是 DOM 属性 - 自定义数据属性建议使用
dataset属性：// 获取 data-* 属性 const dataValue = element.dataset.attrName;
// 设置 data-* 属性 element.dataset.attrName = 'value';
3. 对于样式操作，建议使用 `classList` 和 `style` 属性而非 `getAttribute/setAttribute`
