js学习第十二天

节点操作 (增  删  改  查)

通过节点关系查找元素

1  元素.parentNode

 document.querySelector('.close').addEventListener('click', function () {
        this.parentNode.style.display = 'none'
      })

2 获取子节点 元素.children

 const ul = document.querySelector('ul')
      console.log(Array.isArray(ul.children))
      console.log(ul.children) // 伪数组 本质是对象 {0:...,1:***, length:20}
      console.log(ul.childNodes) // 了解   所有儿子 包括文本节点
      for (let i = 0; i < ul.children.length; i++) {
        console.log(ul.children[i])
      }

3 兄弟节点

 const country = document.querySelector('ul  li:nth-child(2)')
      console.log(country.previousSibling) // 了解
      console.log(country.previousElementSibling) // 上一个兄弟
      console.log(country.nextElementSibling) // 下一个兄弟

删除元素

删除元素 元素.remove()

const ul = document.querySelector('ul')
      // ul.children[1].remove() '自杀' -> DOM树上不存在该元素
      // ul.removeChild(ul.children[1]) 父亲删除孩子
      // ul.children[1].style.display = 'none' // -> 元素隐藏，DOM树上还存在

      document.querySelector('button').addEventListener('click', function () {
        const r = confirm('你确定要删除吗？') // 提示确认框
        r && ul.children[1].remove()
      })

鼠标移入事件

mouseennter(推荐用) mouseover