根據(jù)DOM，HTML文檔中的每個成分都是一個節(jié)點葫哗。
整個文檔就是一個文檔節(jié)點
每個HTML標簽是一個元素節(jié)點
包含在HTML元素中的文本是文本節(jié)點
每一個HTML屬性是一個屬性節(jié)點
注釋屬于注釋節(jié)點
一缔刹、如何獲得節(jié)點的引用
1.舊的獲取節(jié)點引用的方式
getELementById();
getElementsByName();
getElementsByTagName();
-----------------
劣勢：
1.浪費內(nèi)存球涛；
2.邏輯性不強。
-----------------
2.通過節(jié)點 關系屬性獲得節(jié)點的引用
對象.parentNode 獲得父節(jié)點的引用
對象.childNodes 獲得子節(jié)點的集合
對象.firstChild 獲得第一個子節(jié)點的引用
對象.lastChild 獲得最后一個子節(jié)點的引用
對象.previousSibling 獲得上一個兄弟節(jié)點的引用
對象.nextSibling 獲得下一個兄弟節(jié)點的引用
--------------
劣勢：
兼容性不好
--------------
二校镐、節(jié)點的信息（屬性）
節(jié)點類型 節(jié)點名字 節(jié)點值
nodeType nodeName nodeValue
元素節(jié)點 1 標簽名 null
屬性節(jié)點 2 屬性名 屬性值
文本節(jié)點 3 #text 文本
注釋節(jié)點 8 #comment 注釋的文字
文檔節(jié)點 9 #document null
三亿扁、兼容性函數(shù)
1.獲得所有子節(jié)點的兼容方法
function getChilds(obj){
var childs=obj.childNodes;
var arr=[];
for(var i=0;i<childs.length;i++){
if(childs[i].nodeType==3 && /^\s+$/.test(childs[i].nodeValue)){
continue;
}else{
arr.push(childs[i]);
}
}
return arr;
}
2.獲得最后一個子節(jié)點的兼容性方法
funtion getLastChild(obj){
var last=obj.lastChild;
while(last.nodeType==3 && /^\s+$/.test(last.nodeValue)){
last=last.previousSibling;
}
return last;
}
3.獲得第一個子節(jié)點的兼容性方法
function getFirstChild(obj){
var first=obj.firstChild;
while(first.nodeType==3 && /^\s+$/.test(first.nodeValue)){
first=first.nextSibling;
}
return first;
}
4.獲得上一個兄弟節(jié)點的兼容性方法
function getPreSibling(obj){
var preSibling=obj.previousSibling;
while(preSibling.nodeType==3 && /^\s+$/.test(preSibling.nodeValue)){
preSibling=preSibling.previousSibling;
}
return preSibling;
}
5.獲得下一個兄弟節(jié)點的兼容性方法
function getNextSibling(obj){
var nextSib=obj.nextSibling;
while(nextSib.nodeType==3 && /^\s+$/.test(nextSib.nodeValue)){
nextSib=nextSib.nextSibling;
}
return nextSib;
}
四、實例：實現(xiàn)點擊切換 隱藏和顯示 兩種狀態(tài)
1.dom節(jié)點：
<body>
<ul>
<li class="one">第一選項</li>
<li>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
</li>
</ul>
<ul>
<li class="one">第二選項</li>
<li>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
</li>
</ul>
<ul>
<li class="one">第三選項</li>
<li>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
</li>
</ul>
</body>
2.script代碼：
<script>
window.onload=function(){
var lis=document.getElementsByClassName('one');
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
if(nextNode(this).style.display==""){
nextNode(this).style.display="none";
}else{
nextNode(this).style.display="";
}
}
}
function nextNode(obj){
var nexts=obj.nextSibling;
while(nexts.nodeType==3){
nexts=nexts.nextSibling;
}
return nexts;
}
}
</script>