第一百一十三節，JavaScript文檔對象，DOM基礎

時間 2019-11-12

標籤第一百一十三 javascript 文檔對象 dom 基礎欄目 JavaScript 简体版

原文原文鏈接

JavaScript文檔對象，DOM基礎html

學習要點：node

1.DOM介紹數組

2.查找元素瀏覽器

3.DOM節點app

4.節點操做函數

DOM（Document Object Model）即文檔對象模型，針對HTML和XML文檔的API（應用程序接口）。DOM描繪了一個層次化的節點樹，運行開發人員添加、移除和修改頁面的某一部分。DOM脫胎於Netscape及微軟公司創始的DHTML（動態HTML），但如今它已經成爲表現和操做頁面標記的真正跨平臺、語言中立的方式。學習

一．DOM介紹測試

DOM中的三個字母，D（文檔）能夠理解爲整個Web加載的網頁文檔；O（對象）能夠理解爲相似window對象之類的東西，能夠調用屬性和方法，這裏咱們說的是document對象；M（模型）能夠理解爲網頁文檔的樹型結構。spa

DOM有三個等級，分別是DOM一、DOM二、DOM3，而且DOM1在1998年10月成爲W3C標準。DOM1所支持的瀏覽器包括IE6+、Firefox、Safari、Chrome和Opera1.7+。3d

PS：IE中的全部DOM對象都是以COM對象的形式實現的，這意味着IE中的DOM可能會和其餘瀏覽器有必定的差別。

1.節點

加載HTML頁面時，Web瀏覽器生成一個樹型結構，用來表示頁面內部結構。DOM將這種樹型結構理解爲由節點組成。

從上圖的樹型結構，咱們理解幾個概念，html標籤沒有父輩，沒有兄弟，因此html標籤爲根標籤。head標籤是html子標籤，meta和title標籤之間是兄弟關係。若是把每一個標籤看成一個節點的話，那麼這些節點組合成了一棵節點樹。

PS：後面咱們常常把標籤稱做爲元素，是一個意思。

2.節點種類：元素節點、文本節點、屬性節點。

元素節點，其實就是標籤

屬性節點，就是這個標籤的屬性

文本節點，就是標籤包含的文本

<div title="屬性節點">測試Div</div>

二．查找元素，元素節點（查找節點）

W3C提供了比較方便簡單的定位節點的方法和屬性，以便咱們快速的對節點進行操做。分別爲：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

元素節點方法

方法	說明
getElementById()	獲取特定ID元素的節點
getElementsByTagName()	獲取相同元素的節點列表
getElementsByName()	獲取相同名稱的節點列表
getAttribute()	獲取特定元素節點屬性的值
setAttribute()	設置特定元素節點屬性的值
removeAttribute()	移除特定元素節點屬性

注意：DOM文檔對象，是操做html文檔樹的，因此要先執行完html後在執行js纔能有效，有兩種解決方案

1.將引入js的<script>放到HTML最後面

2.使用window.onload事件，就是等待html執行完了在執行js代碼

1.getElementById()方法，經過id獲取對應的標籤

getElementById()方法，接受一個參數：獲取元素的ID值。若是找到相應的元素則返回該元素的HTMLDivElement對象，若是不存在，則返回null。

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var asd = document.getElementById('box');            //獲取id爲box的元素節點
    alert(asd); //返回獲取到的元素節點對象
};

PS：id表示一個元素節點的惟一性，不能同時給兩個或以上的元素節點建立同一個命名的id。某些低版本的瀏覽器會沒法識別getElementById()方法，好比IE5.0-，這時須要作一些判斷，能夠結合上章的瀏覽器檢測來操做。

檢測瀏覽器是否支持getElementById()方法

if (document.getElementById) {                //判斷是否支持getElementById
alert('當前瀏覽器支持getElementById');
}

元素節點屬性

屬性	說明
tagName	獲取元素節點的標籤名
innerHTML	獲取元素節點裏的內容，非W3C DOM規範

tagName屬性，元素節點對象屬性，獲取或設置元素節點的標籤名

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var asd = document.getElementById('box').tagName;    //getElementById元素節點對象屬性，獲取元素節點的標籤名
    alert(asd); //返回獲取元素節點的標籤名
    //返回：DIV
};

innerHTML屬性，元素節點對象屬性，獲取或設置元素節點裏的內容，非W3C DOM規範

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var asd = document.getElementById('box').innerHTML;    //getElementById元素節點對象屬性，獲取元素節點裏的內容，非W3C DOM規範
    alert(asd); //獲取元素節點裏的內容，非W3C DOM規範
    //測試Div
};

HTML屬性的屬性

屬性	說明
id	元素節點的id名稱
title	元素節點的title屬性值
style	CSS內聯樣式屬性值
className	CSS元素的類

