HTML DOM（文档对象模型）是一种用于访问和操作 HTML 文档的编程接口。以下是一个简单的 HTML DOM 教程，介绍 HTML DOM 的基本概念和一些常见的操作。
步骤 1: 获取 HTML 元素

使用 JavaScript 可以通过多种方式获取 HTML 元素。以下是其中一些常见的方法：

  •  通过 ID 获取元素：
  <div id="myDiv">这是一个元素</div>
  var elementById = document.getElementById("myDiv");

  •  通过标签名获取元素：
  var elementsByTagName = document.getElementsByTagName("p");

  •  通过类名获取元素：
  <p class="myClass">这是一个段落</p>
  var elementsByClassName = document.getElementsByClassName("myClass");

步骤 2: 操作 HTML 元素

一旦获取了 HTML 元素，你可以对其进行各种操作。以下是一些基本操作的示例：

  •  修改元素的文本内容：
  elementById.innerHTML = "新的文本内容";

  •  修改元素的样式：
  elementById.style.color = "red";

  •  添加新元素：
  var newElement = document.createElement("p");
  newElement.innerHTML = "新的段落";
  document.body.appendChild(newElement);

步骤 3: 事件处理

HTML DOM 允许你为元素添加事件监听器，以便在事件发生时执行特定的操作。
<button id="myButton">点击我</button>
var button = document.getElementById("myButton");

button.addEventListener("click", function() {
  alert("按钮被点击了！");
});

步骤 4: 遍历和查找

你可以使用循环遍历元素集合，或者使用查询函数查找符合条件的元素。
var paragraphs = document.getElementsByTagName("p");

for (var i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.fontWeight = "bold";
}

var firstParagraph = document.querySelector("p");

步骤 5: 操作属性

你可以读取或修改元素的属性。
var link = document.getElementById("myLink");

// 读取属性
var hrefValue = link.getAttribute("href");

// 修改属性
link.setAttribute("href", "https://www.example.com");

这只是一个简单的 HTML DOM 入门教程，HTML DOM 提供了强大的功能，允许你通过 JavaScript 动态地操作和修改 HTML 文档。进一步学习可以包括异步操作、事件冒泡、更高级的选择器等概念。你可以查阅相关的文档和教程，深入了解 HTML DOM 的更多内容。


转载请注明出处：http://www.zyzy.cn/article/detail/3156/HTML