参考资料

  1. HTML DOM删除下拉列表中的选项
  2. HTML DOM 节点
  3. HTML DOM 属性
  4. HTML DOM shift键被按下了吗？
  5. HTML DOM 返回的主机名：图像映射的某个区域的端口 实例
  6. HTML DOM 哪个鼠标键被点击了？
  7. HTML DOM弹出下拉列表中被选中的选项的索引
  8. HTML DOM改变表格边框的宽度

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：方法内容元素标签格式化详细动态文档结构样式