id，HTML屬性的屬性，獲取或設置元素節點的id名稱

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var asd = document.getElementById('box').id;    //獲取標籤的id名稱
    alert(asd); //元素節點的id名稱
    //box
    var asd2 = document.getElementById('box').id = 'person';    //設置標籤的id名稱
    alert(asd2); //元素節點的id名稱
};

title，HTML屬性的屬性，獲取或設置元素節點的title屬性值

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var asd = document.getElementById('box').title;    //獲取元素節點的title屬性值
    alert(asd); //元素節點的title屬性值
    //標題
    var asd2 = document.getElementById('box').title = '修改標題';    //設置元素節點的title屬性值
    alert(asd2); //元素節點的title屬性值
    //修改標題
};

style，HTML屬性的屬性，獲取或設置CSS內聯樣式屬性值

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var asd = document.getElementById('box').style;    //獲取CSSStyleDeclaration對象
    alert(asd); //獲取CSSStyleDeclaration對象
    //[object CSS2Properties]
    var asd2 = document.getElementById('box').style.color;    //獲取style對象中color的值
    alert(asd2); //獲取style對象中color的值
    //rgb(245, 42, 45)
    var asd3 = document.getElementById('box').style.color = 'red';    //設置style對象中color的值
    alert(asd3);//獲取style對象中color的值
};

className，HTML屬性的屬性，獲取或設置CSS元素的類class屬性值

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var asd = document.getElementById('box').className;    //獲取CSS元素的類class屬性值
    alert(asd); //獲取CSS元素的類class屬性值
    //vdy
    var asd2 = document.getElementById('box').className = 'jhh'; //設置CSS元素的類class屬性值
    alert(asd2); //獲取CSS元素的類class屬性值
    //jhh
};

獲取自定義標籤屬性的值，非IE不支持【不推薦】

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document.getElementById('box').bbb);        //獲取自定義屬性的值，非IE不支持
};

2.getElementsByTagName()方法，經過標籤名稱獲取對應的標籤

getElementsByTagName()方法將返回一個對象數組HTMLCollection(NodeList)，這個數組保存着全部相同元素名的節點列表。有參參數是要獲取的標籤名稱，參數*表示獲取全部標籤

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementsByTagName('*');            //獲取全部元素
    alert(sdf);  //打印獲取到的標籤對象數組
    //[object HTMLCollection]
};

length，判斷獲取到的標籤對象數組長度，就是有多少個標籤

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementsByTagName('li').length;            //獲取頁面裏的全部li標籤，length判斷長度
    alert(sdf);  //打印獲取到的標籤對象數組的長度
    //4，說明獲取到4個標籤
};

利用數組索引下標，獲取標籤數組對象裏指定的標籤

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementsByTagName('li')[0];    //利用數組索引下標，獲取標籤數組對象裏指定的標籤
    alert(sdf.tagName);  //打印獲取到的全部li標籤裏的第一個標籤名稱
};

item()，獲取標籤數組對象裏指定的下標的標籤,參數下標數

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementsByTagName('li').item(0);    //item()，獲取標籤數組對象裏指定的下標的標籤,參數下標數
    alert(sdf.tagName);  //打印獲取到的全部li標籤裏的第一個標籤名稱
};

注意：getElementsByTagName()方法的其餘屬性與getElementById()方法相同

PS：不論是getElementById仍是getElementsByTagName，在傳遞參數的時候，並非全部瀏覽器都必須區分大小寫，爲了防止沒必要要的錯誤和麻煩，咱們必須堅持養成區分大小寫的習慣。

3.getElementsByName()方法，經過標籤的name屬性值獲取節點，通常用於獲取表單

getElementsByName()方法能夠獲取相同名稱(name)的元素，返回一個對象數組HTMLCollection(NodeList)。參數name屬性的值

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementsByName('bd');    //經過標籤的name屬性值獲取節點
    alert(sdf);  //打印獲取到的name值爲bd標籤返回數組
    //[object NodeList]
};

獲取指定標籤裏的屬性值

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementsByName('bd')[0];    //經過標籤的name屬性值獲取節點,經過索引獲取第一個標籤
    alert(sdf.value);  //打印獲取到的標籤的value值
    //默認
};

注意：getElementsByName()方法的其餘屬性與getElementById()方法相同

PS：對於並非HTML合法的屬性，那麼在JS獲取的兼容性上也會存在差別，IE瀏覽器支持自己合法的name屬性，而不合法的就會出現不兼容的問題。

4.getAttribute()方法，獲取元素中某個屬性的值，首先要獲取到節點後，在用getAttribute()方法【不推薦】

getAttribute()方法將獲取元素中某個屬性的值。它和直接使用.屬性獲取屬性值的方法有必定區別。參數要獲取的屬性名稱

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').getAttribute('style');    //先經過ID獲取到標籤節點，而後經過getAttribute()方法獲取屬性
    alert(sdf);  //打印獲取到的標籤屬性值
    //color: #ff2217
};

