JavaScript封装节点兼容代码-优快云博客

本文介绍了一种兼容不同浏览器的方法来获取HTML元素的第一个和最后一个子元素。通过编写JavaScript函数实现跨浏览器兼容，解决了因浏览器差异导致的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id="uu">
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>四五个</li>
</ul>
<script src="common.js"></script>
<script>
    //element.firstChild--->谷歌火狐获取的是第一个子节点
    //element.firstChild--->IE8获取的是第一个子元素
    //element.firstElementChild--->谷歌和火狐获取的是第一个子元素,IE8不支持
    //获取任意一个父级元素的第一个子级元素
    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;
        }
    }

    //获取任意一个父级元素的最后一个子级元素
    function getLastElementChild(element) {
        if (element.lastElementChild) {
            return element.lastElementChild;
        } else {
            var node = element.lastChild;
            while (node && node.nodeType != 1) {
                node = node.previousSibling;
            }
            return node;
        }
    }

    //测试
    console.log(getFirstElementChild(my$("uu")).innerText);
    console.log(getLastElementChild(my$("uu")).innerText);
</script>
</body>
</html>