JavaScript-dom3

Posted zhang_kk

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript-dom3相关的知识,希望对你有一定的参考价值。

访问关系-封装代码

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的主要内容,如果未能解决你的问题,请参考以下文章

javascript-DOM

JavaScript-DOM节点

JavaScript-DOM(九九乘法表)——两种算法

13-javascript-DOM操作的相关案例

网站前端_JavaScript-DOM编程.0002.JavaScriptDom编码原则?

JavaScript-DOM(文档对象模型)