document.getElementById('box').getAttribute('id');//獲取元素的id值
document.getElementById('box').id;            //獲取元素的id值

document.getElementById('box').getAttribute('mydiv');//獲取元素的自定義屬性值
document.getElementById('box').mydiv        //獲取元素的自定義屬性值，非IE不支持

document.getElementById('box').getAttribute('class');//獲取元素的class值，IE不支持
document.getElementById('box').getAttribute('className');//非IE不支持

PS：HTML通用屬性style和onclick，IE7更低的版本style返回一個對象，onclick返回一個函數式。雖然IE8已經修復這個bug，但爲了更好的兼容，開發人員只有儘量避免使用getAttribute()訪問HTML屬性了，或者碰到特殊的屬性獲取作特殊的兼容處理

5.setAttribute()方法，設置或者修改標籤的屬性和屬性值，首先要獲取到標籤的節點在用setAttribute()方法

setAttribute()方法將設置元素中某個屬性和值。它須要接受兩個參數：屬性名和值。若是屬性自己已存在，那麼就會被覆蓋。

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').setAttribute('style','color:red'); //給獲取到的標籤添加一個style
    //此時能夠看到標籤已經加上了屬性，標籤裏的文字已是紅顏色了
    var sdf2 = document.getElementById('asd').setAttribute('style','color:#216CDE'); //給獲取到的標籤style屬性修改值
    //此時能夠看到標籤的style屬性值已經被修改了
};

PS：在IE7及更低的版本中，使用setAttribute()方法設置class和style屬性是沒有效果的，雖然IE8解決了這個bug，但仍是不建議使用。

6.removeAttribute()方法，移除標籤指定的屬性，首先要獲取到標籤的節點在用removeAttribute()

removeAttribute()能夠移除HTML屬性。參數要移除的屬性名稱

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').setAttribute('style','color:red'); //給獲取到的標籤添加一個style
    //此時能夠看到標籤已經加上了屬性，標籤裏的文字已是紅顏色了
    var sdf2 = document.getElementById('asd').removeAttribute('style'); //移除標籤指定的屬性
    //此時能夠看到標籤的style屬性已經被移除了
};

PS：IE6及更低版本不支持removeAttribute()方法。

三．DOM節點屬性（遍歷節點）

1.node節點屬性

node節點屬性，只能獲取當前節點的信息，而且要先獲取到節點，在用屬性，下面childNodes屬性有詳細用到nodeName、nodeType和nodeValue。屬性

節點能夠分爲元素節點、屬性節點和文本節點，而這些節點又有三個很是有用的屬性，分別爲：nodeName、nodeType和nodeValue。

nodeName節點屬性，獲取或設置節點元素標籤名稱，和tagName等價，首先要獲取到節點，在使用屬性

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').nodeName; //nodeName節點屬性，獲取節點元素標籤名稱，和tagName等價
    alert(sdf); //打印出節點的標籤名稱
    //DIV
};

nodeType節點屬性，獲取節點元素的類型值，元素節點返回1，屬性節點返回2，文本節點返回3，首先要獲取到節點，在使用屬性

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').nodeType; //nodeType節點屬性，獲取節點元素的類型值，元素節點返回1，屬性節點返回2，文本節點返回3，首先要獲取到節點，在使用屬性
    alert(sdf); //節點元素的類型值
    //1,說明是元素節點
};

nodeValue節點屬性，獲取或設置文本節點的文本，元素節點null自己沒有類容，首先要獲取到節點，在使用屬性

window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').nodeValue; //nodeValue節點屬性，獲取節點類容，元素節點自己沒有類容，首先要獲取到節點，在使用屬性
    alert(sdf); //節點類容
    //null,說明元素節點自己沒有類容，由於node屬性只能獲取當前節點
};

2.層次節點屬性

節點的層次結構能夠劃分爲：父節點與子節點、兄弟節點這兩種。當咱們獲取其中一個元素節點的時候，就可使用層次節點屬性來獲取它相關層次的節點。

層次節點屬性

屬性	說明
childNodes	獲取當前元素節點的全部子節點
firstChild	獲取當前元素節點的第一個子節點
lastChild	獲取當前元素節點的最後一個子節點
ownerDocument	獲取該節點的文檔根節點，至關與document
parentNode	獲取當前節點的父節點
previousSibling	獲取當前節點的前一個同級節點
nextSibling	獲取當前節點的後一個同級節點
attributes	獲取當前元素節點的全部屬性節點集合

1.childNodes屬性，獲取元素和文本節點

childNodes屬性能夠獲取某一個元素節點的全部子節點，這些子節點包含元素子節點和文本子節點。首先要獲取到元素節點在使用屬性，返回包含子節點和文本節點的數組

