JavaScript節點操作

2020-10-12 16:00:28

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的父級節點