JavaScript节点操作

JavaScript节点操作

// 父级节点
        var par = li.parentNode

        // 所有儿子节点
        var all_child = li.children

        // 第一个(最后一个子节点)
        var fir = li.firstChild
        var las = li.lastChild

        // 第一个子元素(最后一个)节点
        var fir_element = li.firstElementChild
        var las_element = li.lastElementChild

        // 兄弟节点

        // 返回下一个列表选项的 HTML 内容：
        var bor = li.nextElementSibling
        // 返回上一个列表选项的 HTML 内容：
        var bor = li.previousElementSibling
        // 返回列表项的下一个同胞：
        var bor2 = li.nextSibling
        // 返回列表项的上一个同胞
        var bor2 = li.previousSibling

        // 创建节点

        var news = document.createElement('li')

        //添加节点

        // 添加节点到指定父节点的子节点列表末尾
        node.appendChild(child)

        // 添加节点到指定父节点的子节点列表前面
        node.insertBefore(child, 指定元素)

        // 插入节点

        li.insertAdjacentElement('位置', 元素)
        // beforeBegin: 插入到标签开始前
        // afterBegin: 插入到标签开始标记之后
        // beforeEnd: 插入到标签结束标记前
        // afterEnd: 插入到标签结束标记后

        // 删除节点

        li.parentNode.remove()   // 删除li的父级节点