访问关系-封装代码
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>
tool.js
function getEle(id) {
return document.getElementById(id)
}
/**
* 功能：给指定元素查找它的第一个元素子节点，并返回
* @param ele
* @returns {Element | (() => Node) | ActiveX.IXMLDOMNode | Node | SVGElementInstance}
*/
function getFirstNode(ele) {
var node = ele.firstElementChild || ele.firstChild;
return node;
}
/**
* 功能：给指定元素查找它的最后一个元素子节点，并返回
* @param ele
* @returns {Element | ActiveX.IXMLDOMNode | Node | SVGElementInstance | (() => Node)}
*/
function getLastNode(ele) {
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能：给定元素查找他的下一个元素兄弟节点，并返回
* @param ele
* @returns {Element | null | Node | SVGElementInstance | ActiveX.IXMLDOMNode | (() => Node)}
*/
function getNextNode(ele) {
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能：给定元素查找他的上一个元素兄弟节点，并返回
* @param ele
* @returns {Element | null | Node | SVGElementInstance | ActiveX.IXMLDOMNode | (() => Node)}
*/
function getPrevNode(ele) {
return ele.previousElementSibling || ele.previousSibling;
}
/**
* 功能：给定元素和索引值查找指定索引值的兄弟节点，并返回
* @param ele
* @param index
* @returns {Element}
*/
function getEleOfIndex(ele,index) {
return ele.parentNode.children[index];
}
/**
* 功能：给定元素查找它的所用兄弟元素，并返回数组
* @param ele
*/
function getAllSiblings(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]);
}
}
return newArr;
}