如何实现js修改的功能
使用原生JavaScript修改DOM元素
通过document.getElementById或document.querySelector获取DOM元素后直接修改属性
// 修改文本内容
document.getElementById('demo').innerHTML = '新内容';
// 修改样式
document.querySelector('.box').style.backgroundColor = 'red';
// 修改属性
document.getElementById('img1').src = 'new-image.jpg';使用classList操作CSS类
通过classListAPI可以更灵活地修改元素类名
const element = document.getElementById('myElement');
element.classList.add('active'); // 添加类
element.classList.remove('old'); // 移除类
element.classList.toggle('hidden'); // 切换类使用setAttribute修改自定义属性
适用于标准HTML属性和自定义data属性
const btn = document.querySelector('button');
btn.setAttribute('data-status', 'active');
btn.setAttribute('disabled', 'true');通过事件监听动态修改
结合事件实现交互式修改
document.getElementById('form1').addEventListener('submit', function(e) {
e.preventDefault();
const input = document.getElementById('username');
input.value = input.value.trim();
});使用现代ES6特性修改对象
利用对象展开运算符等新特性
const original = {a: 1, b: 2};
const modified = {...original, b: 3, c: 4};数组修改方法
常用数组修改操作
const arr = [1, 2, 3];
arr.push(4); // 末尾添加
arr.pop(); // 移除末尾
arr.splice(1, 1, 99); // 替换元素使用框架特定的修改方式
针对不同前端框架的修改模式
// React示例
const [state, setState] = useState(initialValue);
setState(newValue);
// Vue示例
this.message = '新消息';
