一、JS修改元素属性的方法
修改元素属性是 web 开发过程中经常遇到的需求，而 JavaScript 作为前端三剑客之一，其重要性不言自明。下面介绍如何使用 JavaScript 去修改元素属性，方法主要有三种。
方法一：使用 DOM API 的属性更新方法
使用 DOM API 的属性更新方法是一种非常直观、易用的方式，我们可以通过 document 对象和其他 DOM 选择器获取到目标元素，然后通过修改其内置属性来实现元素属性修改。
// 获取目标元素
let element = document.querySelector('#target');
// 修改元素属性
element.src = 'img/new-img.jpg';
方法二：使用 setAttribute() 方法
setAttribute() 方法可以帮助我们设置任意名称和值的属性，比如修改一个元素的 aria-label 属性：
// 获取目标元素
let element = document.querySelector('#target');
// 修改元素属性
element.setAttribute('aria-label', 'new label');
方法三：使用 dataset 对象
dataset 对象可以帮助我们在 HTML 标签里进行自定义数据的存储和获取，通过其 API，我们也可以获得目标元素的属性值，进而修改元素属性。
// 获取目标元素的自定义数据
let data = document.querySelector('#target').dataset;
// 修改某个数据
data.customKey = 'new value';
二、JS修改样式中的属性值
样式是定义和渲染页面元素的重要组成部分，我们经常会需要修改或更新元素的样式属性值。以下介绍几种如何使用 JavaScript 修改样式值的方法。
方法一：修改内联样式
当我们需要修改一个内联样式时，可以直接使用 style 对象的属性来描述
// 获取目标元素
let element = document.querySelector('#target');
// 修改元素的背景色
element.style.backgroundColor = '#f1f1f1';
方法二：使用 setProperty() 函数
如果属性没有直接在内联样式中定义，我们需要使用 setProperty() 函数去修改其属性值：
// 获取目标元素
let element = document.querySelector('#target');
// 修改元素颜色
element.style.setProperty('color', 'green');
方法三：使用 CSSStyleSheet 对象
CSSStyleSheet 对象提供了一种修改元素属性的方法，使用该方式可以定位到真实的样式表，逐层查找目标属性。
// 获取当前样式表的引用
let stylesheet = document.styleSheets[0];
// 修改某个选择器下的样式
let rules = stylesheet.cssRules || stylesheet.rules;
rules[0].style.color = 'purple';
三、修改元素属性案例
下面从经典案例入手，针对常见需要修改元素属性的场景，给出详细的操作方法。
修改图片链接
// 获取目标元素
let element = document.querySelector('img');
// 修改图片链接
element.src = 'new-img.jpg';
修改输入框的占位符
// 获取目标元素
let element = document.querySelector('input');
// 修改输入框的占位符
element.placeholder = '新的占位符';
修改 a 标签的 href 属性
// 获取目标元素
let element = document.querySelector('a');
// 修改 a 标签的 href 属性
element.href = 'https://www.example.com';
四、JS修改HTML元素内容
修改DOM元素的内容很常见，下面介绍三种实现方式。
使用 innerHTML
// 获取目标元素
let element = document.querySelector('#target');
// 修改元素内容
element.innerHTML = '新的内容';
使用 textContent
// 获取目标元素
let element = document.querySelector('#target');
// 修改元素内容
element.textContent = '新的文本';
使用 DOM API
// 获取目标元素
let element = document.querySelector('#target');
// 清空子元素
while (element.hasChildNodes()) {
element.removeChild(element.lastChild);
}
// 插入新的文本
let textNode = document.createTextNode('新的文本');
element.appendChild(textNode);
五、JS修改HTML元素属性的方法
修改元素属性值的方式比较多，下面介绍三种不同的方法。
使用 getAttribute() 和 setAttribute()
// 获取目标元素的属性
let element = document.querySelector('#target');
let oldValue = element.getAttribute('data-src');
// 修改元素属性
element.setAttribute('data-src', 'new-value');
修改 HTML5 自定义数据
// 获取目标元素的 HTML5 数据
let element = document.querySelector('#target');
let oldValue = element.dataset.customKey;
// 修改元素数据
element.dataset.customKey = 'new-value';
使用 classList 属性
// 获取目标元素的 class
let element = document.querySelector('#target');
let classes = element.classList;
// 添加新的 class
classes.add('new-class');
// 删除旧的 class
classes.remove('old-class');
六、JS修改伪元素样式
伪元素本质上是一种特殊的 CSS 选择器，虽然无法通过普通的 DOM API 进行获取和修改，但是可以通过修改其绑定的 CSS 规则来完成。
// 获取样式表对象和要修改的选择器
let stylesheet = document.styleSheets[0];
let selector = '.example::before';
// 修改伪元素样式
let rules = stylesheet.cssRules || stylesheet.rules;
rules[0].style.content = '""';
rules[0].style.backgroundColor = 'red';
七、原生JS修改元素CSS属性
直接通过 JavaScript 去操作 CSS 样式通常需要看到很多重复的代码，不仅容易出错，而且代码可读性也不高。而使用类库和框架，可以大大减少操作 CSS 的代码量，减少出错的可能性。
// 获取目标元素
let element = document.querySelector('#target');
// 定义样式对象
let styles = {
backgroundColor: 'red',
color: 'white',
fontSize: '16px'
};
// 应用样式
Object.assign(element.style, styles);
八、JS修改元素内容和样式
有时候需要同时修改元素的内容和样式，以下是两种同时修改的方案。
修改样式和内容
// 获取目标元素
let element = document.querySelector('#target');
// 定义新的样式和内容
let newStyles = {
backgroundColor: 'red',
color: 'white',
fontSize: '16px'
};
let newContent = '新的内容';
// 应用样式和内容
Object.assign(element.style, newStyles);
element.innerHTML = newContent;
修改样式和内容（使用 jQuery）
// 使用 jQuery 获取目标元素
let $element = $('#target');
// 定义新的样式和内容
let newStyles = {
'background-color': 'red',
'color': 'white',
'font-size': '16px'
};
let newContent = '新的内容';
// 应用样式和内容
$element.css(newStyles);
$element.html(newContent);
九、JS修改元素属性值的注意事项
需要注意的是，修改元素属性值是具有局限性的，因为有些属性值无法实时更新。
修改 value 属性可能无法实时更新
对 input 元素的 value 属性进行修改时，并不能保证修改后就能立即获取到新的值，有时候需要等待浏览器渲染完成才能获取。
// 获取目标元素
let element = document.querySelector('input');
// 修改 input 的 value
element.value = 'new value';
// 立即获取 value 值，可能返回的依然是旧的值
let value = element.value;
修改样式属性可能可靠性不高
通过 JavaScript 动态修改样式属性时，可能会受到 CSS 规则和浏览器支持的限制，因此可靠性不高。
// 获取目标元素
let element = document.querySelector('div');
// 使用 JavaScript 修改样式，但可能会被浏览器标记为“弱实现”规则
element.style.background = 'red';
