web api第三天-DOM节点-时间对象DOM节点 dom节点 dom树里每一个内容都称为节点节点类型元素节点所

DOM节点

dom节点
- dom树里每一个内容都称为节点
节点类型
- 元素节点
  - 所有的标签比如body，div
  - html是根节点
- 属性节点
  - 所有属性比如 href
- 文本节点
  - 所有的文本
- 其他

查找节点

父节点查找

parentNode属性

返回最近一级的父节点，找不到则返回为null

子元素.parentNode

子节点查找

childNodes

获得所有子节点、包括文本节点(空格、换行)、注释节点

children (重点)

仅获得所有元素节点

返回的还是一个伪数组

父元素.children

兄弟关系查找：

下一个兄弟节点

nextElementSibling 属性

上一个兄弟节点

previousElementSibling 属性

新增节点

一般情况下我们新增节点，按照如下操作

创建一个新的节点

把创建的新节点放入指定的元素内部

创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建父节点，然后插入节点

创建节点方法

document.createElement('标签名')

注意:括号里一定要传递参数，参数是你想创建的元素名称

一次只能创建一个元素，不能创建多个

2.追加节点

要想在界面看到，还得插入到某个父元素中

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

父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

父元素.insertBefore(要插入的元素，在哪个元素前面)

例如

box.insertBefore(newP,box.children[0])

必须传输两个参数，否则报错

增加节点

特殊情况下，我们新增节点，按照如下操作

复制一个原有的节点

把复制的节点放入到指定的元素内容

克隆节点

元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true ，则代表克隆时会包含后代节点一起克隆--深拷贝

若为false，则代表克隆时候不包含后代节点--浅拷贝

默认为false

例如
<body>
<button>复制节点并添加到另外一个div中</button>

<div class="first">
 <p><span>我是first的p元素</span></p>
</div>
<div class="second"></div>

<script>
   //获取btn按钮，p元素，second
 let btn = document.querySelector('button')
 let p = document.querySelector('.first > p')
 let second = document.querySelector('.second')

 btn.addEventListener('click', function () { 
   second.appendChild(p.cloneNode(true))
 })
//此时会把first里面的p元素复制到second里面去
</script>
</body>

删除节点

若一个节点在页面中已不需要时，可以删除它
在js原生dom操作中，要删除元素必须通过父元素删除
语法
```
父元素.removeChild(直接子元素)
```


- 注:

  - 如不存在父子关系，则删除不成功
  - 删除节点和隐藏节点(display:none)有区别:隐藏节点还是存在的，但是删除，则从html中删除节点
  - 必须是parent直接子元素，否则报错

时间对象

时间对象：用来表示时间的对象

作用: 可以得到当前系统的时间

在代码中发现了new关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间
获得当前时间
- let date = new Date
- 获得指定时间例如
  - let date = new Date('1949-10-01 09:00')
  时间对象方法

方法	作用	说明
getFullYear（）	获得年份	获取四位年份
getMonth()	获得月份	取值为0 - 11 使用时候要加1
getDate（）	获取月份中的每一天	不用月份的取值也不相同
getDay（）	获取星期	取值为0-6
getHours（）	获取小时	取值0-23
getMinutes（）	获取分钟	取值为0-59
getSeconds（）	获得秒	取值为0-59

三种方式获取时间戳

使用getTime() 方法

//1.实例化
let date = new Date()
//2.获得时间戳
console.log(date.getTime())

2.简写 +new Date()

console.log(+new Date())

3.使用Date.now()

console.log(Date.now())

无需实例化
但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳

重绘跟回流

浏览器是如何进行界面渲染的

解析（Parser）HTML，生成DOM树(DOM Tree)
同时解析（Parser） CSS，生成样式规则 (Style Rules)
根据DOM树和样式规则，生成渲染树(Render Tree)
进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
Display: 展示在页面上

重绘和回流(重排)

回流(重排)

当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。

重绘

由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
重绘不一定引起回流，而回流一定会引起重绘。

3.会导致会回流(重排)的操作:

页面的首次刷新
浏览器的窗口大小发生改变
元素的大小或位置发生改变
改变字体的大小
内容的变化（如：input框的输入，图片的大小）
激活css伪类（如：:hover）
脚本操作DOM（添加或者删除可见的DOM元素）

简单理解影响到布局了，就会有回流

综合案例

发布微博案例

需求1：检测用户输入字数

\1. 注册input事件

\2. 将文本的内容的长度赋值给对应的数值

\3. 表单的maxlength属性可以直接限制在200个数之间

需求2：输入不能为空

判断如果内容为空，则提示不能输入为空, 并且直接return 不能为空

防止输入无意义空格, 使用字符串.trim()去掉首尾空格

并将表单的value值设置为空字符串

同时下面红色为设置为0

需求3： 新增留言

创建一个小li，然后里面通过innerHTML追加数据

随机获取数据数组里面的内容, 替换newNode的图片和名字以及留言内容

利用时间对象将时间动态化 new Date().toLocaleString()

追加给 ul

需求4：删除留言

