JS DOM(2017.12.28)
一.获得元素节点的方法
document.getElementById() 根据Id获取元素节点
document.getElementsByName() 根据name获取元素节点 遍历出来的是一个数字
document.getElementsByTagName() 根据HTML标签名获取元素节点，注意选择器返回的是一个NodeList对象，能根据索引号选择其中1个，可以遍历输出。
document.getElementsByClassName() 根据class获取元素节点
二、节点关系
(1)作为节点数的文档
1、parentNode 获取该节点的父节点
2、childNodes 获取该节点的子节点数组
3、firstChild 获取该节点的第一个子节点
4、lastChild 获取该节点的最后一个子节点
5、nextSibling 获取该节点的下一个兄弟元素
6、previoursSibling 获取该节点的上一个兄弟元素
7、nodeType 节点的类型，9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点
8、nodeVlue Text节点或Comment节点的文本内容
9、nodeName 元素的标签名(如P,SPAN,#text(文本节点),DIV)，以大写形式表示
(2)作为元素树的文档
1、firstElementChild 第一个子元素节点
2、lastElementChild 最后一个子元素节点
3、nextElementSibling 下一个兄弟元素节点
4、previousElementSibling 前一个兄弟元素节点
5、childElementCount 子元素节点个数量
注意，此5个方法文本节点不算进去
三、节点操作：创建，插入，删除节点
1、document.createTextNode() 创建一个文本节点
2、document.createElement() 创建一个元素节点，这个方法只接受一个参数，即要创建元素的标签名。这个标签名在HTML文档中不区分大小写，在XHTML中区分大小写。
3、插入节点
appendChild() //将一个节点插入到调用节点的最后面
insertBefore() //接受两个参数，第一个为待插入的节点，第二个指明在哪个节点前面，如果不传入第二个参数，则跟appendChild一样，放在最后。
insertAfter() //可以自己创建一个在指定节点后面插入节点的函数，代码如下：
1 function insertAfter(newElement,targetElement){ 2 var parent = targetElement.parentNode; 3 if(parentNode.lastChild == targetElement){ 4 parent.appendChild(newElement); 5 } 6 else{parent.insertBefore(newElement,targetElement.nextSibling) 7 } 8 }
4、删除和替换节点。
1、removeChild(); 由父元素调用，删除一个子节点。注意是直接父元素调用，删除直接子元素才有效，删除孙子元素就没有效果了。该方法移除节点，接受一个参数，即要移除的节点，同时该方法返回被移除的节点。只能是一个节点，不能是一组节点。
2、replaceChild() //删除一个子节点，并用一个新节点代替它，第一个参数为新建的节点，第二个节点为被替换的节点
5、document.write()可以方便快捷的把字符串插入到文档中。
四、属性操作
1.
setAttribute()
添加一个新属性（attribute）到元素上，或改变元素上已经存在的属性的值。注意：在IE7下，修改了元素的class，如果已有class，则会出现两个class，通过setAttribute()添加的不生效；如果没有class，则添加上class，但这个添加上去的class的样式不会生效。
2.
removeAttribute()
该方法用于移除元素的属性。
3.
getAttribute()
该方法返回元素上指定属性（attribute）的值。如果指定的属性不存在，则返回 null 或 "" （空字符串）（IE5+都返回null）。注意：IE7下不能正确返回class，返回的是null，其他正常。
4.
hasAttribute()
hasAttribute() 返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。注意：IE7不支持该方法。
5.
自定义属性
data-*
html5里有一个data-*去设置获取元素的自定义属性值。
<div id="div1" data-aa="11">利用div1.dataset可以获得一个DOMStringMap，包含了元素的所有data-*。
使用div1.dataset.aa就可以获取11的值。
同样，通过设置div1.dataset.bb = "22"就可以设置一个自定义属性值。
在不兼容的浏览器里，就使用getAttribute和setAttribute
五、事件
四、共享onload事件
function addLoadevent(func) {
var oldonload = window.onload;
if(typeof window.onload !=' function'){
window.onload = func;
}else{
window.onload = function(){
func;
oldonload;
}
}
}
addEventListener()
addEventListener()将指定的事件监听器注册到目标对象上，当目标对象触发制定的事件时，指定的回调函数就会触发。目标对象可以是 文档上的元素、 document、 window 或者XMLHttpRequest(比如onreadystatechange事件)。
IE8及以下不支持此方法且只有事件冒泡没有事件捕获。IE9开始支持此方法，也就有了事件捕获。
var div1 = document.getElementById("div1");
div1.addEventListener("click", listener, false);
function listener() {
console.log('test');
}
var cloneHtml = div1.cloneNode(true);
document.body.appendChild(cloneHtml);第一个参数是事件名，第二个是回调函数，第三个参数为true表示捕获，false表示冒泡。
var div1 = document.getElementById("div1");
div1.addEventListener("click", listener1, true/fasle);
function listener1() {
console.log('test1');
}
var div2 = document.getElementById("div2");
div2.addEventListener("click", listener2, true/fasle);
function listener2() {
console.log('test2');
}有一点要注意的是，当对某一个元素1既绑定了捕获事件，又绑定了冒泡事件时：
当这个元素1并不是触发事件的那个元素2时，则触发顺序会按照先 捕获 后 冒泡 的顺序触发；
当这个元素1就是最底层的触发事件的元素时，则这个元素没有捕获和冒泡的区别，谁先绑定就先触发谁。
var div2 = document.getElementById("div2");
div2.addEventListener("click", listener2, true);
function listener2() {
console.log('test2');
}
div2.addEventListener("click", listener1, false);
function listener1() {
console.log('test1');
}
// 按绑定顺序执行，两个`addEventLister()`颠倒过来则执行顺序也变化
// 如果再对`div1`绑定一个捕获、一个冒泡，则会先触发捕获 再 触发冒泡，与绑定顺序无关
removeEventListener()
与addEventListener()绑定事件对应的就是移除已绑定的事件。第三个参数的布尔值代表解绑的是捕获事件还是冒泡事件。两个事件互不相关。
var div2 = document.getElementById("div2");
div2.addEventListener("click", listener2, true);
function listener2() {
console.log('test2');
}
div2.removeEventListener("click", listener2, true);注意：只能通过removeEventListener()解绑有名字的函数，对于绑定的匿名函数无法解除绑定。
div2.addEventListener("click", function(){
console.log('test');
console.log(this);
}, true);
div2.removeEventListener("click", function() {
console.log("test");
}, true);
div2.onclick = null;
// 点击div2依然打印出test注意：这里this指向触发事件的元素自身。
attachEvent()、detachEvent()
IE8及以下使用这两个方法绑定和解绑事件，当然，IE9+也支持这个事件。但这个方法绑定的事件默认为冒泡也只有冒泡。
// 这里需要在事件前加 on
div2.attachEvent("onclick", listener1);
function listener1() {
console.log('test');
console.log(this);
}
div2.detachEvent("onclick", listener1);和addEventListener()一样，也不能解绑匿名函数。
注意：这里this指向 window。
阻止默认事件和冒泡
标准事件和IE事件中的阻止默认事件和冒泡事件也有很大区别。
var div2 = document.getElementById("div2");
if (div2.addEventListener) {
div2.addEventListener("click", function(e) {
e.preventDefault(); // 阻止默认事件
e.stopPropagation(); // 阻止冒泡
console.log(e.target.innerHTML);
}, false);
} else {
div2.attachEvent("onclick", function() {
var e = window.event;
e.returnValue = false; // 阻止默认事件
e.cancelBubble = true; // 阻止冒泡
console.log(e.srcElement.innerHTML);
});
}IE8及以下的event是绑定在window上的。（我的IE11里，仿真到IE7、IE8也可以取到标准事件里的 e 对象，估计是升级到IE11的原因）。
自定义事件：
createEvent()
createEvent()用于创建一个新的 event ，而后这个 event 必须调用它的 init() 方法进行初始化。最后就可以在目标元素上使用dispatchEvent()调用新创建的event事件了。
createEvent()的参数一般有：UIEvents、MouseEvents、MutationEvents、HTMLEvents、Event(s)等等，分别有对应的init()方法。HTMLEvents、Event(s)对应的都是initEvent()方法。
initEvent(type, bubbles, cancelable)
type表示自定义的事件类型，bubbles表示是否冒泡，cancelable表示是否阻止默认事件。
target.dispatchEvent(ev)
target就是要触发自定义事件的DOM元素
var div1 = document.getElementById("div1");
div1.addEventListener("message", function(){
console.log('test');
}, false);
var div2 = document.getElementById("div2");
div2.addEventListener("message", function(e){
console.log(this);
console.log(e);
}, false);
var ev = document.createEvent("Event");
ev.initEvent("message", false, true); // 起泡参数变为true，div1的事件就会触发
div2.dispatchEvent(ev);六.获取元素相关计算后的值
getComputedStyle()、currentStyle()
当我们想获取元素计算后实际呈现在页面上的各个值，就用这两个方法。IE8及以下用currentStyle(),IE9+及其他标准浏览器用getComputedStyle()。
var div2 = document.getElementById("div2");
var result = "";
if (window.getComputedStyle) {
result = (window || document.defaultView).getComputedStyle(div2, null)['cssFloat'];
} else {
result = div2.currentStyle["styleFloat"];
}
console.log(result);
// document.defaultView返回document对象所关联的window这两个方法在不同的浏览器里差距也很大。
比如float属性：getComputedStyle： IE9以上需要用cssFloat，其他标准的用floatcurrentStyle： IE8及以下可用styleFloat或者float。
比如height属性：
假如未设置height值，标准浏览器里能计算出高度值，而currentStyle计算出来是auto。
上面的例子getComputedStyle是用键值去访问的，也可用getPropertyValue()去访问。（IE8、IE7不支持）
result = (window || document.defaultView).getComputedStyle(div2, null).getPropertyValue("float");
getBoundingClientRect()、getClientRects()
getBoundingClientRect()该方法获得页面中某个元素的上、右、下、左分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离（到浏览器顶部而不是文档顶部）。该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。
getClientRects()是返回一个ClientRectList集合。
var div1 = document.getElementById("div1");
var rects1 = div1.getClientRects();
var rects2 = div1.getBoundingClientRect();
console.log(rects1[0].top);
console.log(rects2.top);
