利用dom节点实现上移下移

最新推荐文章于 2024-07-08 14:13:37 发布

Future_object

最新推荐文章于 2024-07-08 14:13:37 发布

阅读量2k

点赞数

分类专栏： js 文章标签： dom 上移下移

本文链接：https://blog.csdn.net/qq_39634880/article/details/80382833

版权

js 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    </head>
<body>
    <ul>
        <li>1.
            <input type="button" value="上移" />
            <input type="button" value="下移" />
        </li>
        <li>2.
            <input type="button" value="上移" />
            <input type="button" value="下移" />
        </li>
        <li>3.
            <input type="button" value="上移" />
            <input type="button" value="下移" />
        </li>
        <li>4.
            <input type="button" value="上移" />
            <input type="button" value="下移" />
        </li>
        <li>5.
            <input type="button" value="上移" />
            <input type="button" value="下移" />
        </li>
        </ul>
    <script>
        var aInput = document.getElementsByTagName('input');
        var oUl = document.getElementsByTagName('ul')[0];
        for (var i = 0; i < aInput.length; i++) {
            if (i % 2 == 0) { //上移
                aInput[i].onclick = function () {
                    var nowLi = this.parentNode;
                    var prevLi = previousNode(nowLi);
                    if (!prevLi) {
                        alert('到头了');
                    } else {
                        oUl.insertBefore(nowLi, prevLi);
                    }
                };
            } else //下移
            {
                aInput[i].onclick = function () {
                    var nowLi = this.parentNode;
                    var nextLi = nextNode(nowLi);
                    if (!nextLi) {
                        alert('到尾了');
                    } else {
                        oUl.insertBefore(nextLi, nowLi);
                    }
                };
            }
        }
        function firstNode(obj) {
            if (!obj.firstChild) {
                return false;
            }
            return obj.firstElementChild || (obj.firstChild.nodeType == 1 ? obj.firstChild : nextNode(obj.firstChild));
        }
        function lastNode(obj) {
            if (!obj.lastChild) {
                return false;
            }
            return obj.lastElementChild || (obj.lastChild.nodeType == 1 ? obj.lastChild : previousNode(obj.lastChild));
        }
        function nextNode(obj) {
            if (!obj.nextSibling) {
                return false;
            }
            return obj.nextElementSibling || (obj.nextSibling.nodeType == 1 ? obj.nextSibling : nextNode(obj.nextSibling));
        }
        function previousNode(obj) {
            if (!obj.previousSibling) {
                return false;
            }
            return obj.previousElementSibling || (obj.previousSibling.nodeType == 1 ? obj.previousSibling : previousNode(obj.previousSibling));
        }
    </script> 
</body>
</html>