DOM CRUD 操作
文档对象模型 (DOM) 是 HTML 的树状结构。JavaScript 利用它来访问和修改页面上的每一个元素、属性和文本片段。
当你点击一个按钮而页面在不刷新的情况下进行更新时，你所看到的正是 DOM 操作在起作用。
以下是执行 CRUD（创建、读取、更新、删除）操作的方法。
- 读取 (Read)：访问元素 使用以下方法在页面上查找元素：
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
- 创建 (Create)：生成新元素 你可以使用 JavaScript 生成新的 HTML 元素。
- createElement(): 在内存中创建一个新标签。
- append(): 在父元素的末尾添加内容。
- appendChild(): 将单个节点作为最后一个子节点添加。
- prepend(): 在父元素的开头添加内容。
- before(): 在特定目标之前插入一个元素。
- after(): 在特定目标之后插入一个元素。
- insertBefore(): 在现有子节点之前放置一个新元素。
- 更新 (Update)：修改内容 修改用户在屏幕上看到的内容：
- innerText: 仅更新可见文本。
- textContent: 更新所有文本，包括隐藏文本。
- innerHTML: 更新内容并允许你添加 HTML 标签。
- 属性 (Attributes)：管理属性 属性为你的标签添加额外信息。
- setAttribute(): 为属性设置新值。请注意，这会替换旧值。
- getAttribute(): 获取当前值。
- removeAttribute(): 删除属性。
- hasAttribute(): 检查属性是否存在。
专业提示：使用 classList.add() 来添加类名，而不会删除现有的类名。对于自定义属性，请使用 setAttribute()。
- 删除 (Delete)：移除元素 要从页面中移除一个元素，请使用：
- remove()
CRUD 流程总结：
- Create: document.createElement("p")
- Update: p.innerText = "Hello"
- Read: document.getElementById("p")
- Delete: p.remove()
掌握这些方法可以让你构建交互式工具，例如待办事项列表、计算器和表单验证器。这是学习现代 Web 框架的关键一步。
Source: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka
Optional learning community: https://t.me/GyaanSetuAi