對(duì)訪問(wèn)節(jié)點(diǎn)做一個(gè)總結(jié)
下面通過(guò)實(shí)例對(duì)父，兄，子，第一子，最后子的幾個(gè)訪問(wèn)方式做了一個(gè)全面的概括，通過(guò)下面實(shí)例更清楚的了解到各節(jié)點(diǎn)之間的關(guān)系，下面的功能就是無(wú)障礙式訪問(wèn)不同父節(jié)點(diǎn)之間的元素，通俗講就是一顆樹(shù)跳到了另一顆樹(shù)，具體實(shí)現(xiàn)的算法：先看這個(gè)?n=n.parentNode.nextSibling.nextSibling.firstChild.nextSibling;是不是很眼暈？其實(shí)就是從這個(gè)列表跳進(jìn)了另一個(gè)列表，這只是直接的算法，用代碼的算法是：到達(dá)臨界點(diǎn)（注）時(shí)，返回父節(jié)點(diǎn)，遍歷兄弟節(jié)點(diǎn)（同級(jí)）進(jìn)入U(xiǎn)L元素節(jié)點(diǎn)的第一子節(jié)點(diǎn)，繼續(xù)遍歷是否要找的LI元素節(jié)點(diǎn)，找到后輸出信息，到此結(jié)束。
下面是代碼部分；
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DOM對(duì)象--節(jié)點(diǎn)訪問(wèn)之總結(jié)</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="上一個(gè)" onclick="get_previousSibling()">
<input id="id_down" type="button" value="下一個(gè)" 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){// 臨界點(diǎn)切換下一組
n=n.parentNode;// 返回父節(jié)點(diǎn)
do{
n=n.nextSibling;
if(n.nodeName=="UL"){//同級(jí)節(jié)點(diǎn)查找
? ?n=n.firstChild;//進(jìn)入子節(jié)點(diǎn)
}
}while(n.nodeName!="LI")//查找LI標(biāo)簽
// n=n.parentNode.nextSibling.nextSibling.firstChild.nextSibling;
}
}while(n.nodeType!=1)//不是元素節(jié)點(diǎn)繼續(xù)遍歷
p.innerHTML=n.innerHTML; //輸出信息
}
function get_previousSibling(){
do{
n=n.previousSibling;
if(!n.previousSibling){// 臨界點(diǎn)切換上一組
n=n.parentNode;// 返回父節(jié)點(diǎn)
do{
n=n.previousSibling;
if(n.nodeName=="UL"){//同級(jí)節(jié)點(diǎn)查找
n=n.lastChild;// 進(jìn)入子節(jié)點(diǎn)
}
}while(n.nodeName!="LI")//查找LI標(biāo)簽
}
}while(n.nodeType!=1)
p.innerHTML=n.innerHTML;
}
</script>
</body>
</html>
注：臨界點(diǎn)指本節(jié)點(diǎn)后無(wú)有效節(jié)點(diǎn)
2019-12-09
0000