JavaScript DOM節點簡介

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(新節點,插入位置)--把新節點插入到位置的前面

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)
    }