共计 4360 个字符，预计需要花费 11 分钟才能阅读完成。
DOM 由节点组成
在 HTML DOM（文档对象模型）中，每个部分都是节点：文档本身是文档节点所有 HTML 元素是元素节点所有 HTML 属性是属性节点 HTML 元素内的文本是文本节点注释是注释节点
1．重要节点类型：标签 (元素) 节点，属性节点，文本节点。
2．重要节点属性：（1）nodeType 节点类型（数字表示，标签 1，属性 2，文本 3）（2）nodeName 节点名字（3）nodeValue 节点值 3. 不同类型节点的属性取值
标签节点 属性节点 文本节点
nodeType 节点类型 1 2 3
nodeName 节点名字 对应的标签名 对应的属性名 #text
nodeValue 节点值 null 对应的属性值 对应的文本内容
标签节点：nodeType：1;nodeName：对应的标签名;nodeValue:null
属性节点:nodeType：2;nodeName：对应的属性名;nodeValue: 对应的属性值
文本节点:nodeType：3;nodeName：#text;nodeValue: 元素节点或属性节点中的文本内容
文档节点:nodeType：9;nodeName：表示整个文档（DOM 树的根节点）nodeValue:document
获取节点
获得当前元素的父节点 : .parentNode
获得当前元素的子节点 :.childNodes（标准属性）获取标签节点和文本节点.children 不是 DOM 的标签属性，但是所有的浏览器都支持，只会获得标签子节点
获取相邻节点的属性:
[next（previous）Sibling]、[next（previous）ElementSibling]
.nextSibling : 返回指定节点之后紧跟的节点（同级）。被返回的节点以 Node 对象返回, 元素中的空格被视作文本，而文本被视作文本节点 IE8 及之前的浏览器会忽略空白文本节点
function getPrevNode (dom){
var preNode=dom.previousSibling;
var txt=preNode.nodeValue.trim(); //’ ‘
if(preNode.nodeType==3 && txt.length==0){
return preNode.previousSibling
}else{
return preNode
}
}
.nextElementSibling: IE8 及之前的浏览器不支持这个属性，只会获得标签节点
// 解决兼容性的问题
function getNextElement(element){
if(element.nextElementSibling){
return element.nextElementSibling;
}else{
var ele = element.nextSibling;
console.log(ele)
while(ele && ele.nodeType !==1){
ele= ele.nextSibling;
}
return ele;
}
}
父元素的 first 与 last 子节点：[first（last）Child]、[first（last）ElementChild]
.firstChild: 所有的浏览器都支持的，获取标签节点、文本节点，但是 IE8 及之前的低版本的浏览器，是可以忽略空白文本节点的而获得的是标签节点
.firstElementChild:IE8 及之前的低版本的浏览器不支持，直接获取父元素的第一个标签节点
function getFirstElementChild(element){
if(element.firstElementChild){
return element.firstElementChild;
}else{
var ele = element.firstChild;
while(ele && ele.nodeType !==1){
ele = ele.nextSibling;
}
return ele;
}
}
function getLastElementChild(element){
if(element.lastElementChild){
return element.lastElementChild;
}else{
var ele = element.lastChild;
while(ele&&ele.nodeType!==1){
ele= ele.previousSibling;
}
return ele;
}
}
总结
. childNodes ;（标准属性）、next（previous）Sibling、first（last）Child[不但可以获得标签节点，还会获取文本节点，但 ie8 及之前浏览器会忽略空本文本节点]
.children；[所有浏览器都支持，只会获得当前元素的标签子元素]next（previous）ElementSibling、first（last）ElementChild[IE8 及之前的低版本浏览器不支持，只获取标签节点]
节点操作
动态创建节点元素
document.createElement(“ 标签名 ”);// 创建元素节点；document.createTextNode(“txt”);// 创建文本节点；
1．父级元素. appendChild(节点元素)– 把节点插入到父节点的末尾
2．父级元素.insertBefore(新节点, 插入位置)– 把新节点插入到位置的前面
父级元素.removeChild(节点元素); // 删除节点元素
父级元素.replaceChild(节点 1, 节点 2); // 用节点 1 替换节点 2
克隆节点：
cloneNode（boolean 值）1. 该方法将复制并返回调用它的节点的副本。2. 如果传递的参数是 true，将递归复制当前节点的所有子孙节点。False 的话只复制当前节点。
如果参数为 False 的话，仅仅克隆的是一个标签(不传参，默认值为 false) 如果参数为 true 的话，标签之间的内容也会克隆，也叫做深度克隆
3. 返回的节点不属于文档树，它的 parentNode 属性为 null。4. 当复制的是 Element 节点时，它的所有属性都将被复制。但是，当前节点上注册的事件不会被复制
节点属性
基本用法
1. 对象. 的方式设置、获取属性[元素是 DOM 对象]
例如：txt.value=”123”;{不能设置、获取自定义属性}
2.setAttribute(属性名，属性值)：设置属性，也可设置自定义属性，推荐使用注意：设置已经存在的属性时，会将原来的属性值覆盖 3.getAttribute() 可获得行内的原生属性，也可获得自定义属性
4.removeAttribute(要移除的属性名) 彻底删除
给元素节点设置样式
给元素设置样式的两种形式（通过对象. 的方式）：
1. 设置类名 className：元素的一个属性，设置类名；[加入要为某个元素添加多个样式时，可以将样式都放在一个 css 的类样式中，然后通过元素的属性 className 获取该类名。]
dom.setAttribute(‘class’,’xxx’);
IE6/ 7 不支持 setAttribute(‘class’,xxx)方式设置元素的 class。
dom.setAttribute(‘className’, ‘xxx’)
IE8/9/10/Firefox/Safari/Chrome/Opera 不支持 setAttribute(‘className’,xxx)方式设置元素的 class
dom.className = ‘xxx’;
所有浏览器都支持
dom.className = dom.className.replace(“hide”,”show”);// 字符串的替换，仅仅是替换了要替换的字符，不改变其它的
2．Style：元素的一个属性，通过其设置一个样式。例如：
dom.style.backgroundColor=’red’; // 将样式的中横线写法换成驼峰的写法
dom.style.background=’red’;
dom.style.color=’red’;
设置、清除类的方式
1．设置类名：dom.className=’ 类名 ’;
2．清除类名：dom.className=”;
3．彻底清除类的属性：dom.removeAttribute(‘class’)
设置、获取标签中的文本内容
获取内容区别：1．innerText 只打印标签之间的文本内容，不打印标签 2．innerHTML, 不但打印文本内容，连标签间的标签也打印出来。高版本浏览器会将格式原样输出
设置内容区别：1.innerText 设置内容时，无法设置标签，会将标签进行转义。2.innerHtml 设置内容时，能将里面的标签渲染成正常的 html 标签。
小结：（1）innerHTML 所有的浏览器都支持，不但获取文本，还获取标签间的标签。（2）innerText 是老版本的火狐浏览器不支持，只支持用 textContent；（3）textContent 是 Ie8 之前的浏览器不支持，只支持 innerText；
动态创建元素
凡是通过 js 来设置页面的标签都可以称为动态的创建页面元素。1.document.write() 几乎是很少用的 2.InnerHTML：直接在里面写 html 代码生成标签 3.document.creatElement(标签名)：创建一对标签
获取样式
obj.style：只能获取 html 标签中的 style 属性中的值（style=”…”）
获取定义在 <style type=”text/css”> 里面属性方法：.currentStyle（IE 外部 css 文件）.getComputedStyle（FF, 只读，不能设置）
var btn=document.getElementById(“button”)
btn.onclick = function() {
var oStyle = btn.currentStyle? btn.currentStyle : getComputedStyle(btn, null);
/*alert(oStyle.height);*/
alert(oStyle[‘height’]);
};
JS 事件
注册事件 1. 行内式注册事件（在标签内）2. 内嵌式注册事件
事件：1.onfocus2.onblur3.onchange4.onmouseover5.onload6.onkeyup
btn.onclick = function(e){
// 通过事件对象可以获得一些与事件相关的一些信息
// 事件对象里面存储了一些与事件相关的属性或是方法
// e.clientX pageX screenX
// IE8 之前是不支持 event window.event IE8 也有事件对象，只不过是存在 window 属性里面，必须通过 Window.event 才能拿到
e = e || window.event;
console.log(e)
}
