遍历节点的方式叫做：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 >
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
============================