js访问关系简单封装(getElement) 排他思想原理

古城微笑少年丶 2022-07-13 23:16 149阅读 0赞

<!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 = "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++){
            //            //判断，如果不是传递过来的元素本身，那么添加到新数组中。
            //            if(arr[i]!==ele){
            //                newArr.push(arr[i]);
                            newArr[newArr.length] = arr[i];
            //            }
            //        }
            //        return newArr;
            //    }
    
    //-----------------------toools封装源代码--------------------

/**
     * Created by Lenovo on 2016/9/2.
     */
    
    
    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;
    }
    //--------------------------排他思想-------------------------------
                // 干掉所有人 最后留下自己 this调用自己
                //1.获取事件源
                //            var ul = getEle("list");
                //            var liArr = ul.children;
                //            //2.绑定事件
                //            for(var i=0;i<liArr.length;i++){
                //                var a = getFirstNode(liArr[i]);
                //                a.onclick = function () {
                //                    //3.书写事件驱动程序
                //                    //排他思想
                //                    for(var j=0;j<liArr.length;j++){
                //                        liArr[j].className = "";
                //                    }
                //                    this.parentNode.className = "current";
                //                }
                //            }
    //            }
    </script>
    </body>
    </html>