首页 > 编程语言 > 详细

JavaScript-dom3

时间:2018-03-16 13:17:02      阅读:203      评论:0      收藏:0      [点我收藏+]

访问关系-封装代码

html

<!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;
}

 

JavaScript-dom3

原文:https://www.cnblogs.com/zhangkui/p/8580396.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!