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