<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 封装兼容函数 </title>
</head>
<body>
<!-- 封装思想：一段代码可能多个地方要使用，就把这段代码封装成函数
封装基本步骤：
1.把相同代码直接当做函数体拷贝到函数里
2.不能写死的数据当形参传进来 -->
<ul>
<!-- <span>专业写bug</span> -->
<li id="li1">隔壁老王1</li>
<li>隔壁老王2</li>
<li id="li3">隔壁老王3</li>
<li>隔壁老王4</li>
<li id="li5">隔壁老王5</li>
<li>隔壁老王6</li>
</ul>
<!-- 调用兼容js -->
<script src="jianRong.js"></script>
<script>
// 找到元素
var li3 = document.getElementById('li3');
// 获取上一个兄弟元素
var li3 = shangJian(li3);
console.log('获取上一个兄弟元素 : ' + li3.innerHTML);
// console.log(li3);
// 获取上一个兄弟元素 : <li>隔壁老王2</li>
// 获取下一个兄弟元素
var li5 = document.getElementById('li5');
var li5 = xiaJian(li5);
// console.log("获取下一个兄弟元素 : " + li5);
console.log(li5);
// function shangJian(add) {
// var jian = add.previousSibling;
// // 如果node不等于null 而且还不等于标签，那么就继续往上找
// // 因为如果等于null代表找到头了，没必要再往上找
// while (jian != null && jian.nodeType != 1) {
// //不是标签要继续找上一个的上一个
// jian = jian.previousSibling;
// }
// return jian;
// }
// function xiaJian(add) {
// //先取下一个兄弟节点
// var jian = add.nextSibling;
// while (jian != null && jian.nodeType != 1) {
// //继续往下找
// jian = jian.nextSibling;
// }
// return jian;
// }
</script>
</body>
</html>
下面是js封装的内容:
/**
* 获取上一个兄弟元素兼容方法
*/
function shangJian(add) {
var jian = add.previousSibling;
// 如果node不等于null 而且还不等于标签，那么就继续往上找
// 因为如果等于null代表找到头了，没必要再往上找
while (jian != null && jian.nodeType != 1) {
//不是标签要继续找上一个的上一个
jian = jian.previousSibling;
}
return jian;
}
/**
* 找到下一个兄弟元素兼容写法
*/
function xiaJian(add1) {
//先取下一个兄弟节点
var jian1 = add1.nextSibling;
while (jian1 != null && jian1.nodeType != 1) {
//继续往下找
jian1 = jian1.nextSibling;
}
return jian1;
}
网友评论