DOM由节点构成

在 HTML DOM （文档对象模子）中，每一个部份都是节点：
文档自身是文档节点
一切 HTML 元素是元素节点
一切 HTML 属性是属性节点
HTML 元素内的文本是文本节点
解释是解释节点

1．主要节点范例：标签(元素)节点，属性节点，文本节点。

2．主要节点属性：
（1）nodeType 节点范例（数字示意，标签1，属性2，文本3）
（2）nodeName 节点名字
（3）nodeValue 节点值
3.差别范例节点的属性取值

• 标签节点：
  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(新节点,插进去位置)–把新节点插进去到位置的前面

1. 父级元素.removeChild(节点元素); //删除节点元素
2. 父级元素.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. 设置、消灭类的体式格局

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.onfocus
2.onblur
3.onchange
4.onmouseover
5.onload
6.onkeyup

btn.onclick = function(e){
// 经由过程事宜对象能够取得一些与事宜相干的一些信息
// 事宜对象内里存储了一些与事宜相干的属性或是要领
// e.clientX   pageX   screenX
// IE8之前是不支撑event   window.event  IE8也有事宜对象，只不过是存在window属性内里，必需经由过程Window.event才拿到

        e  = e || window.event;

        console.log(e)
    }