JS中的DOM操作和事件
【DOM树节点】
DOM节点分为三大类： 元素节点、 属性节点、 文本节点；
文本节点、属性节点属于元素节点的子节点。操作时，均需要先取到元素节点，再操作子节点；
可以使用getElement系列方法，取到元素节点。
【查看元素节点】
1、getElementById：通过id取到唯一节点。如果ID重名，只能取到第一个。
getElementsByName()： 通过name属性
getElementsByTagName()： 通过标签名
getElementsByClassName()： 通过class名
>>> 获取元素节点时，一定要注意：获取节点的语句，必须在DOM渲染完成之后执行。 可以有两种方式实现： ① 将JS代码写在body之后； ② 将代码写到window.onload函数之中；
>>> 后面三个getElements，取到的是数组格式。不能直接添加各种属性，而应该取出数组的每一个单独操作。 例如：getElementsByName("name1")[0].onclick = function
【查看/设置属性节点】
1、查看属性节点：getAttribute("属性名");
2、设置属性节点：setAttribute("属性名","新属性值");
>>> 查看和设置属性节点，必须先取到元素节点，才能使用。
>>> setAttribute();函数在IE浏览器中可能会存在兼容性问题。比如在IE中不支持使用这个函数设置style/onclick等样式属性和事件属性。
>>> 我们推荐使用点符号法替代上述函数：
eg: dom1.style.color="" dom1.onclick="" dom1.src=""
【总结-JS修改DOM节点的样式】
1、 使用setAttribute()设置class和style属性，但是存在兼容性问题，不提倡
div.setAttribute("class","cls1");
2、 使用.className直接设置class类,注意是className而不是.class：
div.className = "cls1";
3、 使用.style设置单个属性，注意属性名要是用驼峰命名法：
div.style.backgroundColor = "red";
4、 使用.style 或 .style.cssText 设置多个样式属性：
div.style = "background-color:red; color:yellow;"
div.style.cssText = "background-color:red; color:yellow;" √
【查看设置文本节点】
1、 .innerText: 取到或设置节点里面文字内容；
.innerHTML: 取到或设置节点里面的HTML代码；
.tagName: 取到当前节点的标签名。 标签名全部大写显示。
【根据层次获取节点】
1 .childNodes： 获取元素的所有子节点。包括回车等文本节点。
.children: 获取当前元素的所有元素节点(只获取标签)。
2 .firstChild: 获取元素的第一个子节点。包括回车等文本节点。
.firstElementChild: 获取元素的第一个子节点。不包括回车等文本节点。
.lastChild: 获取元素的最后一个子节点。包括回车等文本节点。
.lastElementChild:
3 .parentNode: 获取当前节点的父节点。
4 .previousSibling: 获取当前节点的前一个兄弟节点；包括回车等文本节点。
.previousElementSibling:
5 .nextSibling: 获取当前节点的后一个兄弟节点；包括回车等文本节点。
.nextElementSibling:
6 .getAttributes: 获取当前节点的属性节点。
【创建并新增节点】
1. document.createElement("标签名")：创建节点 。需要配合 setAttribute设置各种新的属性；
2. 父节点.appendChild(新节点)：末尾追加方式插入节点
3. 父节点.insertBefore(新节点,目标节点)：在目标节点前插入新节点.
4. 被克隆节点.cloneNode(true/false)：克隆节点
>>> 传入true： 表示克隆当前节点，以及当前节点的所有子节点；
>>> 传入false或不传： 表示只克隆当前节点，而不克隆子节点。
【删除或替换节点】
1. 父节点.removeChild(被删节点): 删除父节点中的子节点；
2. 父节点.replaceChild(新节点,老节点): 使用新节点，替换掉老节点。\n
3. 节点.removeAttribute("属性")：删除属性。
[表格对象]
1、 rows属性： 返回表格中的所有行，是一个数组格式；
2、 insertRow(index): 在指定位置插入一行，index从0开始；
3、 deleteRow(index): 删除指定的一行，index从0开始；
[行对象]
1、 cells属性： 返回这一行中的所有单元格，是一个数组格式；
2、 rowIndex属性： 返回这一行是表格中的第几行，从0开始；
3、 insertCell(index): 在这一行指定位置，插入一个单元格，index从0开始；
4、 deleteCell(index): 删除这一行的指定单元格，index从0开始
[单元格对象]
1、 cellIndex属性： 返回这个单元格是本行的第几个，从0开始；
2、 innerText innerHTML align className
【JS中的事件分类】
1、鼠标事件
click/dblclick/onmouseover/onmouseout
2、HTML事件
onload/onscroll/onsubmit/onchange/onfocus
3、键盘事件
keydown： 键盘按下时触发
keypress：键盘按下并松开的瞬间触发
keyup： 键盘抬起时触发
[注意事项]
① 执行顺序：keydown->keypress->keyup->
② 当长按时，会循环执行keydown->keypress
③ 有keydown并不一定有keyup，当事件触发过程中，鼠标将光标
移走将导致没有keyup；
④ keypress只能捕获键盘上的数字、字符、符号键，不能捕获各种
功能键，而keydown和keyup可以。
⑤ keypress支持区分大小写，keydown和keyup并不支持。
[确定触发的按键]
① 在触发的函数中，传入一个参数e，表示键盘事件；
② 使用e.keyCode，取到按键的Ascii码值，进而确定触发按键；
③ 所有浏览器的兼容写法(一般并不需要)：
var evn = e || event；
var code = evn.keyCode || evn.which || evn.charCode;
【JS中的DOM0事件模型】
1、内联模型(行内绑定)：直接将函数名作为HTML标签的某个事件属性的属性值；
eg：<button onclick="func()">DOM0内联模型</button>
缺点：违反了W3C关于HTML与JavaScript分离的基本原则；
2、脚本模型(动态绑定)：在JS脚本中，取到某个节点，并添加事件属性；
eg：window.onload = function(){}
优点：实现了HTML与JavaScript的分离。
缺点：同一个节点，只能绑定一个同类型事件。如果绑定多次，最后一个生效。
【DOM2事件模型】
1、添加事件绑定方式：
① IE8之前：btn2[2].attachEvent("onclick",函数)；
② 其他浏览器：btn2[2].addEventListener("click",函数，true/false)；
参数三：false(默认) 表示事件冒泡 true 表示事件捕获
③ 兼容写法：if(btn2.attachEvent){
btn2[2].attachEvent();
}else{
btn2.addEventListener()；
}
2、优点：① 可以给同一节点，添加多个同类型事件；
② 提供了可以取消事件绑定的函数；
3、取消DOM2事件绑定：
注意：如果要取消DOM2的事件绑定，那么在绑定事件时，处理函数必须要使用有名函数，而不能使用匿名函数。
btn[2].removeEventListener("click",func2);
btn[2].detachEvent("onclick",func2);
【JS中的事件流】
1、事件冒泡：当某DOM元素触发一种事件时，会从当前节点开始，逐级
往上触发其祖先节点的同类型事件，直到DOM根节点；
>>> 什么情况下会产生事件冒泡？
① DOM0模型绑定事件，全部都是冒泡；
② IE8之前，使用attachEvent()绑定的事件，全部都是冒泡；
③ 其他浏览器，使用addEventListener()添加事件，当第三个参数
省略或者为false时为事件冒泡；
2、事件捕获：当某DOM元素触发一种事件时，会从文档根节点开始，逐级向下
触发其祖先节点的同类型事件，直到该节点自身；
>>> 什么情况下会触发事件捕获？
使用addEventListener()添加事件，当第三个参数省略或者为true时为事件捕获；
3、阻止事件冒泡：
在IE浏览器中，使用e.cancelBubble = true;
在其他浏览器中，使用e.stopPropagation();
兼容所有浏览器的写法：
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE以外
} else {
e.cancelBubble = true; //IE8之前
}
}
4、取消事件默认行为
在IE浏览器中，使用 e.returnValue = false;
在其他浏览器中，使用 e.preventDefault();
兼容所有浏览器的写法：
function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
}
