DOM4（事件处理函数，监视器）

1.事件对象方法
2.操作元素节点
3.操作元素内容
4.操作元素属性
5.操作元素节点（不常用）

事件对象方法

1.事件对象属性方法

代码	说明
this	返回：绑定事件对象（嵌套时点击子元素，返回绑定的父元素）
e.target	返回：触发事件对象（嵌套时点击子元素，返回触发的子元素）
e.type	返回事件类型，例如click）
e.preventDefault（空 ）	阻止默认事件，例如不让a跳转，传统方式return false也可以
e.stopPropagation（ 空 ）	阻止冒泡排序

this使用位置	this指向	其他
window的方法	window	例如：alert（ ）
普通函数中	window	调用者为window
全局作用域中	window	调用者为window
构造函数中	调用（创建对象）
对象中	对象名	例如：方法函数内的this
DOM方式注册事件	获取的dom元素

2.事件对象鼠标方法

代码	说明
e.clientX	返回鼠标相对浏览器可视窗口X坐标
e.clientY	返回鼠标相对浏览器可视窗口Y坐标
e.pageX	返回鼠标相对文档页面X坐标
e.pageY	返回鼠标相对文档页面Y坐标）
e.screenX	返回鼠标相对电脑屏幕X坐标
e.screenY	返回鼠标相对电脑屏幕Y坐标

3.事件对象键盘方法

代码	说明
e.keyCode=ASCII值	对照ASCII表，读写键盘按键

操作元素节点

1.创建标签
2.复制标签
3.删除标签
4.显示隐藏标签

（1）创建标签

创建元素（1）：
document.createElement（"div"）

添加元素：
1.添加到指定位置的子元素末尾（类似于after）
要添加位置的父元素位置.appendChild(创建的元素)；
2.添加到指定位置的子元素倒叙最开始（类似于before）
要添加位置的父元素位置..insertBefore(创建的元素，指定元素)；
指定元素一般为：父元素位置.children[0]

创建元素（2）：
通过dom获取的位置.insertAdjacentHTML（参数1，参数2）

1.参数1:插入的位置
元素自身前面（插入兄弟关系）：beforebegin
元素自身后面（插入兄弟关系）：afterend
插入元素内部第一个子节点前面（插入父子关系）：afterbegin
插入元素内部最后一个子节点后面（插入父子关系）：beforeend
2.参数2：插入的字符串（和innerHTML一样的代码）

（2）删除标签

获取父元素位置.removeChild（要删除的子元素位置）

（3）复制标签

需要克隆的目标元素位置.cloneNode（  true/false ）;（true为深复制，false为浅复制）

添加元素：与上一致

（4）隐藏/显示标签

显示元素：display：block
隐藏元素：display：none；

操作元素内容

项目	区别1	区别2	区别3
innerHTML	识别html标签	不去除空格和换行	常用
innertext	不识别html标签	去除空格和换行	不常用

操作元素属性

1.基本标签属性
2.自定义属性

基本标签属性
1.驼峰命名法
2.修改class选择器：获取的元素.className=" lzy “;
（1）赋值的新class类名前不需要加"点”
（2）覆盖之前的class样式
3.修改行内样式：获取的dom元素.style.color=“red”
4.基本元素属性：（详情HTML页）

元素	属性
普通元素属性	id，src，href，alt，title
表单元素属性	type，value，checked，selected，disabled

自定义标签属性：在html属性中保存并使用数据（tab页）
1.定义
（1）html没被dom获取前不是对象，不能设置属性和方法
（2）通过dom获取的html元素变成了dom对象，
（3）dom对象和构造函数创建对象不同，
（4）dom对象的自定义属性添加方法不能直接点方法
（5）this.自定义属性=undefined

2.设置自定义属性值
（1）规范：自定义设置的属性名统一命名规则 ：data-lzy
（2）元素位置.setAttribute（“自定义属性”，值）

3.获取自定义属性值
（1）元素位置.getAttribute（“自定义属性”）

4.删除自定义属性
（1）元素位置.removeAttribute（“内置属性名+自定义属性名”）；

操作元素节点（不常用）

1.doucument.write（“标签的代码及内容”）
（1）了解即可
（2）如果页面加载时写没问题（也没用）
（3）如果点击按钮生成（文档流执行完毕时）直接在body里面生成，原本页面所有的东西都没了

2.对象.innerHTML=“标签及代码”
（1）如果等于号里面有双引号，改成单引号

3.如果添加元素较多时:速度
转化为数组join成字符串的innerHTML  >  createElemen  >  innerHTML字符串拼接