使用textContent修改文本，innerHTML插入HTML，value更新表单值，setAttribute和style修改属性与样式，注意安全与事件触发。
在网页开发或自动化操作中，经常需要通过JavaScript动态修改页面内容。使用JS可以轻松更改文本、属性、样式甚至结构。以下是几种常用方法来动态修改网页元素内容。
1. 修改元素的文本内容
通过innerText或textContent可以修改元素内的纯文本内容。
- innerText：受CSS样式影响，只读取可见文本
- textContent：获取所有文本内容（包括隐藏的），更推荐用于设置文本
示例：
// 获取元素并修改文本
document.getElementById("title").textContent = "新的标题";
2. 修改HTML内容
使用innerHTML可以插入包含HTML标签的内容。
注意：存在XSS风险，确保内容可信。
// 插入带标签的内容
document.getElementById("content").innerHTML = "加粗文字";
3. 修改表单元素的值
对于input、textarea等表单控件，使用value属性进行修改。
// 修改输入框内容
document.getElementById("username").value = "默认用户名";
// 触发输入事件（如需通知框架更新）
document.getElementById("username").dispatchEvent(new Event("input"));
4. 修改元素属性和样式
使用setAttribute修改任意属性，或直接操作style对象。
// 修改图片src
document.getElementById("avatar").setAttribute("src", "new.jpg");
// 修改样式
document.getElementById("box").style.color = "red";
document.getElementById("box").style.display = "none";
基本上就这些常见操作。掌握getElementById、querySelector等选择方法，再结合上述属性修改方式，就能灵活控制页面内容。不复杂但容易忽略细节，比如事件触发或安全问题。