//<div id="asd">測試<b>這一段</b>文本</div>


window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').childNodes; //childNodes屬性能夠獲取某一個元素節點的全部子節點，這些子節點包含元素子節點和文本子節點
    alert(sdf); //返回包含子節點和文本節點的數組
    //[object NodeList]
    alert(sdf.length) //查看數組長度
    //3，說明有3個包含子節點和文本節點
    alert(sdf[0]); //經過索引下標來獲取第一個元素
    //[object Text]，第一個是文本節點
};

使用childNodes[n]返回子節點對象的時候，有可能返回的是元素子節點，好比 HTMLElement；也有可能返回的是文本子節點，好比Text。元素子節點可使用nodeName或者tagName獲取標籤名稱，而文本子節點可使用nodeValue獲取文本。

//<div id="asd">測試<b>這一段</b>文本</div>


window.onload = function(){ //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').childNodes; //childNodes屬性能夠獲取某一個元素節點的全部子節點，這些子節點包含元素子節點和文本子節點
    alert(sdf); //返回包含子節點和文本節點的數組

    //經過循環加判斷，獲得包含子節點和文本節點數組裏的子節點標籤名稱，和文本節點的文本類容
    for (var i = 0 ; i < sdf.length; i ++){  //根據數組的長度來循環次數
        if (sdf[i].nodeType == 1){  //經過數組下標獲得節點元素，nodeType查看節點元素的類型值，
            //若是類型值返回1說明是元素節點，也就是標籤
            alert('元素節點：' + sdf[i].nodeName);  //元素節點nodeName打印出標籤名稱
        }else if(sdf[i].nodeType == 3){  //經過數組下標獲得節點元素，nodeType查看節點元素的類型值，
            //若是類型值返回3說明是文本節點，也就文本類容
            alert('文本節點：' + sdf[i].nodeValue);  //元素節點nodeName打印出標籤名稱
        }

    }

};

innerHTML和nodeValue兩個區別

PS：在獲取到文本節點的時候，是沒法使用innerHTML這個屬性輸出文本內容的。這個非標準的屬性必須在獲取元素節點的時候，才能輸出裏面包含的文本。

PS：innerHTML和nodeValue第一個區別，就是取值的。那麼第二個區別就是賦值的時候，nodeValue會把包含在文本里的HTML轉義成特殊字符，從而達到造成單純文本的效果。

box.childNodes[0].nodeValue = '<strong>abc</strong>';//結果爲：<strong>abc</strong>
    box.innerHTML = '<strong>abc</strong>';        //結果爲：abc

2.firstChild和lastChild屬性

firstChild用於獲取當前元素節點的第一個子節點，至關於childNodes[0]；

//<div id="asd">測試<b>這一段</b>文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').firstChild; //firstChild用於獲取當前元素節點的第一個子節點，至關於childNodes[0]；
    alert(sdf); //打印出第一個文本子節點的對象
    //[object Text]
    alert(sdf.nodeValue);//打印出第一個文本子節點的文本類容
    //測試

};

lastChild用於獲取當前元素節點的最後一個子節點，

//<div id="asd">測試<b>這一段</b>文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').lastChild; //lastChild用於獲取當前元素節點的最後一個子節點，
    alert(sdf); //打印出最後一個文本子節點的對象
    //[object Text]
    alert(sdf.nodeValue);//打印出最後一個文本子節點的文本類容
    //文本
};

3.ownerDocument屬性

ownerDocument屬性返回該節點的文檔對象根節點，返回的對象至關於document。

//<div id="asd">測試<b>這一段</b>文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').ownerDocument; //ownerDocument屬性返回該節點的文檔對象根節點，返回的對象至關於document。
    alert(sdf); //打印文檔對象根節點
    //[object HTMLDocument]
};

4.parentNode、previousSibling、nextSibling屬性

parentNode屬性返回該節點的父節點，

//<div id="asd">測試<b>這一段</b>文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').parentNode; //parentNode屬性返回該節點的父節點，
    alert(sdf); //打印該節點的父節點
    //[object HTMLBodyElement]
};

previousSibling屬性返回該節點的前一個同級節點，就是當前節點同級的上一個節點

//<div id="asd">測試<b>這一段</b>文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').childNodes[2]; //獲取當前節點裏的第3個子節點包含文本節點
    alert(sdf); //打印當前節點
    //[object Text] 說明是文本節點
    alert(sdf.nodeValue); //打印當前文本節點的文本
    //文本
    alert(sdf.previousSibling); //previousSibling屬性返回該節點的前一個同級節點，就是當前節點同級的上一個節點
    //[object HTMLElement] 說明是標籤節點
    alert(sdf.previousSibling.nodeName); //打印當前節點的標籤
    //B
};

nextSibling屬性返回該節點的後一個同級節點。就是當前節點同級的下一個節點