在事件处理函数里面获取点击按钮,注册点击事件

(易错点: 必须在事件里面获取,外面获取不到)

删除对应的元素 (通过this获取对应的那条需要删除的元素)

教你一招放到追加进ul的前面，这样创建元素的同时顺便绑定了事件，赞~~

需求5：重置

将表单域内容重置为空

将userCount0

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>微博发布</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .w {
      width: 900px;
      margin: 0 auto;
    }

    .controls textarea {
      width: 878px;
      height: 100px;
      resize: none;
      border-radius: 10px;
      outline: none;
      padding-left: 20px;
      padding-top: 10px;
      font-size: 18px;
    }

    .controls {
      overflow: hidden;
    }

    .controls div {
      float: right;
    }

    .controls div span {
      color: #666;
    }

    .controls div .useCount {
      color: red;
    }

    .controls div button {
      width: 100px;
      outline: none;
      border: none;
      background: rgb(0, 132, 255);
      height: 30px;
      cursor: pointer;
      color: #fff;
      font: bold 14px '宋体';
      transition: all 0.5s;
    }

    .controls div button:hover {
      background: rgb(0, 225, 255);
    }

    .controls div button:disabled {
      background: rgba(0, 225, 255, 0.5);
    }

    .contentList {
      margin-top: 50px;
    }

    .contentList li {
      padding: 20px 0;
      border-bottom: 1px dashed #ccc;
      position: relative;
    }

    .contentList li .info {
      position: relative;
    }

    .contentList li .info span {
      position: absolute;
      top: 15px;
      left: 100px;
      font: bold 16px '宋体';
    }

    .contentList li .info p {
      position: absolute;
      top: 40px;
      left: 100px;
      color: #aaa;
      font-size: 12px;
    }

    .contentList img {
      width: 80px;
      border-radius: 50%;
    }

    .contentList li .content {
      padding-left: 100px;
      color: #666;
      word-break: break-all;
    }

    .contentList li .the_del {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 28px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="w">
    <!-- 操作的界面 -->
    <div class="controls">
      <img src="./images/9.6/tip.png" alt="" /><br />
      <!-- maxlength 可以用来限制表单输入的内容长度 -->
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount" id="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>
    </div>
    <!-- 微博内容列表 -->
    <div class="contentList">
      <ul id="list">

      </ul>
    </div>
  </div>

  <script>
    // 模拟数据，后期我们需要从这个数组中随机获取一个数据对象，做为发布微博的用户信息进行渲染，但是这个不是关键业务，我也可以固定写死
    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' },
      { uname: '张良', imgSrc: './images/9.5/06.jpg' },
      { uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
      { uname: '李白', imgSrc: './images/9.5/08.jpg' },
      { uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
      { uname: '墨子', imgSrc: './images/9.5/10.jpg' },
      { uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
      { uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
      { uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
      { uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
      { uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
      { uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
      { uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
      { uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
      { uname: '露娜', imgSrc: './images/9.5/19.jpg' },
      { uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
      { uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
      { uname: '百里玄策', imgSrc: './images/9.5/22.jpg' }
    ]
    //获取按钮
    let btn = document.querySelector('#send')
    //获取ul
    let ul = document.querySelector('#list')
    //获取文本框
    let area = document.querySelector('#area')
    //根据内容修改useCount的长度
    let useCount = document.querySelector('#useCount')

    // 按下回车键 发布微博
    area.addEventListener('keydown', function (e) {
      // console.log(e);
      if (e.key == 'Enter') {
        btn.click()
      }
    })
    //发布按钮绑定事件
    btn.addEventListener('click', function () {
      //创建随机数
      let index = parseInt(Math.random() * dataArr.length)
      //创建li元素
      let newLi = document.createElement('li')
      //判断用户输入的内容
      let content = area.value
      if (content.trim().length == 0) {
        alert('请输入内容再发布')
        return
      }
      newLi.innerHTML = `
            <div class="info">
              <img class="userpic" src="${dataArr[index].imgSrc}" />
              <span class="username">${dataArr[index].uname}</span>
              <p class="send-time">发布于 ${getTime()}</p>
            </div>
              <div class="content">${content}</div>
              <span class="the_del">X</span>
      `
      ul.insertBefore(newLi, ul.children[0])
      area.value = ''
      useCount.innerHTML = 0

      // 实现删除
      let del = newLi.querySelector('.the_del')
      del.addEventListener('click', function () {
        del.parentNode.remove()
      })
    })

    //input监听
    area.addEventListener('input', function () {

      useCount.innerHTML = area.value.trim().length
    })


    // 封装时间函数
    function getTime() {
      let date = new Date()
      // 获取年
      let year = date.getFullYear()
      // 获取月
      let month = date.getMonth() + 1
      // 获取日
      let day = date.getDate()
      //获取小时 
      let hours = date.getHours()
      //获取分钟
      let minutes = date.getMinutes()
      return `${year}-${month}-${day} ${hours}:${minutes}`
    }
  </script>
</body>

</html>

web api第三天-DOM节点-时间对象