可通过JavaScript动态修改HTML元素：一、getElementById配合属性赋值；二、querySelector配合setAttribute；三、innerHTML替换子内容；四、textContent更新纯文本；五、classList控制CSS类。
如果您希望在网页加载后实时调整HTML元素的属性或内容，可以通过JavaScript直接操作DOM节点。以下是实现动态修改的多种方式：
一、使用getElementById配合属性赋值
通过ID获取特定元素后，可直接修改其内置属性（如src、href、className）或文本内容（innerText、textContent）。该方法适用于已知唯一ID的单个元素。
1、在HTML中为需要修改的元素添加id属性，例如
。
2、在script标签内调用document.getElementById("logo")获取该元素对象。
立即学习“前端免费学习笔记（深入）”；
3、将对象的src属性赋值为新路径：element.src = "new.png";。
4、若需修改显示文字，对
执行element.innerText = "新标题";。二、使用querySelector配合setAttribute方法
querySelector支持CSS选择器语法，可定位更复杂的元素结构；setAttribute则确保所有属性（包括自定义data-属性）被安全写入，避免直接赋值引发的兼容性问题。
1、编写选择器字符串，例如"button[data-action='submit']"匹配具有指定data属性的按钮。
2、调用document.querySelector("button[data-action='submit']")获取首个匹配元素。
3、调用element.setAttribute("disabled", "true")禁用该按钮。
4、若需修改data-id值，执行element.setAttribute("data-id", "1024");。
三、使用innerHTML动态替换全部子内容
innerHTML允许将HTML字符串整体注入目标元素内部，适用于需要插入带标签结构的内容场景，但需注意XSS风险，不可直接插入用户输入内容。
1、选取容器元素，例如document.getElementById("content-area")。
2、构造合法HTML字符串，如"
动态标题
这是新段落
"。3、将字符串赋给元素的innerHTML属性：container.innerHTML = htmlString;
4、注意：此操作会完全清除原有子节点，包括绑定的事件监听器。
四、使用textContent仅更新纯文本内容
textContent仅处理文本节点，不解析HTML标签，适合安全地更新显示文字，且性能优于innerHTML，尤其在大量文本更新时。
1、获取目标元素，例如document.querySelector(".status-label")。
2、设置textContent为纯文本："加载完成"或"错误：网络超时"。
3、该操作不会触发HTML解析，所有尖括号字符会被原样显示，不会被当作标签处理。
4、若原元素内含子标签（如图标），textContent会覆盖整个内容，包括这些标签。
五、使用classList控制CSS类的增删切换
classList提供add()、remove()、toggle()、contains()等方法，用于精确管理元素的class属性，避免手动拼接字符串导致的重复或遗漏问题。
1、获取需要样式控制的元素，例如document.getElementById("menu-toggle")。
2、调用element.classList.add("active")添加类名。
3、调用element.classList.remove("hidden")移除指定类名。
4、调用element.classList.toggle("expanded")在存在时删除、不存在时添加该类。
