操作DOM

• 常规意义上的 操作DOM , 就是增删改查

创建

• 创建 (创建完成以后,页面是不会有的)
  • 1
  • 2
  • 3

        // 1.1 创建 元素节点  createElement('要创建的元素')
        var myLi = document.createElement('li')
        // 1.2 创建文本节点   createTextNode('要创建的文本')
        var myStr = document.createTextNode('222222222222222')
        myLi.appendChild(myStr)

        console.log(myLi)             //页面没有显示 
        console.log(myStr)




         // 获取UL标签
        var oUl = document.querySelector('ul')
        var oLi = document.getElementsByTagName('li')[1]

        // 2.1 增加dom(添加到指定父节点的最后)
        oUl.appendChild(myLi)

        // 2.2 增加dom(添加到指定父节点的最后)  语法; 父节点.insertBefore(要插入的新节点, 插入到那个节点前(传递Null的话是插入到父节点最后))
        oUl.insertBefore(myLi, null)

        // 2.3 增加dom(添加到父节点的最前边)
        oUl.insertBefore(myLi, oUl.firstElementChild)

        // 3. 删除DOM   父节点.removeChild(要删除的节点)
        oUl.removeChild(oUl.firstElementChild)

        // 4. 修改某一个节点    父节点.replaceChild(新的节点, 要被修改的节点)
        oUl.replaceChild(myLi, oLi)

克隆

• 复制(克隆)一个 LI 想要复制的节点.cloneNode(参数布尔值) 参数 false 不克隆子节点 默认 参数 true 克隆子节点

        var oUl = document.querySelector('ul')
        var oLi = document.querySelector('li')

         var newLi = oLi.cloneNode(true)
         console.log(newLi)
         oUl.appendChild(newLi)