节点操作

DOM树里每一个内容都称之为节点

节点类型

1. 元素节点
2. 属性节点
3. 文本节点

查找节点

父节点查找

子元素.parentNode

  let icon = document.querySelectorAll('i')

        for (let index = 0; index < icon.length; index++) {
            icon[index].addEventListener('click', function() {
                console.log('1');
                this.parentNode.style.display = 'none'
            })

        }

子节点查找

1. 父元素.children

   仅获得所有元素节点 返回的还是一个伪数组

2. 父元素.childNodes

   获得所有子节点、包括文本节点（空格、换行）、注释节点等

 let ulList = document.querySelectorAll('ul');
        for (let i = 0; i < ulList.length; i++) {
            ulList[i].addEventListener('click', function() {
                for (let index = 0; index < this.children.length; index++) {
                    this.children[index].style.display = 'none'
                }
            })
        }

增加节点

创造新节点

let newNode=document.createElement('div')

追加节点(父元素.append)

插入到父元素的最后一个子元素

 li.append(info, content, span2)//追加多个
 ul.appendChild(li)//追加一个

插入到父元素中某个子元素的前面(父元素.insertbefore(要插入的元素,在哪个元素的前面))

 li.isertbefore(p,div)

节点克隆（cloneNode)

 let div = document.querySelector('div')

        // let newDiv = div.cloneNode()浅度克隆
        let newDiv = div.cloneNode(true)//深度克隆
        document.body.appendChild(newDiv)

删除节点(remove)

ul.remove()//删除自身
ul.removeChild(li)//删除里面某个子元素