获取兄弟节点和兄弟元素
例子：
//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));
