节点操作 鼠标移入

节点

网页中的所有内容都是节点（如：标签、属性、文本、注释等），在DOM 中，节点使用 node

来表示。HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）

均可被修改、创建或删除

节点操作(增  删  改  查)

通过节点关系查找元素 父亲    语法：元素.parentNode

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

获取子节点    语法：元素.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])
      }

兄弟节点

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

<textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布评论</button>
    <ul class="comment"></ul>

      // 获取相关元素
      const tarea = document.querySelector('textarea')
      const btn = document.querySelector('button')
      const comment = document.querySelector('.comment')
      // 注册事件
      btn.addEventListener('click', function () {
        // 1 获取文本域内容
        let txt = tarea.value.trim()
        if (txt === '') return
        // 检测敏感词汇 sb
        let index = txt.indexOf('sb')
        while (index !== -1) {
          txt = txt.replace('sb', '**')
          index = txt.indexOf('sb')
        }
        // 2 创建元素
        const li = document.createElement('li')
        
        li.innerHTML = txt
        // 3 把li添加到ul
        // comment.appendChild(li)
        comment.append(li)
        //comment.prepend(li) // 在父元素的第一个子元素之前添加
        // 4 清空文本域
        tarea.value = ''
      })

删除元素 元素.remove()

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

touchstart触摸开始

  let startX = 0
      document
        .querySelector('.box')
        .addEventListener('touchstart', function (e) {
          startX = e.changedTouches[0].pageX
          console.log('触摸开始')
        })

touchmove一直触摸

document
        .querySelector('.box')
        .addEventListener('touchmove', function (e) {
          const diff = e.changedTouches[0].pageX - startX
          console.log(diff > 0 ? '右滑' : '左滑')
          console.log('一直触摸')
        })

touchend触摸结束

document.querySelector('.box').addEventListener('touchend', function () {
        console.log('触摸结束')
      })