参考资料

  1. HTML DOM获得有下拉列表的表单的ID
  2. HTML DOM 返回文档中的所有cookies的名称/值对 实例
  3. HTML DOM 返回一个iframe中的longdesc属性的值
  4. HTML DOM 返回一个链接的type属性的值实例
  5. HTML DOM 改变iframe的高度和宽度
  6. HTML DOM 返回图像映射的某个区域的pathname 实例
  7. HTML DOM 返回一个区域的href属性的querystring部分 实例
  8. HTML DOM 返回一个button的value 实例

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

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