DOM CRUD 操作
文档对象模型 (DOM) 是浏览器表示 HTML 的方式。它将每个元素、属性和文本片段都转换为一个对象。JavaScript 利用这些对象来改变你在屏幕上看到的内容。
当你点击一个按钮而页面在不刷新的情况下进行更新时，JavaScript 正在修改 DOM。
你可以使用这些方法执行 CRUD（创建、读取、更新、删除）操作。
1. 获取元素 (Read)
要修改某些内容，你必须首先找到它。使用以下方法：
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
2. 创建元素 (Create)
你可以使用 JavaScript 生成新的 HTML 元素。
createElement("tagName")在内存中创建元素。append()将内容添加到父元素的末尾。appendChild()将单个节点作为最后一个子节点添加。prepend()将内容添加到父元素的开头。before()在特定项目之前插入一个元素。after()在特定项目之后插入一个元素。insertBefore()将一个元素放置在特定子节点之前。
注意：元素会一直保留在内存中，直到你将其添加到页面上。
3. 更新元素 (Update)
你可以使用以下属性更改现有内容：
- innerText: 仅更改可见文本。
- textContent: 更改所有文本，包括隐藏文本。
- innerHTML: 更改内容并允许你添加 HTML 标签。
4. 操作属性 (Update)
属性提供了关于元素的额外信息。
- setAttribute(name, value): 设置或替换属性。
- getAttribute(name): 获取属性值。
- removeAttribute(name): 删除属性。
- hasAttribute(name): 检查属性是否存在。
专业提示：使用 classList.add() 来添加类名而不移除旧的类名。而 setAttribute() 会替换整个值。
5. 删除元素 (Delete)
要从页面中删除元素，请使用：
- remove()
CRUD 流程总结：
- 创建：
createElement() - 更新：
innerText = "New text" - 添加：
appendChild() - 删除：
remove()
精通这些方法可以让你构建交互式应用，例如待办事项列表或计算器。这是前端开发的一项至关重要的技能。
来源：https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka