DOM元素操作
初识元素事件
元素事件：某个元素发生一件事（被点击 click）
事件处理程序：是一个函数，发生了一件事，应该做什么事情
注册事件：将事件处理程序与某个事件关联
this关键字在事件处理程序中指代当前发生的事件元素
获取和设置元素属性
- 通用方式：getAttribute、setAttribute 只能得到原始值 不推荐使用
可识别属性
正常的HTML属性 例如：input
- dom对象.属性名：推荐
细节：
- 正常的属性即使没有复制，也有默认值
- 布尔属性在dom对象中，得到的是boolean
- 某些表单元素可以获取到某些不存在的属性
- 某些属性与标识符冲突，此时，需要更换属性名
自定义属性
HTML5 建议自定义属性使用data-作为前缀
如果遵从HTML5 自定义属性规范，可以使用dom对象.dataset.属性名控制属性
删除自定义属性
- removeAttribute(“属性名”);
- delete dom.dataset.属性名
获取和设置元素内容
- innerHTML：获取和设置元素的内部HTML文本
- innerText：获取和设置元素内部的纯文本，仅得到元素内部显示出来的文本
- textContent：获取和设置元素内部的纯文本，与innerTexttext不同在于 Content得到的是内部源代码中的文本 显示源码格式
元素结构重构
- 父元素.appendChild(元素)：在某个元素末尾加入一个子元素
- 父元素.append(元素1,元素2，元素N) 在某个元素末尾加入1或多个元素（还未成为标准慎用）
- 父元素.insertBefore(待插入的元素, 哪个元素之前或者节点前)
- 父元素.replaceChild(替换的元素, 被替换的元素)
细节：
更改元素结构效率较低，尽量少用。
创建和删除元素
创建元素
document.createElement(“元素名”)：创建一个元素对象
- document.createTextNode(“文本”)
- document.createDocumentFragment(): 创建文档片段
dom对象.cloneNode(是否深度克隆 true/false)：复制一个新的dom对象并返回
childNodes也是实时集合
删除元素
从子节点列表中删除某个节点
- removeChild：父元素调用，传入子元素
- remove：把自己删除
