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

最新推荐文章于 2023-10-24 17:55:40 发布

约德尔蒙

最新推荐文章于 2023-10-24 17:55:40 发布

阅读量2.3k

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/gyq04551/article/details/53242142

版权

Js 专栏收录该内容

64 篇文章 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>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js访问关系简单封装(getElement) 排他思想原理

li { width: 100px; height: 100px; background-color: pink; margin: 5px; list-style: none; }
复制链接

扫一扫