文档对象模型：DOM，即文档对象模型（Document Object Model） 是 W3C 的推荐标准，它提供了对文档的结构化的表述，并定义了一种方式可以让我们从程序中对该结构进行访问，从而改变文档的结构、内容和样式。
说白了，DOM给我们提供了一种可以使用代码访问、修改HTML文档内容的方式。
文档节点（Document）：整个HTML文档的根节点，它只有一个子节点，即文档元素 。
文档元素（html）：文档元素是文档的最外层元素，即根元素，文档中的其他所有元素都包含在文档元素中，每个文档只能有一个文档元素。
Dom节点操作
- 根据 id 名称获取
语法：document.getElementById( 'id名称' )
作用：获取文档流中 id 名对应的 一个 元素
返回值：如果有 id 对应的元素, 就是 这个元素
如果没有 id 对应的元素, 就是 null
2.根据元素 类名 获取
语法：document.getElementsByClassName( '元素类名' )
作用：获取文档流中 所有 类名对应的元素
返回值：必然是一个 伪数组
如果有类名对应的元素, 有多少获取多少
如果没有类名对应的元素, 空的伪数组
3.根据元素 标签名 获取
语法：document.getElementsByTagName( ‘标签名' )
作用：获取文档流中 所有 标签名对应的元素
返回值：必然是一个 伪数组
如果有标签名对应的元素, 有多少获取多少
如果没有标签名对应的元素, 空的伪数组
4.根据 选择器 获取一个
语法：document.querySelector( '选择器' )
作用：获取文档流中满足选择器规则的 第一个 元素
返回值：如果有选择器对应的元素, 获取到 第一个
如果没有选择器对应的元素, null
5.根据 选择器 获取一组
语法：document.querySelectorAll( '选择器' )
作用：获取文档流中 所有 满足选择器规则的元素
返回值：必然是一个 伪数组
如果有选择器对应的元素, 有多少获取多少
如果没有选择器对应的元素, 空的伪数组
操作元素内容
操作元素 文本 内容：
获取：元素.innerText
设置：元素.innerText = '新内容'
操作元素 超文本 内容：
获取 : 元素.innerHTML
设置 : 元素.innerHTML = '新内容'
操作元素属性
原生属性：
获取：元素.属性名
设置 : 元素.属性名 = '属性值'
自定义属性：
获取 : 元素.getAttribute( '属性名' )
设置 : 元素.setAttribute( '属性名', '属性值' )
删除 : 元素.removeAttribute( '属性名' )
操作元素行内样式
获取 : 元素.style.样式名
设置 : 元素.style.样式名 = '样式值'
创建节点
语法：document.createElement( '标签名称' )
作用：创建一个指定标签元素
返回值：一个创建好的元素节点
插入节点
语法1：父节点.appendChild( 子节点 )
作用：把 子节点 放在 父节点 的内部, 并且放在最后的位置
语法2：父节点.insertBefore( 要插入的子节点, 哪一个子节点的前面 )
作用： 把 子节点 放在 父节点 的内部, 并且放在指定某一个子节点的前面
删除节点
语法1：父节点.removeChild( 子节点 )
作用：从 父节点 内删除某一个 子节点
语法2：节点.remove()
作用：把 自己 直接删除
替换节点
语法：父节点.replaceChild( 换上节点, 换下节点 )
作用：在父节点内, 使用 换上节点 替换掉 换下节点
