访问关系-封装代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>访问关系封装</title>
<style>
li{
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li id="box"></li>
<li></li>
<li></li>
</ul>
<script src="tools.js"></script>
<script>
//获取box改为red
var box = getEle("box");
box.style.backgroundColor="red";
//获取第一个和最后一个子节点
var parent = box.parentNode;
getFirstNode(parent).style.backgroundColor="yellow";
getLastNode(parent).style.backgroundColor="yellow";
//获取上一个下一个兄弟节点
getNextNode(box).style.backgroundColor="blue";
getPrevNode(box).style.backgroundColor="blue";
//指定兄弟节点
getEleOfIndex(box,0).style.backgroundColor="green";
getEleOfIndex(box,1).style.backgroundColor="green";
//获取所有的兄弟节点
var arr = getAllSiblings(box);
for(var i=0;i<arr.length;i++){
arr[i].style.backgroundColor = "black";
}
// //父节点
// div.parentNode;
//
// //兄弟节点
// div.previousSibling;
// div.previousElementSibling;
// div.nextSibling;
// div.nextElementSibling;
//
// //单个子节点
// div.firstChild;
// div.firstElementChild;
// div.lastChild;
// div.lastElementChild;
//
// //所有子节点
// div.childNodes;
// div.children;
//
// //获取指定的兄弟节点
// div.parentNode.children[index];
//
// //获取所有的兄弟节点
// function fn(ele) {
// var newArr = [];
// var arr = ele.parentNode.children;
// for (var i = 0; i < arr.length; i++) {
// //如果不是ele元素本身，添加到新数组，老数组里面包含的ele
// if (ele !== arr[i]) {
// newArr.push(arr[i]);
// }
// }
// }
</script>
</body>
</html>
<!DOCTYPE html>
<html la
