对访问节点做一个总结
慕圣3571134
2018-11-24 23:00
下面通过实例对父，兄，子，第一子，最后子的几个访问方式做了一个全面的概括，通过下面实例更清楚的了解到各节点之间的关系，下面的功能就是无障碍式访问不同父节点之间的元素，通俗讲就是一颗树跳到了另一颗树，具体实现的算法：先看这个 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>
注：临界点指本节点后无有效节点
1回答
-
- 感人的噩耗
- 2019-12-09 21:57:54
0000
JavaScript进阶篇
468061 学习 · 21891 问题
相似问题