javascript实现的获取下一个li元素代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了获取当前li元素的下一个li元素效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css"> 
#items{ 
  width:900px; 
  height:auto; 
  margin:0 auto; 
  padding:5px 0; 
  clear:both; 
} 
#items ul, #items li{ 
  list-style:none; 
} 
#items li{ 
  width:500px; 
  height:28px; 
  text-align:left; 
  padding-left: 0px; 
  line-height:28px; 
  border-bottom:dashed 1px #CCC;
  cursor:pointer;
} 
</style> 
<script type="text/javascript">
window.onload=function(){
  var obt=document.getElementById("bt");
  var obox=document.getElementById("items");
  var lis=obox.getElementsByTagName("li");
  obt.onclick=function(){
    var theNode=lis[1].nextSibling;   
    while (theNode.nodeType!=1) {     
      theNode=theNode.nextSibling;   
    }
    theNode.style.color="red";
  }
}
</script> 
</head> 
<body> 
<div id="items"> 
  <ul> 
    <li>犀牛前端部落欢迎您,只有努力奋斗才会有美好的未来</li> 
    <li>没有任何人一开始就是高手,必须要好好学习</li> 
    <li>本站的url地址是pipipi.net</li> 
    <li>每一天都是新的,所以要好好真心当前时间</li> 
    <li>div css教程里面有大量详实的代码</li> 
  </ul> 
</div> 
<input type="button" id="bt" value="查看效果"/>
</body> 
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).window.onload=function(){},文档内容完全加载完毕再去执行函数中的代码。

(2).var obt=document.getElementById("bt"),获取按钮元素对象。

(3).var obox=document.getElementById("items"),获取div元素对象。

(4).var lis=obox.getElementsByTagName("li"),获取div下的所有li元素集合。

(5).obt.onclick=function(){},为按钮注册click事件处理函数。

(6).var theNode=lis[1].nextSibling,获取第二li元素的下一个紧邻节点,注意这个属性获取的节点可能是元素节点,也可能是文本节点,比如空白或者换行都会被看做文本节点。

(7).while (theNode.nodeType!=1) {

  theNode=theNode.nextSibling;   

},通过while循环寻找最紧邻的元素节点。

(8).将最紧邻的元素节点中的文本颜色设置为红色。

二.相关阅读:

(1).getElementsByTagName()方法可以参阅document.getElementsByTagName()一章节。

(2).nextSibling属性可以参阅js nextSibling一章节。

(3).while语句可以参阅javascript while语句一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容