JS 兄弟元素和兄弟节点

获取兄弟节点和兄弟元素

例子：

  //body内容<ul id="ul">wwwwww<!-- 我是注释 --><li>我是li标签1</li><li id="li2">我是li标签2</li><li>我是li标签3</li><li>我是li标签4</li><li>我是li标签5</li></ul>//js内容// 获取元素var ul = document.getElementById("ul");var li2 = document.getElementById("li2");

1.获取兄弟节点
语法：
上一个节点：元素.previousSibling
下一个节点：元素.nextSibling

    // 上一个节点console.log(li2.previousSibling);  // 文本节点// 下一个节点console.log(li2.nextSibling);  // 文本节点

2.获取兄弟元素 :
语法：
上一个元素：元素.previousElementSibling
下一个元素：元素.nextElementSibling

 //上一个元素console.log(li2.previousElementSibling);// 下一个元素console.log(li2.nextElementSibling);

谷歌火狐等浏览器运行 : √ (可以)

IE8及以下浏览器 : × (不行)

原因 :

IE8不支持获取兄弟元素的操作, 执行得到的undefined,
而且在IE8里面没有任何替代方案
IE8要获取兄弟元素只能通过节点获取
获取上一个兄弟元素的封装

*怎么获取兼容性封装呢？

    @param  ele  : 需要查找的目标参数@return  node  : 返回的是一个元素节点

*获取上一个兄弟元素的封装

function getPreviousElement(ele) {// 能力检测if(ele.previousElementSibling)  {  // 谷歌火狐return ele.previousElementSibling;} else {  // IE8// 获取上一个节点  :  null  元素  文本  注释var node = ele.previousSibling;            // 循环次数不确定// 1. node必须存在, 不是null,  2. node不是元素节点while(node != null && node.nodeType != 1) {node =  node.previousSibling}// node == null  或者  node.nodeType == 1return node;}}console.log(getPreviousElement(li2));

*获取下一个元素的兼容性封装

同理

 function getNextElement(ele) {// 能力检测if(ele.nextElementSibling)  {  // 谷歌火狐return ele.nextElementSibling;} else {  // IE8// 获取上一个节点  :  null  元素  文本  注释var node = ele.nextSibling;            // 循环次数不确定// 1. node必须存在, 不是null,  2. node不是元素节点while(node != null && node.nodeType != 1) {node =  node.nextSibling}// node == null  或者  node.nodeType == 1return node;}}console.log(getnextElement(li2));

JS 兄弟元素和兄弟节点相关推荐

js 获取元素所有兄弟节点实例
现在在js中要获取兄弟节点有两种常用的方法,一种是利用js来遍历,另一种是利用jquery来获取,下面小编来给大家介绍一下. 比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色, ...
css设置兄弟元素样式-兄弟选择器
有一种选择器就叫兄弟元素选择器,分为临近兄弟和普通兄弟. 临近兄弟(相邻):用 + 表示,只匹配该元素后边的第一个同级元素. 普通兄弟:用 - 表示,匹配该元素后边的所有同级元素. 1.相邻兄弟元素 ...
jq遍历子元素_jquery:::选择器/遍历/获取所有的子元素、兄弟元素
jquery是一个基于javascript的轻量级工具包,是基于javascript的函数库,它使得javascript开发更加高效快捷. 1,jquery的选择器分为: 基本选择器(又分为id选择器 ...
html 获取下一个兄弟节点,js jquery获取当前元素的兄弟级上一个下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
class 原生js获取父元素_JS获取节点的兄弟,父级,子级元素的方法
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素原生的J ...
js和jquery获取父级元素、子级元素、兄弟元素的方法{转}
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素原生的JS ...
js和jquery获取父级元素、子级元素、兄弟元素的方法
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素原生的JS ...
js获取对象的父元素,子元素,兄弟元素
今天测试我昨天写好的js插件,发现昨天考虑欠妥,导致[修改]做不了了!主要原因是我以前都是遍历表格,在每条记录后面添加修改按钮.现在用局部刷新表格的方法,每次都自动生成表格内容,以致于无法在记录后面生 ...
js与jquery获取子节点、父节点、兄弟节点的方法
js与jquery获取子节点.父节点.兄弟节点的方法在写代码时,时不时会遇到获取子节点.父节点等需要,但有的时候总是弄混淆不是很清晰,所以针对这些问题,总结了jquery与js获取节点的方法 js方 ...

JS 兄弟元素和兄弟节点

获取兄弟节点和兄弟元素

*怎么获取兼容性封装呢？

JS 兄弟元素和兄弟节点相关推荐

最新文章

热门文章