JS dom节点实现移上、移下的效果（表格）

比眉伴天荒 2023-07-18 02:34 109阅读 0赞

**如何用DOM节点去实现表格内容移上 移下的效果，我们这里需要了解两个知识点！**

## previousSibling ##

属性返回选定节点的上一个同级节点（在相同树层级中的前一个节点）  
返回节点以节点对象返回

语法：document.getElementById("tr").previousSibling

注意：如果不存在这样的节点，则该属性返回 null

**Exp:**

1.  previoussibling获取的兄弟节点是所有节点，包括文本节点
2.  previouselementsibling获取的的兄弟节点是元素节点

## nextSibling ##

nextSibling 属性可返回某个元素之后紧跟的节点（处于同一树层级中）  
返回节点以节点对象返回

语法：document.getElementById("tr").nextSibling

注意： 如果元素紧跟后面没有节点则返回 null

**Exp:**

1.  nextSibling属性与nextElementSibling属性的差别：
2.  nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）
3.  nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）

## 页面布局： ##

**局部代码示例：**

![局部代码示例][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70_pic_center]  
接下来我们将用previousSibling和nextSibling去实现我们表格移上移下的效果

1.  获取表格元素
    
        var tables = document.getElementById("tables");
2.  函数定义向上移动

function previousNode(temp) {
                // 判断
                if (!temp.previousSibling) {
                    return false;
                }
                // 返回值
                return temp.previousElementSibling || 		(temp.previousSibling.nodeType == 1 ? temp.previousSibling : previousNode(temp.previousSibling));
            }

1.  点击向上移动按钮

>     function movelastr() {
>             // 获取向上移动按钮
>             var movelast = document.querySelectorAll(".movelast")
>             //点击向上移动按钮时
>             for (let i = 0; i < movelast.length; i++) {
>                 movelast[i].onclick = function () {
>                     // 阻止元素移动到表头上
>                     var summer = this.parentNode.parentNode.innerHTML == tables.children[0].children[1].innerHTML ? true : false;
>                     //向上一节点插入节点
>                     var prevLast = previousNode(this.parentNode.parentNode);
>                     // 判断
>                     if (!prevLast || summer) {
>                         alert("无法再向上移动！");
>                     } else {
>                         // 插入节点
>                         tables.children[0].insertBefore(this.parentNode.parentNode, prevLast);
>                     }
>                 }
>             }
>         }

这样，DOM节点就能在点击向上移动按钮后，表格内点击的那行内容向上移动，那么向下移动就与向上移动的代码内容大同小异了！

**具体的代码内容请前往 >>**  
[https://download.csdn.net/download/qq\_44624386/12264802][https_download.csdn.net_download_qq_44624386_12264802]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/b0dd1f10301447769aff27ed1e2d2ffa.png
[https_download.csdn.net_download_qq_44624386_12264802]: https://download.csdn.net/download/qq_44624386/12264802