咸鱼前端—js 节点兼容代码

最新推荐文章于 2020-04-08 21:40:42 发布

咸鱼桨

最新推荐文章于 2020-04-08 21:40:42 发布

阅读量164

点赞数

分类专栏： # javascript 前端文章标签： javascript js 节点兼容

本文链接：https://blog.csdn.net/weixin_45020839/article/details/104827661

版权

前端同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

javascript

26 篇文章 0 订阅

订阅专栏

咸鱼前端—js 节点兼容代码

获取父级元素中的第一个子元素

/**
 * @param element 父级元素
 * @returns {*} 父级元素中的子级元素
 */
function getFirstElement(element) {
    if (element.firstElementChild) {//ture 支持
        return element.firstElementChild;
    } else {
        var node = element.firstChild;
        while (node && node.nodeType != 1) {//1元素 2属性 3文本
            node = node.nextSibling;
        }
        return node;
    }
}

案例：控制台输出第一个子元素，兼容谷歌火狐 IE8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    var my$=function(id){
        return document.getElementById(id)
    }
    function getFirstElementChild(element) {
        if (element.firstElementChild) {//true--->支持
            return element.firstElementChild;
        } else {
            var node = element.firstChild;//第一个节点
            while (node && node.nodeType != 1) {
                node = node.nextSibling;
            }
            return node;
        }
    }
    console.log(getFirstElementChild(my$("test")).innerText);

</script>
</body>
</html>

获取父级元素中的最后一个子元素

/**
 * @param element 父级元素
 * @returns {*} 最后一个子元素
 */
function getLastElement(element) {
    if (element.lastElementChild) {
        return element.lastElementChild;
    } else {
        var node = element.lastChild;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}

获取某个元素的前一个兄弟元素

/**
 * @param element 某个元素
 * @returns {*} 前一个兄弟元素
 */
function getPreviousElement(element) {
    if (element.previousElementSibling) {
        return element.previousElementSibling
    } else {
        var node = element.previousSibling;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}

获取某个元素的后一个兄弟元素

/** 
 * @param element 某个元素
 * @returns {*} 后一个兄弟元素
 */
function getNextElement(element) {
    if (element.nextElementSibling) {
        return element.nextElementSibling
    } else {
        var node = element.nextSibling;
        while (node && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}

获取某个元素的所有兄弟元素

/** 
 * @param element 某个元素
 * @returns {Array} 兄弟元素
 */
function getSiblings(element) {
    if (!element)return;
    var elements = [];
    var ele = element.previousSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);
        }
        ele = ele.previousSibling;
    }
    ele = element.nextSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);

        }
        ele = ele.nextSibling;
    }
    return elements;
}