Dom 操作汇总

DOM操作

DOM 是 Document Object Model 的缩写，中文翻译为文档对象模型。DOM 是 HTML 文档的树形结构表示，它允许我们使用编程语言来操作 HTML 文档。

DOM 操作包括节点操作、元素操作、属性操作、样式操作、事件操作等。这些操作在前端开发中非常重要，掌握这些操作可以帮助我们轻松地构建出各种交互式 web 页面。

节点操作

节点操作是 DOM 操作中最基础的操作，它包括创建、删除、移动和复制节点。

创建节点：

document.createElement("div");

删除节点：

node.remove();

移动节点：

node.appendChild(childNode);

复制节点：

node.cloneNode(true);

元素操作

元素操作是指对 HTML 元素进行的操作，它包括获取元素、设置元素属性、添加或删除元素等。

获取元素：

document.getElementById("myElement");

设置元素属性：

element.setAttribute("href", "https://example.com");

添加元素：

element.appendChild(childElement);

删除元素：

element.remove();

属性操作

属性操作是指对 HTML 元素的属性进行的操作，它包括获取、设置和删除属性。

获取属性：

element.getAttribute("href");

设置属性：

element.setAttribute("href", "https://example.com");

删除属性：

element.removeAttribute("href");

样式操作

样式操作是指对 HTML 元素的样式进行的操作，它包括获取、设置和删除样式。

获取样式：

element.style.color;

设置样式：

element.style.color = "red";

删除样式：

element.style.color = "";

事件操作

事件操作是指对 HTML 元素的事件进行的操作，它包括添加、删除和触发事件。

添加事件：

element.addEventListener("click", function() {});

删除事件：

element.removeEventListener("click", function() {});

触发事件：

element.dispatchEvent(new Event("click"));

总结

DOM 操作是前端开发中必不可少的一部分。掌握这些操作可以帮助我们轻松地构建出各种交互式 web 页面。

本文总结了常用的 DOM 操作，包括节点操作、元素操作、属性操作、样式操作和事件操作。这些操作在前端开发中非常重要，希望对大家有所帮助。