访问关系-封装代码
<!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; }