DOM-节点操作

节点操作

• 本质上针对标签本身的增删查

• 总结: 有明确的亲戚关系的时候, 使用查语法更加方便一些

• 查

  • 返回的都是dom对象

  • 查找父级: 子元素.parentNode

    • 查找最近的父级元素，返回是dom元素

  • 查找子集: 父元素.children

    • 伪数组

      • 遍历,不能使用forEach

  • 兄弟

    • nextElementSibling

      • 下一个兄弟元素

    • previousElementSibling

      • 上一个兄弟元素

节点-增

• 创建新节点

  • let result = document.createElement(标签名称)

  • 创建元素之后，还需要对元素设置内容和样式

    • 内容设置：innerText innerHTML
    • 属性设置： 元素.属性

• 追加节点

  • parent.appendChild(child)

    • 将child的元素添加到parent元素里面去(最后面)
    • append：追加，都是在最后面追加

  • parent.insertBofore(child, refChild)

    • 将child元素添加到refChild的前面去

      • ref：相对引用参照

    • 如果refChild元素获取不到, 会默认以appendChild形式添加

    • 一定要传递第二个参数，否则报错

  • 追加的节点可以是新创建的 也可以是页面上已经存在 (移动)

• 克隆节点

  • 模板元素.cloneNode(布尔值)

    • false: 浅拷贝

      • 只拷贝元素结构

    • true: 深拷贝

      • 拷贝元素结构及内容

    • 用于需要创建一个复杂的标签

      • 前提: 页面上有一个模板节点

删除节点

• parent.removeChild(child)：通过父元素删除直接子元素
• element.remove():删除元素本身

日期对象

• 1. 获取日期对象

  • new Date()

• 2. 获取日期对象的每一个部分

  • getFullYear()
  • getMonth() + 1
  • getDate()
  • getHours()
  • getMinutes()
  • getSeconds()

• 3. 补0函数的制作

  • 将小于10的数值连上一个字符串的0

• 综合案例： 倒计时

综合案例-微博发布案例

      // 模拟数据，后期我们需要从这个数组中随机获取一个数据对象，做为发布微博的用户信息进行渲染，但是这个不是关键业务，我也可以固定写死
      let dataArr = [
        { uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
        { uname: '女娲', imgSrc: './images/9.5/02.jpg' },
        { uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
        { uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
        { uname: '虞姬', imgSrc: './images/9.5/05.jpg' }
      ]

      // 1.获取元素
      let send = document.querySelector('#send') // 发布按钮
      let area = document.querySelector('#area') // 文本域
      let useCount = document.querySelector('#useCount') // 数字展示
      let list = document.querySelector('#list') // 列表结构

      area.focus()

      // 2.实现微博的基本发布
      send.addEventListener('click', function() {
        // 2.1 收集用户输入的内容
        let content = area.value.trim()
        // 添加用户输入内容的判断
        if (content.length == 0) {
          alert('不要乱搞嘛')
          return
        }
        // 2.2 创建一个li元素
        let li = document.createElement('li')

        // 2.3 随机获取一个用户信息，做为渲染的数据来源
        let index = parseInt(Math.random() * dataArr.length)

        // 2.4 根据用户的输入生成li元素的内容
        li.innerHTML = `<div class="info">
                          <img class="userpic" src="${dataArr[index].imgSrc}" />
                          <span class="username">${dataArr[index].uname}</span>
                          <p class="send-time">发布于 ${dateFormat()}</p>
                        </div>
                        <div class="content">${content}</div>
                        <span class="the_del">X</span>`
        // 2.5 将创建的li元素插入到指定的容器中
        list.insertBefore(li, list.children[0])

        // 为删除按钮绑定事件
        let the_del = document.querySelector('.the_del')
        the_del.addEventListener('click', function() {
          // the_del.parentNode.remove()
          // list.removeChild(li)
          list.removeChild(the_del.parentNode)
        })

        // 发布之后，清空输入框
        area.value = ''
      })

      // 3.添加输入框内容变化的监听
      area.addEventListener('input', function() {
        // area.value = area.value.trim()
        useCount.innerText = area.value.trim().length
      })
      // 封装一个函数，用于日期格式化
      let dateFormat = function() {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours()
        let minute = date.getMinutes()
        let second = date.getSeconds()

        return `${year}-${month}-${day} ${hour}:${minute}:${second}`
      }
    </script>