js：nextSibling兄弟节点的使用

一，使用nextSibling可以方便的找到该节点的兄弟节点，并为其设置属性

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">.center{margin: 0px auto;width: 300px;}.center *{display: block;padding: 3px 0px;}/*//设置过度*/.sf{transition:all 0.5s;}</style><script language="JavaScript">/* 封装方法通过id寻找节点*/function $(oId){return document.getElementById(oId);}/*为节点添加属性*/function addClass(obj, cn){var   cNames=obj.className;if(cNames.length==0){obj.className = cn;}else{obj.className +=(" "+cn);}}/*删除节点中的属性*/function removeClass(obj,cn){var cs=obj.className;cs=cs.split("");for(var i=0;i<cs.length;i++){if(cs[i]==cn){cs.splice(i,1)}}}/*通过节点寻找该节点的兄弟节点*/function nextSibling(obj,name){var ele=obj.nextSibling;//alert(typeof ele);for (;ele!=null; ele = ele.nextSibling) {/*将获得的值变成大写*/var nName = ele.nodeName.toLocaleLowerCase();/* 判断是否是想要的节点*/if (nName == name) {return ele;}}}function repeatElement(ele){var obj=nextSibling(ele,"img");while(obj!=null){/*alert(typeof obj);alert(obj.nodeName);alert(obj.src);*/addClass(obj,"sf");/*鼠标指到事件*/obj.onmouseover=function(){this.style.padding="10px 0px";}/*鼠标移开事件*/obj.onmouseout=function(){this.style.padding="3px 0px"}obj=nextSibling(obj,"img");}}window.onload = function(){//$("bu").onclick = function(){                repeatElement($("start"))}</script>
</head>
<body>
<div class="center"><div id="start"></div><!--<button id="bu">向下</button-->><img src="n1.jpg" /><img src="n2.jpg" /><span>ada</span><img src="n3.jpg" /><img src="n4.jpg" /><img src="n5.jpg" /><!--<button id="top">向上</button>-->
</div>
</body>
</html>

例：

转载于:https://www.cnblogs.com/dybe/p/8067643.html

js：nextSibling兄弟节点的使用相关推荐

html用js添加兄弟节点,jquery 删除节点添加节点找兄弟节点的简单实现
$().empty(); //该方法会删除当前节点下的所有子节点,请注意当前节点不会被删除 $().remove(); //该方法会删除当前节点下的所有子节点,请注意当前节点会被删除 $(). ...
html用js添加兄弟节点,JS简单添加元素新节点的方法示例
本文实例讲述了JS简单添加元素新节点的方法.分享给大家供大家参考,具体如下: www.jb51.net - JS添加新节点的几种方法 1234567890 //首先找到Id为d的元素 var d=do ...
JS获取子节点、父节点和兄弟节点的方法实例总结
本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名 ...
js父元素获取子元素img_JS获取子节点、父节点和兄弟节点的方法实例总结
本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名 ...
JS获取子节点、父节点和兄弟节点的方法
一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字.getElementsByTagName是一个方法.返回的是一个数组.在访问的时候要 ...
js与jquery获取子节点、父节点、兄弟节点的方法
js与jquery获取子节点.父节点.兄弟节点的方法在写代码时,时不时会遇到获取子节点.父节点等需要,但有的时候总是弄混淆不是很清晰,所以针对这些问题,总结了jquery与js获取节点的方法 js方 ...
js获取父子节点、兄弟节点
一.js获取子节点通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字.getElementsByTagName是一个方法.返回的是一个数组.在访问的时候要按数组的形式 ...
JS获取子节点、父节点和兄弟节点的若干种方式
一.js获取子节点的方式 1.通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字.getElementsByTagName是一个方法.返回的是一个数组.在访问的时候要按 ...
html 增加兄弟节点,html 子节点、父节点、兄弟节点获取
一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字.getElementsByTagName是一个方法.返回的是一个数组.在访问的时候要 ...

js：nextSibling兄弟节点的使用

js：nextSibling兄弟节点的使用相关推荐

最新文章

热门文章