nodeList對象的特點
1，nodeList是一種類數組對象，用於保存一組有序的節點。
2，通過方括號來訪問nodeList的值，有item方法與length屬性。
3，它並不是Array的實例，沒有數組對象的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必須導入該文件，搜狗輸入domready.js-->
<script>
myReady(function(){
var div=document.getElementById('div');//獲取div對象
//獲得節點列表(nodeList)，這是屬於操作DOM第一套API，所以會計算空文本節點，
//(google chrome)顯示：NodeList(5) [text, ul#ul1, text, ul#ul2, text] text表示空文本節點
//(firefox)顯示：NodeList(5) [ #text, ul#ul1, #text, ul#ul2, #text ] #text表示空文本節點
//console.log(div.childNodes);
//console.log(div.childNodes[0]);//通過方括號獲取對象，如：獲取第一個nodeList對象 #text(空文本節點)
//console.log(div.childNodes[3]);//通過方括號獲取對象，如：第三個對象 ul#ul2
var ul=document.getElementById("ul1");//獲取ul對象
var nodeList=ul.childNodes;//獲得ul下面的所有子節點對象列表 nodeList並不是一個數據類型。
//alert(typeof nodeList);//返回的是 Object類型。
/**
* 把nodeList轉化為數組對象 可以兼容IE5以上，兼容性很好。
* @param {object} nodeList 獲取所有子元素對象列表
* @return {array} [返回數組對象]
*/
function markArray(nodeList){//把nodeList轉換成數組
/*var arr=new Array();//創建新數組存放nodeList
for (var i = 0; i < nodeList.length; i++) {
arr[i]=nodeList[i];//把nodelist存放到數組中。
}
return arr;//返回數組*/
/**
* 非常高效的把nodeList轉化為數組對象 IE8以及IE8以下不兼容
* @param {object} nodeList 獲取所有子節點列表對象
* @return {Array} 返回數組對象
*/
/*function markArray(nodeList){//可以直接把nodeList直接轉換成Array數組。
return Array.prototype.slice.call(nodeList);//可以直接把nodeList直接轉換成Array數組。
}*/
//這個方法最好，通用方法：
var arr=null;//用於存放對象的變量，一般都給賦值null。其他可以賦值為""。
try{
return Array.prototype.slice.call(nodeList);//可以直接把nodeList直接轉換成Array數組。IE8以及IE8以下不兼容
}catch(e){
arr=new Array();//不要定義在不需要的作用域。
for (var i = 0; i < nodeList.length; i++) {//可以兼容IE7以上，兼容性很好。
arr.push(nodeList[i]);//等於 arr[i]=nodeList[i]
}
return arr;
}
}
var newarray=markArray(nodeList);//把nodeList轉換成數組，
//console.log(markArray(nodeList));//輸出數組對象：Array(7) [ #text, li#oneLi, #text, li#twoLi, #text, li#threeLi, #text ]，查看是不是數組，可以在控制台點擊，查看prototype(原型)這個屬性：Array
newarray.push("<h1>You are my sumshime!</h1>");//添加對象，返回的是數組的長度，而不是數組本身。
console.log(newarray);//返回數組：(8) [text, li#oneLi, text, li#twoLi, text, li#threeLi, text, "<h1>You are my sumshime!</h1>"] 。h1這個節點只是被添加到newarray數組中，並沒有添加到dom樹中去。
})
</script>
</head>
<body id="body">
<div id="div">
<ul id="ul1">
<li id="oneLi"><a href="">1111</a><a href="" id="onea">22222</a><span id="span1"> </span> <span id="span2"></span></li>
<li id="twoLi"><a href="">4444</a><a href="" >5555</a><a href="">6666</a></li>
<li id="threeLi"><a href="">7777</a><a href="" >8888</a><a href="">9999</a></li>
</ul>
<ul id="ul2">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
============以下是第一種操作DOM的API，會把空文本節點計算在內。相比下面的第二套API兼容性會好點=========================
//在控制台獲取對象時：點擊所獲取的對象在firefox中顯示各種屬性，在chrome中是顯示其子元素以及孫子元素的所有內容。
DOM節點操作，標簽之間的換行空文本節點在IE瀏覽器和firefox火狐瀏覽器中會讀取，其他瀏覽器不會讀取，需要兼容性方法，見搜狗：遍歷節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必須導入該文件，搜狗輸入domready.js-->
<script>
//===========================這里獲得的所有對象都是可以點開查看各種屬性=============================
myReady(function(){
var ul=document.getElementById('ul1');
var li1=document.getElementById("one");
var li2=document.getElementById("two");
var li3=document.getElementById("three");
//console.log(document.childNodes[0]);//獲取文檔第一個子節點：<!DOCTYPE html>對象 ，點開可以看到各種屬性及屬性值(火狐)，在谷歌中顯示的是：所獲取對象下面的所有子元素內容。
//console.log(document.firstChild);//獲取文檔第一個子節點：<!DOCTYPE html>對象 ，點開可以看到各種屬性及屬性值(火狐)，在谷歌中顯示的是：所獲取對象下面的所有子元素內容。
//console.log(document.childNodes.item(0));//獲取文檔第一個子節點：<!DOCTYPE html>對象 ，點開可以看到各種屬性及屬性值(火狐)，在谷歌中顯示的是：所獲取對象下面的所有子元素內容。
//console.log(document.childNodes[0].tagName);//獲取文檔第一個子節點：<!DOCTYPE html>對象的標簽名稱：undefined
//console.log(document.firstChild.tagName);//獲取文檔第一個子節點：<!DOCTYPE html>對象的標簽名稱：undefined
//console.log(document.documentElement);//文檔根節點:html對象，點開可以看到各種屬性及屬性值
//console.log(document.documentElement.tagName);//html標簽名稱
//console.log(document.documentElement.firstChild);//獲取HTML的第一個子節點：head對象，點開可以看到各種屬性及屬性值(火狐）,在谷歌中顯示的是：所獲取對象下面的所有子元素內容。
//console.log(document.documentElement.lastChild);//獲取HTML的最后一個子節點：body對象，點開可以看到各種屬性及屬性值(火狐）,在谷歌中顯示的是：所獲取對象下面的所有子元素內容。
//console.log(document.documentElement.firstChild.tagName);//獲取HTML的第一個子節點的標簽名稱:head
//console.log(document.documentElement.lastChild.tagName);//獲取HTML的最后一個子節點的標簽名稱:body
var ul=document.getElementById("ul1");
//獲得第一個和最后一個子節點有三種方式：
//console.log(ul.firstChild);//空文本子節點
//console.log(ul.childNodes[0]);//空文本子節點
//console.log(ul.childNodes.item(0));//空文本子節點
var ul=document.getElementById("ul1");
//獲得除了第一個和最后一個之外的節點有兩種方式：
//console.log(ul.childNodes[1]);
//console.log(ul.childNodes.item(1));
var li=document.getElementById("twoLi");//獲取li對象
//console.log(li.tagName);//獲得li標簽的名稱
//console.log(li.nextSibling);//因為下面每個li都有換行，所以左右兄弟節都是空文本節點，所以這里顯示：#text,謹記。
//console.log(li.previousSibling);//因為下面每個li都有換行，所以左右兄弟節都是空文本節點，所以這里顯示：#text,謹記。
var a=document.getElementById("onea");//獲取a對象
//console.log(a.nextSibling);//獲取下一個兄弟對象: <span>333</span>
//console.log(a.previousSibling);//獲取上一個兄弟對象: <a href="">1111</a>
var ul=document.getElementById("ul1");//獲取ul對象
var a=document.getElementById("onea");//獲取a對象
//console.log(ul.parentNode);//獲得父節點 div
//console.log(a.parentNode);//獲得父節點 li
var ul=document.getElementById("ul1");//獲取ul對象
var a=document.getElementById("onea");//獲取a對象
//console.log(ul.ownerDocument===document);
//console.log(ul.ownerDocument===document);
//console.log(document);//顯示：HTMLDocument file:///D:/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/HTML/%E4%BD%9C%E4%B8%9A%E7%B4%A0%E6%9D%90/textTwo.html 表示獲取該文件的絕對路徑。
var ul=document.getElementById("ul1");//獲取ul對象
var a=document.getElementById("onea");//獲取a對象
var span1=document.getElementById("span1");//獲取span對象
var span2=document.getElementById("span2");//獲取span對象
console.log(ul.hasChildNodes());//返回:true. 有3個li子節點
console.log(a.hasChildNodes());//返回:true. 有"2222"文本子節點
console.log(span1.hasChildNodes());//返回：true 有空文本子節點,即：有一個空格
console.log(span2.hasChildNodes());//返回:false 沒有節點
})
</script>
</head>
<body id="body">
<div id="div">
<ul id="ul1">
<li id="oneLi"><a href="">1111</a><a href="" id="onea">22222</a><span id="span1"> </span> <span id="span2"></span></li>
<li id="twoLi"><a href="">4444</a><a href="" >5555</a><a href="">6666</a></li>
<li id="threeLi"><a href="">7777</a><a href="" >8888</a><a href="">9999</a></li>
</ul>
<ul id="ul2">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
//===========================以下是第二種操作DOM的API，忽略空文本節點。不兼容IE8及其以下=============================
//在控制台獲取對象時：點擊所獲取的對象在firefox中顯示各種屬性，在chrome中是顯示其子元素以及孫子元素的所有內容。
//第二套API是比較專門針對文本DOM節點進行開發的，所以每個屬性都帶有element(元素)，除了children[i]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必須導入該文件，搜狗輸入domready.js-->
<script>
myReady(function(){
var div=document.getElementById('div');//獲取div對象
//console.log(div.childElementCount);//獲取div的子節點個數，孫子節點不管。
var ul1=document.getElementById("ul1");//獲取ul1對象
//console.log(ul1.firstElementChild);//獲取第一個子元素，點擊在FF中顯示各種屬性，在chrome中是顯示其子元素以及孫子元素的所有內容。
//console.log(ul1.lastElementChild);//獲取最后一個子元素，點擊在FF中顯示各種屬性，在chrome中是顯示其子元素以及孫子元素的所有內容。
var a=document.getElementById("onea");//獲取a對象
//console.log(a.nextElementSibling);//獲取id=onea 標簽的下一個兄弟元素
//console.log(a.previousElementSibling);//獲取id=onea 標簽的前面一個兄弟元素
var ul1=document.getElementById("ul1");//獲取ul對象
console.log(ul1.children[0]);//獲取id=ul1的第一個子元素,忽略所有空文本節點
console.log(ul1.children[1]);//獲取id=ul1的第二個子元素,忽略所有空文本節點
console.log(ul1.children[2]);//獲取id=ul1的第三個子元素,忽略所有空文本節點
})
</script>
</head>
<body id="body">
<div id="div">
<ul id="ul1">
<li id="oneLi"><a href="">1111</a><a href="" id="onea">22222</a><span id="span1"> </span> <span id="span2"></span></li>
<li id="twoLi"><a href="">4444</a><a href="" >5555</a><a href="">6666</a></li>
<li id="threeLi"><a href="">7777</a><a href="" >8888</a><a href="">9999</a></li>
</ul>
<ul id="ul2">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>