05-DOM操作练习：访问关系的封装

访问关系的函数封装

（1）函数封装

新建一个文件名叫tools.js，然后在里面封装访问关系。代码如下。

tools.js:

  1. /**
  2.  * Created by smyhvae on 2018/01/28.
  3.  */
  5. function getEle(id){
  6.     return document.getElementById(id);
  7. }
  9. /**
  10.  * 功能：给定元素查找他的第一个元素子节点，并返回
  11.  * @param ele
  12.  * @returns {Element|*|Node}
  13.  */
  14. function getFirstNode(ele){
  15.     var node = ele.firstElementChild || ele.firstChild;
  16.     return node;
  17. }
  19. /**
  20.  * 功能：给定元素查找他的最后一个元素子节点，并返回
  21.  * @param ele
  22.  * @returns {Element|*|Node}
  23.  */
  24. function getLastNode(ele){
  25.     return ele.lastElementChild || ele.lastChild;
  26. }
  28. /**
  29.  * 功能：给定元素查找他的下一个元素兄弟节点，并返回
  30.  * @param ele
  31.  * @returns {Element|*|Node}
  32.  */
  33. function getNextNode(ele){
  34.     return ele.nextElementSibling || ele.nextSibling;
  35. }
  37. /**
  38.  * 功能：给定元素查找他的上一个兄弟元素节点，并返回
  39.  * @param ele
  40.  * @returns {Element|*|Node}
  41.  */
  42. function getPrevNode(ele){
  43.     return ele.previousElementSibling || ele.previousSibling;
  44. }
  46. /**
  47.  * 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回
  48.  * @param ele 元素节点
  49.  * @param index 索引值
  50.  * @returns {*|HTMLElement}
  51.  */
  52. function getEleOfIndex(ele,index){
  53.     return ele.parentNode.children[index];
  54. }
  56. /**
  57.  * 功能：给定元素查找他的所有兄弟元素，并返回数组
  58.  * @param ele
  59.  * @returns {Array}
  60.  */
  61. function getAllSiblings(ele){
  62.     //定义一个新数组，装所有的兄弟元素，将来返回
  63.     var newArr = [];
  64.     var arr = ele.parentNode.children;
  65.     for(var i=0;i<arr.length;i++){
  66.         //判断：对同级的所有元素节点进行遍历，如果不是传递过来的元素自身，那就是兄弟元素，于是添加到新数组中。
  67.         if(arr[i]!==ele){
  68.             newArr.push(arr[i]);
  69.         }
  70.     }
  71.     return newArr;
  72. }

上方代码中，我们单独来重视一下最后一个方法：获取指定元素的兄弟元素：

  1. /**
  2.  * 功能：给定元素查找他的所有兄弟元素，并返回数组
  3.  * @param ele
  4.  * @returns {Array}
  5.  */
  6. function getAllSiblings(ele){
  7.     //定义一个新数组，装所有的兄弟元素，将来返回
  8.     var newArr = [];
  9.     var arr = ele.parentNode.children;
  10.     for(var i=0;i<arr.length;i++){
  11.         //判断：对同级的所有元素节点进行遍历，如果不是传递过来的元素自身，那就是兄弟元素，于是添加到新数组中。
  12.         if(arr[i]!==ele){
  13.             newArr.push(arr[i]);
  14.         }
  15.     }
  16.     return newArr;
  17. }

（2）函数的调用举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         li {
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: pink;
  11.             margin: 5px;
  12.             list-style: none;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  18. <ul>
  19.     <li></li>
  20.     <li></li>
  21.     <li id="box"></li>
  22.     <li></li>
  23.     <li></li>
  24. </ul>
  25. <script src="tools.js"></script>
  26. <script>
  28.     //获取box改为red
  29.     var box = getEle("box");
  30.     box.style.backgroundColor = "red"
  32.     //获取第一个和最后一个子节点
  33.     var parent = box.parentNode;
  34.     getFirstNode(parent).style.backgroundColor = "yellow";
  35.     getLastNode(parent).style.backgroundColor = "yellow";
  37.     //获取上一个和下一个兄弟节点
  38.     getNextNode(box).style.backgroundColor = "blue";
  39.     getPrevNode(box).style.backgroundColor = "blue";
  42.     //指定兄弟节点
  43.     getEleOfIndex(box,0).style.backgroundColor = "green";
  44.     getEleOfIndex(box,1).style.backgroundColor = "green";
  46.     //获取所有的兄弟节点（返回值是数组，所以用for循环操作）
  47.     var arr = getAllSiblings(box);
  48.     for(var i=0;i<arr.length;i++){
  49.         arr[i].style.backgroundColor = "green";
  50.     }
  52. </script>
  53. </body>
  54. </html>

注意：上方代码中，我们引用到了tools.js这个工具类。