用document.getElementsByTagName("li")獲得的Li元素出現(xiàn)以下現(xiàn)象的原因?
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>nextSibling</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>??? <script?type="text/javascript"> ????function?get_nextSibling(n){ ????????var?x=n.nextSibling; ????????while?(x?&&?x.nodeType!=1){ ????????????x=x.nextSibling; ????????} ????????return?x; ????} ????function?get_previousSibling(n){ ????????var?x=n.previousSibling; ????????while(x?&&?x.nodeType!=1){ ????????????x=x.previousSibling; ????????} ????????return?x; ????} ? ????var?x=document.getElementsByTagName("li")[1]; ????document.write(x.nodeName); ????document.write("?=?"); ????document.write(x.innerHTML); ???? ????var?y=get_nextSibling(x); ???? ????if(y!=null){ ????????document.write("<br?/>nextsibling:?"); ????????document.write(y.nodeName); ????????document.write("?=?"); ????????document.write(y.innerHTML); ????}else{ ??????document.write("<br>已經(jīng)是最后一個節(jié)點(diǎn)");?????? ????} ???? ????var?z=get_previousSibling(x); ???? ????if(z!=null){ ????????document.write("<br?/>previoussibling:?"); ????????document.write(z.nodeName); ????????document.write("?=?"); ????????document.write(z.innerHTML+"<br?/>"); ????}else{ ??????document.write("<br>已經(jīng)是第一個節(jié)點(diǎn)");?????? ????} ? </script> </body> </html>
當(dāng)?var x=document.getElementsByTagName("li")[2];時:
當(dāng)當(dāng)?var x=document.getElementsByTagName("li")[3];時:
當(dāng)當(dāng)?var x=document.getElementsByTagName("li")[4];時:
請問這是什么原因?
2015-12-31
該題中,getElementsTagName 獲得的數(shù)組元素有6個li,但分布在兩個不同層級,而nextSibling和previousSibling只能操作同一樹層級的節(jié)點(diǎn)!所以前兩次都是正常顯示!
copy你的代碼運(yùn)行一下,當(dāng)?var x=document.getElementsByTagName("li")[4];時的顯示結(jié)果應(yīng)該是:
LI = php
nextsibling: LI = java
previoussibling: LI = css3
2015-12-29
中間有個空行