//<div id="asd">測試<b>這一段</b>文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').childNodes[0]; //獲取當前節點裏的第一個子節點包含文本節點
    alert(sdf); //打印第一個子節點，是一個文本節點，就是（測試）
    //[object Text]
    alert(sdf.nextSibling); //nextSibling屬性返回該節點的後一個同級節點。就是當前節點同級的下一個節點
    //[object HTMLElement] //說明是一個元素節點
    alert(sdf.nextSibling.nodeName);//獲取當前節點的標籤名稱
    //b ,就是b標籤
    
};

5.attributes屬性，獲取元素標籤屬性節點

attributes屬性返回該節點的屬性節點集合。首先獲取到元素節點後在用這個屬性

//<div id="asd" title="標題" style="color: #ff2217">測試這一段文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').attributes; //attributes屬性返回該節點的屬性節點集合。首先獲取到元素節點後在用這個屬性
    alert(sdf); //打印當前標籤節點的標籤屬性集合
};

length查看當前標籤節點的標籤屬性集合長度

//<div id="asd" title="標題" style="color: #ff2217">測試這一段文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').attributes; //attributes屬性返回該節點的屬性節點集合。首先獲取到元素節點後在用這個屬性
    alert(sdf); //打印當前標籤節點的標籤屬性集合
    alert(sdf.length); //length查看當前標籤節點的標籤屬性集合長度
    //3,說明當前標籤有3個標籤屬性
};

經過索引來獲取標籤節點的標籤屬性集合裏的指定標籤屬性對象

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').attributes; //attributes屬性返回該節點的屬性節點集合。首先獲取到元素節點後在用這個屬性
    alert(sdf[0]); //經過索引來獲取標籤節點的標籤屬性集合裏的指定標籤屬性
    //[object Attr] 標籤屬性對象
};

nodeType查看當前節點的類型，1元素類型，2屬性類型，3文本類型

//<div id="asd" title="標題" style="color: #ff2217">測試這一段文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').attributes[0]; //attributes屬性返回該節點的屬性節點集合。首先獲取到元素節點後在用這個屬性,用索引獲取第一個標籤屬性
    alert(sdf.nodeType); //nodeType查看當前節點的類型，1元素類型，2屬性類型，3文本類型
    //2,說明是屬性類型
};

nodeValue獲取標籤屬性的值，首先要獲取到標籤屬性節點後在使用

//<div id="asd" title="標題" style="color: #ff2217">測試這一段文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').attributes[0]; //attributes屬性返回該節點的屬性節點集合。首先獲取到元素節點後在用這個屬性,用索引獲取第一個標籤屬性
    alert(sdf.nodeValue); //nodeValue獲取標籤屬性的值，首先要獲取到標籤屬性節點後在使用
    //asd,第一個屬性的值爲asd
};

nodeName獲取標籤屬性的名稱，首先要獲取到標籤屬性節點後在使用

//<div id="asd" title="標題" style="color: #ff2217">測試這一段文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').attributes; //attributes屬性返回該節點的屬性節點集合。首先獲取到元素節點後在用這個屬性,
    alert(sdf[0].nodeName); //nodeName獲取標籤屬性的名稱，首先要獲取到標籤屬性節點後在使用
    //id
};

經過屬性名稱獲取屬性值，首先要獲取到標籤屬性節點集合

//<div id="asd" title="標題" style="color: #ff2217">測試這一段文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').attributes; //attributes屬性返回該節點的屬性節點集合。首先獲取到元素節點後在用這個屬性,
    alert(sdf['id'].nodeValue); //經過屬性名稱獲取屬性值，首先要獲取到標籤屬性節點集合
};
//asd

循環打印出標籤的全部屬性和屬性值

//<div id="asd" title="標題" style="color: #ff2217">測試這一段文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').attributes; //attributes屬性返回該節點的屬性節點集合。首先獲取到元素節點後在用這個屬性,

    for (var i = 0; i < sdf.length; i ++){  //根據屬性集合的長度循環次數
        if(sdf[i].nodeType === 2){  //經過下標獲取屬性集合數據，判斷返回類型，若是返回時2說明是標籤屬性類型
            alert('屬性：' + sdf[i].nodeName + ':' + sdf[i].nodeValue); //打印出標籤屬性的屬性名稱和屬性值
        }
    }
};

//屬性：id:asd
//屬性：title:標題
//屬性：style:color: #ff2217

6.忽略空白文本節點，在獲取子元素時遇到空白文本節點

// <div id="asd" title="標題" style="color: #ff2217">
//     <p>測試1</p>
//     <p>測試1</p>
//     <p>測試1</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').childNodes; //childNodes屬性能夠獲取某一個元素節點的全部子節點，這些子節點包含元素子節點和文本子節點，返回包含子節點和文本節點的數組
    alert(sdf.length); //查看子節點包含文本節點集合的長度
    //火狐瀏覽器返回7
    //IE返回3
    //說明瀏覽器解析方式不一樣，IE解釋忽略了p標籤前的空白，火狐將p標籤前的空白算成空白文本了
};

