遍歷節點的方式叫做：API 這里有兩個套API
即：HTML元素。
//===========================以下是第一種操作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>
以下在控制台獲取對象時：點擊所獲取的對象在firefox中顯示各種屬性，在chrome中是顯示其子元素以及孫子元素的所有內容。
====================================以下是第一種 API 遍歷方法 一 ===========================================
第一種API 遍歷文本節點注重的是文本節點，忽略空的文本節點。兼容性比較好。
遍歷文檔所有節點，並且打印出來
<!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 s="";
function travel(spance,node){
debugger;
if (node.tagName) {//判斷當前節點是否是空標簽，不是就添加html標簽名稱。
s+=spance+node.tagName+"<br/>";
}
var len= node.childNodes.length;//獲得所有子節點個數
for (var i = 0; i < len; i++) {
travel(spance+"|-",node.childNodes[i])
}
}
travel("",document);
document.write(s);
})
</script>
<body>
<div>
<ul id="ul1">
<li><a href="">111</a></li>
<li><a href="">111</a></li>
<li><a href="">111</a></li>
</ul>
<ul id="ul2">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
-------替換上面，這是自己編寫的，僅僅用於遞歸遍歷所有節點名稱---------
myReady(function(){
var str="";//存儲打印在文檔的字符串
/**
* 遞歸查找文本所有節點名稱
* @param {標簽對象} node 標簽
* @return {string} 打印的文本
*/
function travel(node){
if (node.nodeType==1) {//node.nodeType==1，則不為空；node.nodeType==0，則返回空。
str+=node.tagName+"--";//讀取每個節點的名稱，這個遞歸需要做的只有讀取節點名稱
}
for (var i = 0; i < node.childNodes.length; i++) {//遍歷當前節點的所有子節點
travel(node.childNodes[i]);//所有子節點進行遞歸
}
}
travel(document);//document是當前文檔：從html開始。
document.write(str);//打印字符串
})
-------------------------------------
重點：node.nodeType==1，表示非空節點，node.nodeType==0,表示空文本節點（換行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節點遍歷</title>
<script src="js/domready.js"></script><!--必須導入該文件，搜狗輸入domready.js-->
<script>
myReady(function(){
var p=document.getElementById('p');//獲取div對象
for (var i=0,len=p.childNodes.length; i<len; i++) {//聲明兩個變量可以用逗號分開
//node.nodeType==1，表示非空節點，node.nodeType==0,表示空文本節點（換行）
//如果沒有進行if判斷，直接輸出：console.log(p.childNodes[i]); 控制台顯示：#text <span> #text <span> #text <span> #text。
//總共7個對象，四個#text（空文本節點），所以要使用node.nodeType==1，篩選出非空節點進行輸出。
if (p.childNodes[i].nodeType==1) {
debugger;
//console.log(p.childNodes[i]);//這兩句話分開打印。獲取標簽對象。
document.write(p.childNodes[i].tagName+"<br/>");//這兩句話分開打印。獲取標簽的名稱。
}
}
});
</script>
</head>
<body>
<p id="p">
<span>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</span>
<span>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</span>
<span>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</span>
</p>
</div>
</body>
</html>
--------------------
第一種API 遍歷文本節點注重的是所有DOM節點，忽略空的文本節點。兼容性比較好。
====================================以上是第一種 API 遍歷方法 一 ===========================================
====================================以下是第二種 API 遍歷方法 二 ===========================================
第二套API是比較專門針對文本DOM節點進行開發的，所以每個屬性都帶有element(元素)，除了children[i]
第二種API 遍歷文本節點注重的是標簽對象節點，忽略空的文本節點。兼容性相對差一點，IE8以及IE8以下不支持，其他瀏覽器兼容性比較好。
<!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');//獲取對象
for (var i=0,len=ul.childElementCount; i<len; i++) {//遍歷對象下面的所有子節點，空文本節點忽略(換行)
console.log(ul.children[i]);//輸出子節點名稱，這兩個輸出要分開，否則只能顯示一個。
//document.write(ul.children[i].tagName+"<br/>");//輸出子節點名稱，這兩個輸出要分開，否則只能顯示一個。
}
})
</script>
<body>
<div>
<ul id="ul1">
<li><a href="">111</a></li>
<li><a href="">111</a></li>
<li><a href="">111</a></li>
</ul>
<ul id="ul2">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
============================
