在IE8里获取第一个和最后一个子元素代码,Js代码库,德仔网

代码语言

代码分类

【Js】在IE8里获取第一个和最后一个子元素

作者:炎辉 / 发布于2018/3/22/ 887

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul id="ul">
        文本
        <!-- <li>li1</li> -->
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
        <li>li6</li>
    </ul>
    <script>
        var ul = document.getElementById("ul");
        // var childs = ul.childNodes;
        // for(var i=0;i<childs.length;i++){
        //     if(childs[i].nodeType===1){
        //         console.log(childs[i]);
        //         break;
        //     }
        // }
        // 封装获取第一个子元素
        function getFirstElement(element){
            // 检测浏览器能力
            if(element.firstElementChild === undefined){
                // 浏览器能力不通过
                var childs = element.childNodes;
                for(var i=0;i<childs.length;i++){
                    if(childs[i].nodeType===1){
                        return childs[i];
                    }
                }
            }else{
                // 浏览器能力通过
                return element.firstElementChild;
            }
        }
        var first = getFirstElement(ul);
        console.log(first);
        // 封装获取最后一个子元素
        function getLastElement(element){
            // 检测浏览器能力
            if(element.lastElementChild === undefined){
                // 浏览器能力不通过
                var childs = element.childNodes;
                for(var i=childs.length-1;i>=0;i--){
                    if(childs[i].nodeType===1){
                        return childs[i];
                    }
                }
            }else{
                // 浏览器能力通过
                return element.lastElementChild;
            }
        }
        var last = getLastElement(ul);
        console.log(last);
    </script>
</body>
</html>

试试其它关键字

同语言下

可能有用的

炎辉贡献的其它代码(10)