PS：在非IE中，標準的DOM具備識別空白文本節點的功能，因此在火狐瀏覽器是7個，而IE自動忽略了，若是要保持一致的子元素節點，須要手工忽略掉它。

忽略空白字符

// <div id="asd" title="標題" style="color: #ff2217">
//     <p>測試1</p>
//     <p>測試1</p>
//     <p>測試1</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').childNodes; //childNodes屬性能夠獲取某一個元素節點的全部子節點，這些子節點包含元素子節點和文本子節點，返回包含子節點和文本節點的數組
    alert(hul(sdf).length); //將子節點集合當作參數傳入忽略空白函數，獲得返回值後在檢測長度
    //全部瀏覽器返回3，說明都忽略了空白文本節點
};

//建立忽略空白字符函數
function hul(jh) {
    var ret = [];                                      //空數組，保存不是空白文本節點的節點
    for (var i = 0; i < jh.length; i ++){              //根據子節點集合長度循環次數
        //判斷若是循環到的子節點類型是文本節點類型，而且子節點文本類容是空白類容
        if(jh[i].nodeType === 3 && /^\s+$/.test(jh[i].nodeValue)){
            continue;              //退出當前循環，繼續後面的循環
        }else {                   //上來條件不成立，說明不是空白文本節點
            ret.push(jh[i]);      //將節點添加到數組
        }
    }
    return ret; //返回數組
}

PS：上面的方法，採用的忽略空白文件節點的方法，把獲得元素節點累加到數組裏返回。那麼還有一種作法是，直接刪除空白節點便可。

移除空文本節點

removeChild()刪除一個節點裏的指定子節點,參數要刪除的子節點在節點集合裏的下標，先要獲取到要刪除的子節點的父節點後，在父節點使用這個方法刪除裏面的子節點

// <div id="asd" title="標題" style="color: #ff2217">
//     <p>測試1</p>
//     <p>測試1</p>
//     <p>測試1</p>
// </div>


window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd').childNodes; //childNodes屬性能夠獲取某一個元素節點的全部子節點，這些子節點包含元素子節點和文本子節點，返回包含子節點和文本節點的數組
    alert(hul(sdf).length); //將子節點集合當作參數傳入忽略空白函數，獲得返回值後在檢測長度
    //全部瀏覽器返回3，說明都刪除了空白文本節點
};

//建立刪除空文本節點符函數
function hul(jh) {
    for (var i = 0; i < jh.length; i ++){              //根據子節點集合長度循環次數
        //判斷若是循環到的子節點類型是文本節點類型，而且子節點文本類容是空白類容
        if(jh[i].nodeType === 3 && /^\s+$/.test(jh[i].nodeValue)){
            //獲得空白節點以後從當前節點，獲取到父節點上，在父節點刪除子節點
            jh[i].parentNode.removeChild(jh[i]);
        }
    }
    return jh; //最後返回刪除後的節點集合
}

若是firstChild、lastChild、previousSibling和nextSibling在獲取節點的過程當中遇到空白節點，咱們該怎麼處理掉呢？

firstChild(獲取當前元素節點的第一個子節點)、lastChild(獲取當前元素節點的最後一個子節點)、previousSibling(當前節點同級的上一個節點)和nextSibling(就是當前節點同級的下一個節點)

// <div id="asd" title="標題" style="color: #ff2217">
//     <p>測試1</p>
//     <p>測試1</p>
//     <p>測試1</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('asd'); //獲取當前ID的節點
    alert(hul(sdf).firstChild.nodeName); //將當前節點當作參數傳給刪除空文本節點函數，最後獲取第一個子節點的標籤名稱
    //p,能夠看到已經刪除空白文本子節點

};

//建立刪除空文本節點函數
function hul(jh) {
    for (var i = 0; i < jh.childNodes.length; i ++){              //根據子節點集合長度循環次數
        //判斷若是循環到的子節點類型是文本節點類型，而且子節點文本類容是空白類容
        if(jh.childNodes[i].nodeType === 3 && /^\s+$/.test(jh.childNodes[i].nodeValue)){
            //獲得空白節點以後從當前節點，獲取到父節點上，在父節點刪除子節點
            jh.childNodes[i].parentNode.removeChild(jh.childNodes[i]);
        }
    }
    return jh; //最後返回刪除後的節點集合
}

四．節點操做，（操做節點）

DOM不僅僅能夠查找節點，也能夠建立節點、複製節點、插入節點、刪除節點和替換節點。

節點操做方法

