参考资料

  1. HTML DOM 返回文档中的所有cookies的名称/值对 实例
  2. HTML DOM 返回文档的最后一次修改时间 实例
  3. HTML DOM 返回图像映射某个区域的坐标实例
  4. HTML DOM对单个单元格的内容水平对齐
  5. HTML DOM 属性
  6. HTML DOM 返回一个表单中所有元素的value 实例
  7. HTML DOM 事件
  8. HTML DOM 返回一个button的type 实例

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