元素（element)和节点(node)
childNode属性和children属性的区别
Title
childNodes属性返回的是NodeList数组，是属于节点（也包括元素）的属性，而children属性返回的是子元素，是属于元素的属性
而在Nodelist数组里面也有元素存在，证明了元素也是节点的一种，即元素节点。
W3C中的解释是：
在 HTML DOM （文档对象模型）中，每个部分都是节点
文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点 （包括回车符，空格，空白字符也是属于文本节点）
注释是注释节点Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。
元素也可以拥有属性。属性是属性节点。
总结：元素是元素节点，是节点中的一种，但元素节点中可以包含很多的节点
nodeName（纯大写） 属性含有某个节点的名称
元素节点的nodeName 是标签名称
属性节点的nodeName 是属性名称
文本节点的nodeName 永远是 #text
文档节点的nodeName 永远是 #document
nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值
nodeValue 属性对于文档节点和元素节点是不可用的 nodeType 属性可返回节点的类型
Element 元素 1
Attribute 属性 2
Text 文本 3
CDATA Section CDATA断 4
Entity Reference 实体参数 5
Entity 实体 6
Processing Instrucion 处理指令 7
Comment 注释 8
Document 文档 9
Document Type 文档类型 10
Document Fragment 文档片断 11添加和删除节点（HTML 元素）
创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素
Title
这是一个段落
这是另一个段落
删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素
Title
这是一个段落。
这是另一个段落。
常用节点操作
1.节点查找
document.getElementById，document.getElementByTagName，document.getElementByName ，document.getElementByClassName
document.querySelector() 参数为选择器
document.forms 选取页面中的所有表单元素
2.增加节点
增加节点前必须先使用document.createElement()创建元素节点，参数为标签名
m.appendChild(n) 为m元素在末尾添加n节点
m.insertBefore(k,n) 在m元素的k节点前添加n节点
3.删除节点
m.removeChild(n)删除m元素中的n节点
m.replaceChild(k,n)用n节点取代m元素中的k节点
4.复制节点
m.cloneChild() 复制m节点，并将复制出来的节点作为返回值
参数为true时，则将m元素的后代元素也一并复制。否则，仅复制m元素本身
节点属性操作
节点(自身)属性:
attributes - 节点（元素）的 属性节点
nodeType – 节点类型
nodeValue – 节点值
nodeName – 节点名称
innerHTML - 节点（元素）的文本值
1.节点属性值选取
m.属性名 (：驼峰形式 ) m.className
m[“属性名”] m.['className']
m.getAttribute(“属性名”) ：加引号，html的形式 m.getAttribute("class")
2.节点属性修改
前两种选取方法时，直接赋值即可
m.setAttribute("属性名"，“值”)
3.创建属性节点并设置属性值
var info_node=document.createAttribute(\"info\");//创建
info_node.value='123'；//设置
sup1.setAttributeNode(info_node);//添加
4.复制节点
var body = document.querySelector('body');
true深拷贝,拷贝自身与内容, false浅拷贝,只拷贝自身标签
var cl_body = body.cloneNode(true);
console.log(cl_body);
JS DOM节点（当前标签和同级、父级、子级..之间的关系）
1. 通过顶层document节点获取
1) document.getElementById(elementId) //根据id获得
2) document.getElementsByName(elementName) //根据name获得
3) document.getElementsByTagName(tagName) //根据标签名获得
2、通过父节点获取
1) parentObj.firstChild //获得第一个子节点
2) parentObj.lastChild //获得第二个子节点
3) parentObj.childNodes //获取作为指定对象直接后代的HTML元素和TextNode对象的集合
4) parentObj.children //非标准dom集合，建议使用childNodes
5) parentObj.getElementsByTagName(tagName) //获得该标签下标签名为tagName的所有标签
3、通过临近节点获取
1) neighbourNode.previousSibling //获得同级前一个标签
2) neighbourNode.nextSibling //获得同级后一个标签
4、通过子节点获取
1) childNode.parentNode //获得父标签事件
onload：页面加载完毕事件，只附属于window对象
onclick：鼠标点击时间
onmouseover：鼠标悬浮事件
onmouseout：鼠标移开事件on事件绑定方式
document.onclick = function() {
console.log("文档点击");
}on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法
document.onclick = function() {
console.log("文档点击");
}事件的移除
document.onclick = null;非on事件绑定方式
document.addEventListener('click', function() {
console.log("点击1");
})
document.addEventListener('click', function() {
console.log("点击2");
})非on事件可以同时绑定多个方法，被绑定的方法依次被执行
addEventListener第三个参数(true|false)决定冒泡的方式
function fn () {}
document.addEventListener('click', fn);事件的移除
document.removeEventListener('click', fn，false);
事件的三种绑定方式的思考
方法一:嵌入dom
把onclick绑定在标签上
HTML元素行间事件（也可以叫HTMl事件处理程序）,直接在html标签里添加事件。
缺点：html和js代码紧密耦合
方法二:直接绑定
onclick的js绑定办法
//把一个函数赋值给一个事件处理程序属性。（这种方式也叫做Dom0级事件处理程序）
var btn1 = document.getElementById('btn1');
function abc() {
alert('abc');
}
btn1.onclick = abc; //当点击的时候执行abc这个函数，等价于 btn1.οnclick=function abc(){alert('abc');}
//btn1.onclick = null； //去掉绑定的事件
方法三:事件监听
click的js绑定办法(js的话推荐这种)
//通过“事件监听”的方式来绑定事件（也叫Dom2级事件处理程序）
var btn2 = document.getElementById('btn2');
btn2.addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数
function showMsg() {
alert("事件监听");
}
//btn2.removeEventListener('click', showMsg, false); //去除绑定
方法一
最原始的写法：和html混合在一起写，缺点是代码高冗余，且无法添加多个事件处理函数如上文对事件的举例则为典型的**html事件处理程序*写法
方法二
dom0级：将html代码和js代码分离，且支持匿名函数，可以看到完美的改进了1的冗余缺憾，所有的事件相关操作都在js中完成
方法三
dom2级：ie使用attachEventListener其他非ie使用addEventListener，可以支持绑定多个事件，瞧吧，又一个缺憾被完美解决了~，而且dom2级还可以自定义事件流，下一篇会分析事件流模型
dom3级：对事件进行了更广而全的分类，请自行查阅实例运用一