方法	說明
write()	這個方法能夠把任意字符串插入到文檔中
createElement()	建立一個元素節點
appendChild()	將新節點追加到子節點列表的末尾
createTextNode()	建立一個文件節點
insertBefore()	將新節點插入在前面
repalceChild()	將新節點替換舊節點
cloneNode()	複製節點
removeChild()	移除節點

1.write()方法

write()方法能夠把任意字符串插入到文檔中去。插入文本或者標籤低版本瀏覽器會覆蓋原有的html內容，不推薦使用

document.write('<p>這是一段文本</p>'); //向瀏覽器插入一條p標籤

2.createElement()方法

createElement()方法能夠建立一個元素節點。參數要建立的元素標籤名稱，只是建立了元素節點，並無寫入文檔，只是駐留在內存中

document.createElement('p');        //建立一個元素節點

ps:通常要先獲取到父節點，後在createElement()方法建立元素節點，在結合appendChild()方法添加

3.appendChild()方法

appendChild()方法將一個新節點添加到某個節點的子節點列表的末尾上。參數createElement()方法建立的節點，首先要獲取到要添加節點的父節點

使用方式：

父節點.appendChild(建立的新節點變量);

如：asd.appendChild(ys);

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試1</p>
//     <p>測試1</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asd = document.getElementById('box');  //獲取id爲box的元素節點
    var ys = document.createElement('p');      //建立一個新元素節點<p>
    asd.appendChild(ys);                       //把新元素節點<p>添加到當前節點的子節點末尾
};

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試1</p>
//     <p>測試1</p>
//     <p></p>
// </div>

4.createTextNode()方法

createTextNode()方法建立一個文本節點。並無寫入文檔，只是駐留在內存中，參數文本節點文本

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試1</p>
//     <p>測試1</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asd = document.getElementById('box');  //獲取id爲box的元素節點
    var ys = document.createTextNode('添加文本');      //reateTextNode()方法建立一個文本節點。並無寫入文檔，只是駐留在內存中，
    asd.appendChild(ys);                       //把新文本節點添加到當前節點的子節點末尾
};

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試1</p>
//     <p>測試1</p>
//     添加文本
// </div>

將文本節點添加到元素節點裏

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試1</p>
//     <p>測試1</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asd = document.getElementById('box');  //獲取id爲box的元素節點
    var ys = document.createElement('p');      //建立一個新元素節點<p>
    asd.appendChild(ys); //將新元素節點添加到當前節點的子節點末尾

    var text = document.createTextNode('測試2');      //reateTextNode()方法建立一個文本節點。並無寫入文檔，只是駐留在內存中，
    ys.appendChild(text);                       //把新文本節點添加到新建立元素節點裏
};

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試1</p>
//     <p>測試1</p>
//     <p>測試2</p>
// </div>

5.insertBefore()方法

insertBefore()方法能夠把節點建立到指定節點的前面。第一個參數是要建立的標籤名稱，第二個參數是要在它以前建立節點的目標節點變量，首先獲取到目標節點經過目標節點獲取到父節點後在使用insertBefore()

使用方式：

目標節點變量.父節點.insertBefore(建立節點變量,目標節點)

如：asd.parentNode.insertBefore(ys,asd);

// <body>
// <div id="box" title="標題">測試</div>
// </body>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asd = document.getElementById('box');  //獲取id爲box的元素節點
    var ys = document.createElement('p');      //建立一個新元素節點<p>
    asd.parentNode.insertBefore(ys,asd);       //insertBefore()方法能夠把節點建立到指定節點的前面
};
// <body>
//     <p></p>
//     <div id="box" title="標題"></div>
// </body>

PS：insertBefore()方法能夠給當前元素的前面建立一個節點，但卻沒有提供給當前元素的後面建立一個節點。那麼，咱們能夠用已有的知識建立一個insertAfter()函數。

自定義給當前元素的後面建立一個節點

// <body>
// <div id="box" title="標題">測試</div>
// </body>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asd = document.getElementById('box');  //獲取id爲box的元素節點
    var ys = document.createElement('p');      //建立一個新元素節點<p>
    insertAfter(ys,asd); //調用自定義給當前元素的後面建立一個節點
};

function insertAfter(chjian,mubao) { //自定義一個函數，給當前元素的後面建立一個節點，給目標節點後面添加一個節點，接收兩個參數，第一個建立節點變量，第二個目標節點
    //獲得父節點,經過目標節點找到目標節點的父節點
    var parent = mubao.parentNode;
    //判斷，父節點裏最後一個子節點若是等於，目標節點
    if (parent.lastChild === mubao) {
        //就在父節點的，子節點末尾添加一個新節點
        parent.appendChild(chjian);
    }else {
        //不然,在父節點上向指定子節點的前面添加一個新節點,mubao.nextSibling,目標節點是當前節點同級的下一個節點，就把指針指向了當前節點後面
        parent.insertBefore(chjian, mubao.nextSibling);
    }

}
// <body>
//     <div id="box" title="標題"></div>
//     <p></p>
// </body>

