DOM对象：操作元素

1.元素内容:

innerHTML:元素内部的HTML文本

innerText:元素内部当前可见的文本内容

textContent:元素内部所有的文本

除了innerHTML会解析html的标签输出为对应结构，其他则不解析，且在看源代码中，对应文本会以实体的方式呈现（即转义，从而不解析为html结构）

2.元素属性

标准属性：

获取：dom对象.属性名

隐式属性支持：比如select的value是对应选中的option的value（select本身没有value）

保留字冲突：class的获取要用className，for的获取要用htmlFor

自定义属性：

获取：getAttribute

设置：setAttribute

自定义属性使用data-属性名（小驼峰命名法）

获取则可以通过: dom对象.dataset 这个集合获取自定义属性（dom对象.dataset.属性名）

3.元素结构

添加子元素：append（...node）/appendChild(node)

插入子元素：insertBefore(node,child)，把node插入到child前面，若要插入到后面，则child换成child.nextElementSibling即可

插入和添加元素中，使用的node并没有克隆，只是移动

克隆元素：node.cloneNode(bool)参数传入true是深拷贝（拷贝节点本身以及它的所有子节点和子孙节点），否则是浅拷贝（保留标签和所有属性，内容为空）

替换元素：

replaceChild(node,child)替换子元素

repalceChildren(...children)替换全部子元素

replaceWith(...children )替换整个节点（即调用的节点也被换掉了）

创建元素：

document.createElement('标签名')参数必须是字符串形式的

document.createDocumentFragment()文档片段节点：临时存放的节点，在大量改写文档的时候的缓冲区，改完了才会被放入到文档流中，避免多次重复渲染页面

删除元素：

remove()删除自己

removechild(child)删除子节点

若节点保留在变量中，remove只会删除页面显示，不会完全删掉对象，除非没保留从而被回收

4.元素样式

控制类样式：

className：获取或修改类名（保留原来的类名，添加新的样式的类名）、

classList：控制元素类名的对象

方法：

添加：add（'类名'）

移除：remove('类名'）

检验：contains（'类名'）

有则添无则删：toggle（'类名'，bool）true相当于add，false相当于remove

直接设置样式：

获取样式：

dom对象.style：仅是内联样式对象

windows.getComputedStyle(元素对象,"伪元素类型")：计算样式对象