参考资料

  1. HTML DOM改变表格边框的宽度
  2. HTML DOM 哪个鼠标键被点击了？
  3. HTML DOM 返回文档中的所有cookies的名称/值对 实例
  4. HTML DOM 重置表单
  5. HTML DOM 元素
  6. HTML DOM 返回一个区域的href属性的锚部分实例
  7. HTML DOM 返回一个客户端图像映射的usemap的值
  8. HTML DOM 返回一个iframe中的longdesc属性的值

HTML DOM 方法

HTML DOM 方法格式化

详细介绍

HTML DOM (Document Object Model) 方法允许 JavaScript 动态访问和更新 HTML 文档的内容、结构和样式。DOM 方法提供了对 HTML 元素的编程接口。

常用标签

DOM 方法可以操作所有 HTML 标签，常见的有：

  • <div>, <p>, <span> - 内容容器

  • <h1>-<h6> - 标题

  • <a> - 链接

  • <img> - 图像

  • <table>, <tr>, <td> - 表格

  • <form>, <input>, <button> - 表单元素

核心方法

获取元素

  • document.getElementById(id)

  • document.getElementsByTagName(name)

  • document.getElementsByClassName(name)

  • document.querySelector(cssSelector)

  • document.querySelectorAll(cssSelector)

修改内容

  • element.innerHTML = newHTML

  • element.textContent = newText

  • element.setAttribute(attr, value)

  • element.getAttribute(attr)

创建/删除元素

  • document.createElement(tagName)

  • document.createTextNode(text)

  • parentElement.appendChild(element)

  • parentElement.removeChild(element)

样式操作

  • element.style.property = value

  • element.className = className

  • element.classList.add(className)

  • element.classList.remove(className)

  • element.classList.toggle(className)

用法实例

<!DOCTYPE html>
<html>
<body>

<h2 id="demo">DOM 方法示例</h2>
<button onclick="changeContent()">点击修改</button>
<button onclick="addElement()">添加元素</button>
<div id="container"></div>

<script>
function changeContent() {
  document.getElementById("demo").innerHTML = "内容已修改";
  document.getElementById("demo").style.color = "red";
}

function addElement() {
  const newElement = document.createElement("p");
  const textNode = document.createTextNode("新添加的段落");
  newElement.appendChild(textNode);
  document.getElementById("container").appendChild(newElement);
}
</script>

</body>
</html>

CSS 扩展

DOM 方法可以与 CSS 结合使用：

  1. 动态样式修改:

element.style.backgroundColor = "blue";
element.style.fontSize = "20px";

  1. 类名操作:

// 添加类
element.classList.add("highlight");

// 移除类
element.classList.remove("highlight");

// 切换类
element.classList.toggle("active");

  1. CSS 变量操作:

// 设置CSS变量
document.documentElement.style.setProperty('--main-color', 'red');

// 获取CSS变量
getComputedStyle(element).getPropertyValue('--main-color');

  1. 动画控制:

element.style.animation = "fadeIn 2s";
TAG：方法内容元素标签格式化详细动态文档结构样式

AIGEO优化摘要

AI可读摘要：HTML DOM 方法格式化详细介绍HTML DOM (Document Object Model) 方法允许 JavaScript 动态访问和更新 HTML 文档的内容、结构和样式。DOM 方法提供了对 HTML 元素的编程接口。常用标签DOM 方法可以操作所有 HTML 标签，常见的有：div, p, span - 内容容器h1-h6 - 标题a - 链...
常见问题：
HTML DOM 方法主要讲了什么？

HTML DOM 方法格式化详细介绍HTML DOM (Document Object Model) 方法允许 JavaScript 动态访问和更新 HTML 文档的内容、结构和样式。DOM 方法提供了对 HTML 元素的编程接口。常用标签DOM 方法可以操作所有 HTML 标签，常见的有：div, p, span - 内容容器h1-h6 - 标题a - 链...

HTML DOM 方法适合哪些人参考？

适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。

阅读HTML DOM 方法时应重点看哪些内容？

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分：85/100
  • 建议补充封面或内容图片。
作者：王壹杰
时间：2025-04-24 10:15:21
来源：https://html.ciilii.com/