节点操作、js事件

节点操作

创建节点

元素节点：document.createElement(“标签名”);

返回值：新的元素节点

创建完成后，需要插入到页面中才能看到

文本节点

document.createTextNode(内容);

插入节点

1.node.appendChild

在父节点的最后添加一个新的子节点。

2.node.insertBefore(新节点，参考节点)

在父节点的参考节点前添加一个新的子节点。

如果参考节点为null，则在父节点的最后添加新的子节点

删除节点

父节点.removeChild(子节点);

在父节点中移除该子节点

node.remove();
在父节点中移除自身。

替换节点：

用一个节点去替换另外一个节点

父节点.replaceChild(新节点,旧节点);

复制节点

node.cloneNode([true]);

复制节点，克隆节点

如果参数为true，则将其所有子节点也克隆。

js事件

1.什么是事件
一件事情发生了，对其进行处理或者响应。

2. 事件的三要素

事件源，事件类型，事件处理

比如：点击右上角的X，页面关闭。 事件源：X，事件类型：点击 事件处理：页面关闭。

谁引发的后续事件，谁就是事件源。

事件源：DOM节点（一般为元素节点）

事件类型

事件处理 函数（代码块）

事件类型：

1.鼠标事件

2.键盘事件

3.浏览器事件

4.表单事件

1.鼠标事件

click == 鼠标左键单击

dbclick == 鼠标左键双击

contextmenu == 鼠标右键单击

mousewheel == 鼠标滚动

mousedown == 鼠标单击事件 不管是左键还是右键，还是滚动都可以触发

mouseup == 鼠标抬起

mousemove == 鼠标移动

mouseover == 鼠标移入

mouseout == 鼠标移出

mouseenter == 鼠标移入

mouseleave == 鼠标移出

2.键盘事件

不是所有的元素都能触发
表单元素(选中效果)，document ,window

keydown 键盘按下

keyup 键盘抬起

keypress 键盘按下

在文本框中输入的内容必须与你按下的键是一致的

3.浏览器事件 window事件

load 页面加载完毕

scroll 页面滚动

resize 窗口尺寸改变

offline 网络断开

online 网络恢复

4.表单事件

表单事件主要是表单元素和form标签的

change 表单内容发生改变时，而且已经失去焦点时触发。

input 表单输入事件

focus 获取焦点

blur 失去焦点

submit 表单提交

reset 表单重置

5.事件绑定方式

1.行内式
在标签中直接通过on+事件类型 属性 去绑定事件
2.内联式
（1）直接绑定匿名函数
（2）先定义函数，再去绑定

3.监听

addEventListener

语法：事件源.addEventListener(“事件类型”,事件处理函数);

使用监听，可以给同一个事件类型绑定多个事件处理函数。

多个事件处理函数执行顺序是按照绑定顺序来的

先绑定先执行

在IE低版本不支持

attachEvent()
IE低版本支持
语法：事件源.attachEvent(“on+事件类型”,事件处理函数);
多个事件处理函数的执行顺序是按照绑定顺序的倒序来的
先绑定后执行

6.事件解绑

对于非监听方式，可以直接将null赋值。

对于监听方式绑定

标准浏览器
removeEventListener(“事件类型”,事件处理函数)；
【注意】 如果你想要解绑事件，那么你在绑定事件时，一定要将函数单独定义。使用函数名的方式去绑定事件。

IE低版本
detachEvent(“on+事件类型”,事件处理函数);