参考资料

  1. HTML DOM 节点列表长度
  2. HTML DOM改变单元格的内容
  3. HTML DOM弹出下拉列表中所有选项
  4. HTML DOM 属性
  5. HTML DOM改变表格的cellpadding和cellspacing
  6. HTML DOM 返回图像映射的某个区域的protocol 实例
  7. HTML DOM 返回一个button的name 实例
  8. HTML DOM 返回加载的当前文档的URL实例

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