Go转JS-第六弹（DOM）

DOM基础

DOM（Document Object Model）是HTML和XML文档的树状表示形式。它允许程序以编程方式访问和操作文档的内容、结构和样式。DOM提供了一系列方法和属性，可用于获取、创建、修改和删除元素、属性和文本节点。

事件基础

事件是用户与网页交互时触发生成的，例如鼠标点击、键盘输入或页面加载。JavaScript通过事件处理程序来处理事件，事件处理程序是响应特定事件而执行的函数或代码块。

事件流

事件流了事件从其目标元素到DOM树的其余部分的处理过程。事件流有三个阶段：

• 捕获阶段： 事件从目标元素向上冒泡到DOM树中。
• 目标阶段： 事件在目标元素本身处理。
• 冒泡阶段： 事件从目标元素向下冒泡到DOM树中。

事件委托

事件委托是一种技术，它允许为父元素注册事件处理程序，以便处理子元素的事件。这可以提高性能，因为事件处理程序只需要注册一次，而不是为每个子元素注册。

冒泡机制

冒泡机制是事件流的一部分，它允许事件从目标元素冒泡到DOM树中的祖先元素。这使得可以在祖先元素中处理子元素触發的事件。

DOM操作

DOM操作是一组方法和属性，可用于获取、创建、修改和删除DOM元素、属性和文本节点。常见的DOM操作包括：

• 获取元素： getElementById、getElementsByTagName、querySelector
• 创建元素： createElement、createDocumentFragment
• 修改元素： innerHTML、outerHTML、setAttribute
• 删除元素： remove、replaceChild

document

document对象是DOM的根元素，它表示整个HTML文档。它提供了一系列方法和属性，用于访问和操作文档的根元素、标题、正文和URL。

总结

DOM是JavaScript中一个基本概念，它允许程序以编程方式访问和操作HTML和XML文档。了解DOM的基础知识，包括事件基础、事件流、事件委托、冒泡机制和DOM操作，对于充分利用JavaScript的强大功能至关重要。

Go转JS系列文章链接：

• 第一弹：初探篇
• 第二弹：环境搭建篇
• 第三弹：类型篇
• 第四弹：控制流篇
• 第五弹：函数篇
• 第六弹：DOM篇
• 第七弹：异步篇
• 第八弹：进阶篇

附录：技术代码示例

事件处理程序示例：

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

事件委托示例：

document.addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    alert("按钮被点击了！");
  }
});

DOM操作示例：

const newElement = document.createElement("p");
newElement.innerHTML = "这是一个新段落。";

const parentElement = document.getElementById("myContainer");
parentElement.appendChild(newElement);