以下是建站时 HTML 与 JS 互转中常用的通用 DOM API示例代码，这些 API 在主流浏览器（包括 IE11 及以上）中兼容性良好，可安全用于动态生成 HTML、操作元素或提取数据等场景：
用于从现有 HTML 中精准定位元素，是后续操作（修改内容、提取数据）的基础。
最高效的查找方式，适用于唯一标识的元素（如表单、容器）：
// 查找ID为"productList"的元素（通常是<ul>或<div>）const listContainer = document.getElementById("productList");if (listContainer) { // 始终判断元素是否存在，避免后续操作报错// 找到后可执行操作（如添加子元素）listContainer.style.border = "1px solid #eee";}用于查找多个同类元素（如商品项、列表项），返回类数组（需遍历操作）：
// 查找所有类名为"product-item"的元素（如<li class="product-item">）const productItems = document.getElementsByClassName("product-item");// 遍历元素（兼容IE：用for循环替代forEach，避免依赖ES6方法）for (let i = 0; i < productItems.length; i++) {const item = productItems[i];item.addEventListener("click", function() {alert("点击了商品：" + this.innerText); // this指向当前点击的元素});}适用于查找特定标签的元素（如<a>链接、<input>输入框）：
// 查找页面中所有<input>元素（用于表单数据提取）const inputs = document.getElementsByTagName("input");// 筛选出类型为"text"的输入框for (let i = 0; i < inputs.length; i++) {if (inputs[i].type === "text") {console.log("文本输入框值：", inputs[i].value);}}支持 CSS 选择器语法（如.class、#id、tag），灵活性高（IE8 及以上支持）：
// 查找第一个类为"active"的<a>标签const activeLink = document.querySelector("a.active");if (activeLink) {activeLink.style.color = "red"; // 高亮当前激活的链接}// 查找所有"data-type='book'"的<div>元素（提取自定义属性元素）const bookItems = document.querySelectorAll("div[data-type='book']");bookItems.forEach(item => { // 若需兼容IE11，需提前补全forEach（见前文Polyfill）console.log("书籍ID：", item.dataset.type); // 提取data-type属性值});用于通过 JS 创建新元素并插入到 HTML 中，实现内容动态生成。
安全生成元素（避免innerHTML的 XSS 风险），兼容所有浏览器：
// 创建一个<div>元素（商品项）const productItem = document.createElement("div");// 设置类名（用于样式控制）productItem.className = "product-item";// 设置文本内容（纯文本，自动转义特殊字符，安全无风险）productItem.textContent = "2024新款笔记本电脑";// 也可设置属性（如数据属性）productItem.dataset.id = "1001"; // 等价于HTML中的data-id="1001"避免频繁插入 DOM 导致的性能问题，兼容所有浏览器：
// 创建文档片段（临时容器，不直接渲染到页面）const fragment = document.createDocumentFragment();// 模拟生成3个商品项const productNames = ["衬衫", "裤子", "鞋子"];productNames.forEach(name => {const item = document.createElement("p");item.textContent = name;fragment.appendChild(item); // 先添加到片段});// 一次性插入到页面（仅触发1次DOM重排）document.getElementById("productContainer").appendChild(fragment);控制元素插入的位置（如在某个元素前 / 后插入）：
// 创建新元素（"最新活动"标签）const newTag = document.createElement("span");newTag.textContent = "最新活动";newTag.className = "tag";// 找到目标位置（在id为"newsList"的元素前插入）const newsList = document.getElementById("newsList");if (newsList && newsList.parentNode) {// 在newsList的父元素中，将newTag插入到newsList之前newsList.parentNode.insertBefore(newTag, newsList);}用于动态修改已有元素的内容、属性或样式，实现交互反馈。
安全修改文本（自动过滤 HTML 标签），替代innerHTML（避免 XSS）：
// 找到"username"元素，动态更新显示内容const usernameElement = document.getElementById("username");if (usernameElement) {// 从后端获取用户名后更新（如"张三"）usernameElement.textContent = "欢迎回来，" + userData.name;// 若用innerHTML可能有风险：如userData.name含"<script>"标签会被执行}操作元素的标准属性（如src、href）或自定义属性：
// 动态修改图片src（如切换商品主图）const productImg = document.getElementById("productImg");if (productImg) {// 设置新图片地址productImg.setAttribute("src", "new-product.jpg");// 设置alt属性（提升可访问性）productImg.setAttribute("alt", "2024新款商品图");// 获取当前src（验证是否设置成功）console.log("当前图片地址：", productImg.getAttribute("src"));}动态调整样式（如点击后改变颜色、显示 / 隐藏元素）：
// 点击按钮后显示隐藏的"详情面板"const detailPanel = document.getElementById("detailPanel");const showBtn = document.getElementById("showDetailBtn");showBtn.addEventListener("click", function() {if (detailPanel) {// 切换显示状态（兼容所有浏览器的display控制）if (detailPanel.style.display === "none") {detailPanel.style.display = "block"; // 显示showBtn.textContent = "隐藏详情";} else {detailPanel.style.display = "none"; // 隐藏showBtn.textContent = "查看详情";}}});用于移除无用元素或替换旧元素，避免 DOM 冗余。
从父元素中移除指定子元素（兼容 IE11 及以上）：
// 找到要删除的"过期活动"元素const expiredItem = document.getElementById("expiredActivity");if (expiredItem && expiredItem.parentNode) {// 通过父元素移除（必须指定父节点）expiredItem.parentNode.removeChild(expiredItem);}用新元素替换旧元素（如用新商品信息替换旧信息）：
// 创建新元素（更新后的商品信息）const newInfo = document.createElement("div");newInfo.textContent = "新款手机（256G版）";newInfo.className = "product-info";// 找到旧元素并替换const oldInfo = document.getElementById("oldProductInfo");if (oldInfo && oldInfo.parentNode) {oldInfo.parentNode.replaceChild(newInfo, oldInfo);}上述 API 均满足：
使用时只需注意：对返回的元素进行 “存在性判断”（如if (element) { ... }），避免因元素未找到导致后续代码报错。
