對訪問節點做一個總結
下面通過實例對父，兄，子，第一子，最后子的幾個訪問方式做了一個全面的概括，通過下面實例更清楚的了解到各節點之間的關系，下面的功能就是無障礙式訪問不同父節點之間的元素，通俗講就是一顆樹跳到了另一顆樹，具體實現的算法：先看這個?n=n.parentNode.nextSibling.nextSibling.firstChild.nextSibling;是不是很眼暈？其實就是從這個列表跳進了另一個列表，這只是直接的算法，用代碼的算法是：到達臨界點（注）時，返回父節點，遍歷兄弟節點（同級）進入UL元素節點的第一子節點，繼續遍歷是否要找的LI元素節點，找到后輸出信息，到此結束。
下面是代碼部分；
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DOM對象--節點訪問之總結</title>
</head>
<body>
<ul id="u1"> ??
<li id="a">javascript</li> ??
<li id="b">jquery</li> ??
<li id="c">html</li> ??
</ul> ??
<ul id="u2"> ??
<li id="d">css3</li> ??
<li id="e">php</li> ??
<li id="f">java</li> ??
</ul>
<input id="id_up" type="button" value="上一個" onclick="get_previousSibling()">
<input id="id_down" type="button" value="下一個" onclick="get_nextSibling()">
<p id="id_p"></p>
<script type="text/javascript">
var n=document.getElementById("a");
var up=document.getElementById("id_up");
var down=document.getElementById("id_down");
var p=document.getElementById("id_p");
function get_nextSibling(){
do{
n=n.nextSibling;
if(!n.nextSibling){// 臨界點切換下一組
n=n.parentNode;// 返回父節點
do{
n=n.nextSibling;
if(n.nodeName=="UL"){//同級節點查找
? ?n=n.firstChild;//進入子節點
}
}while(n.nodeName!="LI")//查找LI標簽
// n=n.parentNode.nextSibling.nextSibling.firstChild.nextSibling;
}
}while(n.nodeType!=1)//不是元素節點繼續遍歷
p.innerHTML=n.innerHTML; //輸出信息
}
function get_previousSibling(){
do{
n=n.previousSibling;
if(!n.previousSibling){// 臨界點切換上一組
n=n.parentNode;// 返回父節點
do{
n=n.previousSibling;
if(n.nodeName=="UL"){//同級節點查找
n=n.lastChild;// 進入子節點
}
}while(n.nodeName!="LI")//查找LI標簽
}
}while(n.nodeType!=1)
p.innerHTML=n.innerHTML;
}
</script>
</body>
</html>
注：臨界點指本節點后無有效節點
2019-12-09
0000