DOM——04（节点；元素创建；元素操作；元素绑定/解绑事件；事件阶段）
目录
1.节点
2.获取相关的节点
2.1 获取相关的父级节点和父级元素（两个结果是一样的）
2.2 获取相关的子节点和子元素
2.3 获取节点和元素
2.4 节点的兼容代码
3.案例
3.1 点击按钮设置div中的p标签的背景颜色
3.2 点击按钮控制隔行变色
3.3 切换背景图片
3.4 全选和全不选的实现
4.元素创建的三种方式
4.1 document.write("标签的代码及内容");
4.2 元素对象.innerHTML="标签及代码";
4.3 document.createElement("标签的名字");
4.4 元素创建案例
4.4.1 创建列表
4.4.2 点击按钮创建表格
5.元素相关的操作方法
6.为元素绑定(添加)事件【向指定元素添加事件句柄】
6.1 为元素绑定多个事件
6.1.1 元素对象.addEventListener("事件类型(没有on)",事件处理函数,[false/true]);
6.1.2 元素对象.attachEvent("事件类型(有on)",事件处理函数);
6.1.3 元素对象.on事件名字=事件处理函数
6.2 为元素绑定事件的兼容代码
6.3 addEventListener()与attachEvent()的区别
7.为元素解绑事件
7.1 元素对象.removeEventListener("事件类型(没有on)",命名函数的名字,[false/true]);
7.2 元素对象.detachEvent("事件类型(有on)",命名函数的名字);
7.3 元素对象.on事件名字=null;
7.4 为元素解绑事件的兼容代码
8.事件阶段
9.模拟百度搜索框
1.节点
节点(node)：页面中所有的内容都是节点（标签、属性、文本[文字、空格、换行等]）
可以说，是分为标签节点、属性节点、文本节点三类
- nodeType：节点的类型；标签节点---1，属性节点---2，文本节点---3
- nodeName：节点的名字；标签节点---大写的标签名字，属性节点---小写的属性名字，文本节点---#text
- nodeValue：节点的值；标签节点---null，属性节点---属性值，文本节点---文本内容
2.获取相关的节点
学习节点操作还是为了操作元素
2.1 获取相关的父级节点和父级元素（两个结果是一样的）
2.2 获取相关的子节点和子元素
2.3 获取节点和元素
总结：
- 凡是获取节点的代码在谷歌和火狐得到的都是相关的节点
- 凡是获取元素的代码在谷歌和火狐得到的都是相关的元素
- 从子节点和兄弟节点开始，凡是获取节点的代码，在IE8中得到的是元素对象；获取元素的相关代码，在IE8中得到的是undefined----元素的代码，IE8中不支持
2.4 节点的兼容代码
获取任意一个元素的前一个子元素/后一个子元素/所有的兄弟元素都同理
3.案例
3.1 点击按钮设置div中的p标签的背景颜色
3.2 点击按钮控制隔行变色
3.3 切换背景图片
3.4 全选和全不选的实现
全选和全不选的实现
大写
小写
A
a
B
b
C
c
D
d
4.元素创建的三种方式
元素创建是为了提高用户的体验
举例说明：页面东西越少，页面加载速度越快，用户体验越好。只在页面显示必要的，当用户的操作（比如鼠标经过）的时候，才会显示其他的信息。
关于创建内容需要注意的：（外双内单，外单内双）
"
"或''
4.1 document.write("标签的代码及内容");
4.2 元素对象.innerHTML="标签及代码";
4.3 document.createElement("标签的名字");
上面的代码，一点击按钮就会追加，会有好多好多个；接下来的代码，只创建一个元素然后追加：（两种方法，效果是一样的）
4.4 元素创建案例
4.4.1 创建列表
1.使用元素对象.innerHTML="标签及代码";
2.使用document.createElement("标签的名字");
4.4.2 点击按钮创建表格
5.元素相关的操作方法
1.node1.appendChild(node2)
向节点node1的子节点列表的末尾添加新的子节点node2
2.node.insertBefore(newnode,existingnode)
向节点node插入新的子节点newnode，在已有的子节点existingnode之前。如果未规定existingnode，则会在结尾插入newnode
3.node.replaceChild(newnode,oldnode)
用新节点newnode替换某个子节点oldnode
4.node1.removeChild(node2)
从节点node1的子节点列表删除节点node2
6.为元素绑定(添加)事件【向指定元素添加事件句柄】
6.1 为元素绑定多个事件
6.1.1 元素对象.addEventListener("事件类型(没有on)",事件处理函数,[false/true]);
此方法Google、Firefox等主流浏览器支持，IE8不支持
参数1:事件的类型（必须）——事件的名字，不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"
参数2:事件处理函数（必须）——事件触发时执行的函数(命名函数/匿名函数)
参数3:布尔类型（可选，不选值为默认值false，所以false可写可不写）——指定事件在捕获或冒泡阶段执行，true：事件句柄在捕获阶段执行；false：默认，事件句柄在冒泡阶段执行（事件阶段在后面会说到）
6.1.2 元素对象.attachEvent("事件类型(有on)",事件处理函数);
此方法Google、Firefox等主流浏览器不支持，IE8支持
参数1:事件的类型（必须）——事件的名字，使用"on"前缀。 例如，使用 "onclick"
参数2:事件处理函数（必须）——事件触发时执行的函数(命名函数/匿名函数)
6.1.3 元素对象.on事件名字=事件处理函数
如果是多个相同事件注册用这种方式，最后一个执行，之前的被覆盖了
my$("btn").οnclick=function(){console.log("1");};
my$("btn").οnclick=function(){console.log("2");};
my$("btn").οnclick=function(){console.log("3");};——只执行这个
6.2 为元素绑定事件的兼容代码
判断对象中有没有某个方法：对象.方法名——true:有；false:没有
6.3 addEventListener()与attachEvent()的区别
- 方法名不一样
- 参数个数不一样：addEventListener三个参数，attachEvent两个参数
- addEventListener主流浏览器支持，IE8不支持；attachEvent 主流浏览器不支持，IE8支持
- this不同：addEventListener中的this是当前绑定事件的对象，attachEvent中的this是window对象
- addEventListener中事件的类型(事件的名字)没有on，attachEvent中的事件的类型(事件的名字)有on
7.为元素解绑事件
注意：用什么方式绑定事件，就要用对应的方式解绑事件
7.1 元素对象.removeEventListener("事件类型(没有on)",命名函数的名字,[false/true]);
removeEventListener() 方法用于移除由addEventListener()方法添加的事件句柄，Google、Firefox等主流浏览器支持，IE8不支持
注意： 如果要移除事件句柄，addEventListener() 的事件处理函数必须使用命名函数，而不能使用匿名函数。
7.2 元素对象.detachEvent("事件类型(有on)",命名函数的名字);
detachEvent() 方法用于移除由attachEvent()方法添加的事件句柄，Google、Firefox等主流浏览器不支持，IE8支持
注意： 如果要移除事件句柄，attachEvent()的事件处理函数必须使用命名函数，而不能使用匿名函数。——和7.1同理
7.3 元素对象.on事件名字=null;
"元素对象.on事件名字=null"用于移除由"元素对象.on事件名字=事件处理函数"添加的事件句柄
7.4 为元素解绑事件的兼容代码
元素绑定和元素解绑都使用了兼容代码的例子：（这段代码在主流浏览器和IE8都可运行）
//绑定
function addEventListener(element,type,fn) {
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
//解绑
function removeEventListener(element,type,fnName) {
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else{
element["on"+type]=null;
}
}
function f1() {
console.log("1");
}
function f2() {
console.log("2");
}
addEventListener(my$("btn"),"click",f1);
addEventListener(my$("btn"),"click",f2);
my$("btn2").onclick=function () {
removeEventListener(my$("btn"),"click",f2);
};8.事件阶段
事件冒泡：多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果内层的元素的事件触发了，则外层的元素的该事件自动触发。（从里向外）用以下例子说明：
事件有三个阶段：（一般默认都是冒泡阶段，很少用捕获阶段）
- 事件捕获阶段：从外向里
- 事件目标阶段：最开始选择的那个
- 事件冒泡阶段：从里向外
（e只是一个参数而已，可以是别的名字，比如event也是可以的，但命名还是有意义的好。为了更好了解该对象，在控制台输出这个参数对象，看看该对象有哪些属性，可以有所应用，如下图所示）
通过e.eventPhase属性可以知道当前的事件处于什么阶段
如果这个属性的值是：1——>捕获阶段；2——>目标阶段；3——>冒泡阶段 捕获阶段和冒泡阶段不会同时存在
如何阻止事件冒泡？
- window.event.cancelBubble=true;——Google、IE8支持；Firefox不支持
- e.stopPropagation();——Google、Firefox支持；IE8不支持
window.event和e都是事件参数对象，一个是IE的标准，一个是火狐的标准
事件参数e在IE8的浏览器中是不存在，此时用window.event来代替（换句话来说，如果一个浏览器支持e，就不会使用window.event）
事件冒泡换句话说就是：如果给元素设置相同的事件，出现子元素的事件向上传递的行为
它的好处是可以结合事件委派使用
事件委派：绑定一次事件，就能将此事件应用于多个元素上解决：找到需要绑定的多个元素的共同元素，并且把事件绑定到共同祖先元素上，也反映了事件的冒泡行为
(后代元素事件触发时，通过冒泡，通过祖先元素的响应函数来处理事件)
事件委派的好处：通过事件委派，可以减少事件绑定的次数，提高程序的性能
9.模拟百度搜索框
模拟百度搜索框