DOM 操作相关：

• 查询节点（获取节点）
• 创建节点
• 更新节点
• 添加节点
• 删除节点

DOM 是 HTML 和 XML 文档的编程接口。提供了对文档结构化的表述，并且定义了一种方法可以从脚本（程序）中对该结构访问，从而改变文档的结构、样式、内容。

任何 HTML 和 XML 都可以用表示成一个由节点构成的层级结构。节点可以分成很多类型，每种类型对应着文档的不同信息和（或）标记，也都有自己不同的特性、数据、方法，而且与其他类型有某种关系。

DOM 树中有很多类型的 DOM 节点包含着其他类型的节点。

🌰 例子 / 不同类型的 DOM 节点：

<div>
	<p title="title">
		content
	</p>
</div>

上面的结构中， div / p 是元素节点， content 是文本节点， title 是属性节点。

DOM 操作

创建节点

createElement 创建新的元素，接受一个参数，为该元素的标签名称。

🌰 例子：

const divEl = document.createElement('div')

createTextNode 创建一个文字节点：
🌰 例子：

const textEl = document.createTextNode("content")

createDocumentFragment 创建文档碎片，表示一种轻量级文档，主要用来存储临时节点，然后把文档碎片的内容一次性添加到 DOM 中。

createAttribute 创建属性节点，自定义属性。
🌰 例子：

const dataAttribute = document.createAttribute('custom')
console.log(dataAttribute)

获取节点

querySelector ：传入有效的 CSS 选择器即可选中单个（第一个） DOM 元素。

🌰 例子：

document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')

querySelectorAll 返回一个包含节点子树内所有与之匹配的元素节点列表，如果没有匹配的则返回一个空节点列表。

🌰 例子：

const notLive = document.querySelectorAll("p")

注意使用这个方法返回的是一个静态实例，（是一个静态的快照）并非实时的查询。

获取 DOM 元素还有以下方法：

document.getElementById('id')
document.getElementByClassName('class') // 根据类名返回对象集合
document.getElementsByTagName('tag') // 根据标签名返回对象集合
document.getElementByName('name') // 根据指定名称获取对象集合

document.documentElement // 获取 html 标签
document.body // 获取 body 标签

除了上面获取节点的方式，还可以通过节点的关系获取。每个 DOM 节点有 parentNode 、 childNodes 、 firstChild 、 lastChild 、 nextSibling 、 previousSibling 等属性。

更新节点

innerHTml 可以修改一个 DOM 节点的文本内容，也可以通过 HTML 片段修改 DOM 节点内部的子树。

删除节点

删除一个节点首先需要获取该节点本身以及他的父节点，然后调用父节点的 removeChild 方法删掉该节点。

🌰 例子：

const self = document.getElementById('to-be-removed')
const parent = self.parentElement
const removed = perent.removeChild(self) // 删除结果
console.log(removed) // true