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

    # 访问关系的函数封装

    （1）函数封装

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

    tools.js:

    /**
 * Created by smyhvae on 2018/01/28.
 */

function getEle(id){
    return document.getElementById(id);
}

/**
 * 功能：给定元素查找他的第一个元素子节点，并返回
 * @param ele
 * @returns {Element|*|Node}
 */
function getFirstNode(ele){
    var node = ele.firstElementChild || ele.firstChild;
    return node;
}

/**
 * 功能：给定元素查找他的最后一个元素子节点，并返回
 * @param ele
 * @returns {Element|*|Node}
 */
function getLastNode(ele){
    return ele.lastElementChild || ele.lastChild;
}

/**
 * 功能：给定元素查找他的下一个元素兄弟节点，并返回
 * @param ele
 * @returns {Element|*|Node}
 */
function getNextNode(ele){
    return ele.nextElementSibling || ele.nextSibling;
}

/**
 * 功能：给定元素查找他的上一个兄弟元素节点，并返回
 * @param ele
 * @returns {Element|*|Node}
 */
function getPrevNode(ele){
    return ele.previousElementSibling || ele.previousSibling;
}

/**
 * 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回
 * @param ele 元素节点
 * @param index 索引值
 * @returns {*|HTMLElement}
 */
function getEleOfIndex(ele,index){
    return ele.parentNode.children[index];
}

/**
 * 功能：给定元素查找他的所有兄弟元素，并返回数组
 * @param ele
 * @returns {Array}
 */
function getAllSiblings(ele){
    //定义一个新数组，装所有的兄弟元素，将来返回
    var newArr = [];
    var arr = ele.parentNode.children;
    for(var i=0;i<arr.length;i++){
        //判断：对同级的所有元素节点进行遍历，如果不是传递过来的元素自身，那就是兄弟元素，于是添加到新数组中。
        if(arr[i]!==ele){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73

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

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

    （2）函数的调用举例：

    <!DOCTYPE html>
<html>
<head lang="en">
    <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";

    //获取所有的兄弟节点（返回值是数组，所以用for循环操作）
    var arr = getAllSiblings(box);
    for(var i=0;i<arr.length;i++){
        arr[i].style.backgroundColor = "green";
    }

</script>
</body>
</html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55

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