参考资料

  1. HTML DOM 返回图像映射的某个区域的href 实例
  2. HTML DOM document.write() 方法
  3. HTML DOM 改变一个包含在iframe中的文档的背景颜色
  4. HTML DOM 返回一个button的name 实例
  5. HTML DOM弹出下拉列表中所有选项
  6. HTML DOM 返回一个iframe中的marginwidth属性的值
  7. HTML DOM 返回一个iframe中的longdesc属性的值
  8. HTML DOM 返回页面上所有相对链接的基链接 实例

HTML DOM 修改 HTML 内容格式化

简介

HTML DOM (文档对象模型) 提供了多种方法来动态修改网页内容，包括文本、HTML 结构和样式。

常用方法

1. innerHTML

  • 功能：获取或设置元素的 HTML 内容

  • 语法：element.innerHTML = newHTML

  • 示例：

document.getElementById("demo").innerHTML = "<p>新内容</p>";

2. textContent

  • 功能：获取或设置元素的纯文本内容

  • 语法：element.textContent = newText

  • 示例：

document.getElementById("demo").textContent = "纯文本内容";

3. innerText

  • 功能：获取或设置元素的可见文本内容

  • 语法：element.innerText = newText

  • 示例：

document.getElementById("demo").innerText = "可见文本";

格式化方法

1. createElement()

  • 功能：创建新的 HTML 元素

  • 示例：

let newDiv = document.createElement("div");

2. appendChild()

  • 功能：向元素添加子节点

  • 示例：

document.body.appendChild(newDiv);

3. insertBefore()

  • 功能：在指定节点前插入新节点

  • 示例：

parentElement.insertBefore(newElement, existingElement);

4. removeChild()

  • 功能：移除子节点

  • 示例：

parentElement.removeChild(childElement);

CSS 扩展

1. style 属性

  • 功能：直接修改元素样式

  • 示例：

document.getElementById("demo").style.color = "red";

2. className

  • 功能：修改元素的 class 属性

  • 示例：

document.getElementById("demo").className = "newClass";

3. classList

  • 功能：更灵活地操作 class

  • 方法：

    • add() - 添加类

    • remove() - 移除类

    • toggle() - 切换类

    • contains() - 检查类是否存在

  • 示例：

document.getElementById("demo").classList.add("active");

综合示例

<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
  background-color: yellow;
  font-weight: bold;
}
</style>
</head>
<body>

<p id="demo">原始内容</p>

<button onclick="changeContent()">修改内容</button>
<button onclick="formatContent()">格式化内容</button>

<script>
function changeContent() {
  document.getElementById("demo").innerHTML = "<em>修改后的</em> <strong>HTML</strong> 内容";
}

function formatContent() {
  let demo = document.getElementById("demo");
  demo.classList.add("highlight");
  demo.style.fontSize = "20px";
  demo.style.color = "blue";
}
</script>

</body>
</html>

注意事项

  1. innerHTML 会解析 HTML 标签，而 textContent 不会

  2. innerText 会考虑 CSS 样式，可能触发重排

  3. 直接修改 style 属性会覆盖内联样式

  4. 使用 classList 比直接修改 className 更高效

TAG：示例功能元素方法节点文本语法格式化样式文档

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。