createElement在建立通常元素節點的時候，瀏覽器的兼容性都還比較好。但在幾個特殊標籤上，好比iframe、input中的radio和checkbox、button元素中，可能會在IE6,7如下的瀏覽器存在一些不兼容。

// <body>
// <div id="box" title="標題">測試</div>
// </body>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var input = null; //建立一個空對象
    //用瀏覽器檢測browserdetect.js，判斷若是是ie瀏覽器，而且版本小於或者等於7
    if (BrowserDetect.browser == 'Internet Explorer' && BrowserDetect.version <= 7) {
        //判斷IE6,7，使用字符串的方式
        input = document.createElement("<input type=\"radio\" name=\"sex\">");  //建立一個元素節點，值包含元素屬性
    } else {
        //標準瀏覽器，使用標準方式
        input = document.createElement('input');  //建立一個新元素節點
        input.setAttribute('type', 'radio');  //設置一個新元素節點的屬性和屬性值
        input.setAttribute('name', 'sex');    //設置一個新元素節點的屬性和屬性值
    }
    //經過標籤名稱獲取到body，將建立的新節添加到子節點列表的末尾
    document.getElementsByTagName('body')[0].appendChild(input);
};

// <body>
//     <div id="box" title="標題"></div>
//     <input name="sex" type="radio">
// </body>

6.repalceChild()方法

replaceChild()方法能夠把節點替換成指定的節點。參數第一個是建立節點的變量，第二個是目標節點，注意：替換節點會覆蓋節點裏的文本

使用方式：

目標節點.父節點.replaceChild(建立節點的變量,目標節點)

//<div id="box" title="標題"></div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box'); //經過ID獲取到目標節點
    var chj = document.createElement('p');  //建立一個新元素節點
    //經過目標節點，找到父節點，而後替換節點，參數第一個是建立節點變量，第二個是目標節點變量
    asf.parentNode.replaceChild(chj,asf);  //replaceChild()方法能夠把節點替換成指定的節點。
};
// <body>
//     <p></p>
// </body>

7.cloneNode()方法

cloneNode()方法能夠把子節點複製出來。也就是克隆子節點，參數true表示複製元素節點包含元素節點裏的文本，false表示只複製元素節點不包含元素節點裏的文本

使用方式：

目標節點的父節點.獲取到目標節點.cloneNode(true)

複製節點後能夠賦值給一個變量，而後添加到一個節點

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box'); //經過ID獲取到目標節點的父節點,咱們要複製這個節點裏的子節點
    //將父節點傳入hul函數去除裏面的空白文本子節點，而後獲取到第一個子節點,cloneNode(true)複製節點
    var fzh = hul(asf).firstChild.cloneNode(true);
    //在父節點上，將複製的子節點，添加到子節點列表末尾
    asf.appendChild(fzh);        //添加到子節點列表末尾

};

//建立刪除空文本節點函數
function hul(jh) {
    for (var i = 0; i < jh.childNodes.length; i ++){              //根據子節點集合長度循環次數
        //判斷若是循環到的子節點類型是文本節點類型，而且子節點文本類容是空白類容
        if(jh.childNodes[i].nodeType === 3 && /^\s+$/.test(jh.childNodes[i].nodeValue)){
            //獲得空白節點以後從當前節點，獲取到父節點上，在父節點刪除子節點
            jh.childNodes[i].parentNode.removeChild(jh.childNodes[i]);
        }
    }
    return jh; //最後返回刪除後的節點集合
}
//能夠看到已經把第一個子節點複製添加到了子節點列表的末尾
// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
//     <p>測試1</p>
// </div>

8.removeChild()方法

removeChild()刪除指定節點，參數是要刪除的目標節點

使用方式：

目標節點的父節點.removeChild(目標節點)

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box'); //經過ID獲取到目標節點的父節點,咱們要刪除第一個子節點
    //將父節點傳入函數刪除裏面的空白文本子節點，而後在父節點刪除目標節，參數是目標節點
    hul(asf).removeChild(asf.firstChild);
};

//建立刪除空文本節點函數
function hul(jh) {
    for (var i = 0; i < jh.childNodes.length; i ++){              //根據子節點集合長度循環次數
        //判斷若是循環到的子節點類型是文本節點類型，而且子節點文本類容是空白類容
        if(jh.childNodes[i].nodeType === 3 && /^\s+$/.test(jh.childNodes[i].nodeValue)){
            //獲得空白節點以後從當前節點，獲取到父節點上，在父節點刪除子節點
            jh.childNodes[i].parentNode.removeChild(jh.childNodes[i]);
        }
    }
    return jh; //最後返回刪除後的節點集合
}
// <div id="box" title="標題">
//     <p>測試2</p>
// </div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。