返回

DOM 增删改查：颠覆你对 DOM 的认知，做一名真正的前端工程师

前端

DOM 是什么？

DOM（Document Object Model）是 HTML 和 XML 文档的编程接口。它将文档表示为一个树状结构，允许脚本语言访问和操作文档中的元素。

DOM 节点

DOM 节点是 DOM 树中的基本单位。它可以是元素节点、文本节点或注释节点。元素节点代表 HTML 或 XML 元素，文本节点代表元素之间的文本，注释节点代表注释。

DOM 增删改查

DOM 增删改查是指在 DOM 树中添加、删除或修改节点的操作。这些操作可以使用 JavaScript 的内置方法或第三方库来实现。

添加节点

要添加节点，可以使用 document.createElement() 方法来创建一个新节点，然后使用 appendChild() 方法将其添加到父节点中。例如，以下代码创建一个新的 div 元素并将其添加到 body 元素中：

const newDiv = document.createElement('div');
document.body.appendChild(newDiv);

删除节点

要删除节点，可以使用 removeChild() 方法将其从父节点中删除。例如，以下代码从 body 元素中删除 newDiv 元素：

document.body.removeChild(newDiv);

修改节点

要修改节点，可以使用 setAttribute() 方法来设置节点的属性，或者使用 innerHTML 属性来设置节点的 HTML 内容。例如，以下代码将 newDiv 元素的 id 属性设置为 "myDiv"：

newDiv.setAttribute('id', 'myDiv');

以下代码将 newDiv 元素的 HTML 内容设置为 "Hello world!"：

newDiv.innerHTML = 'Hello world!';

总结

DOM 增删改查是前端工程师必备技能。通过掌握这些操作，你可以轻松地创建、删除或修改 DOM 节点，从而实现各种各样的前端效果。

拓展阅读