JavaScript 进阶课程笔记 第三天

JavaScript 进阶课程笔记 第三天

DOM 节点操作

一、节点操作

1.1 DOM节点

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

1.2 查找节点

  • 父节点 parentNode
  • 子节点 children
  • 兄弟节点
下一个兄弟节点
nextElementSibling 属性
上一个兄弟节点
previousElementSibling

1.3 新增节点

  • 创建节点
document.createElement('标签名')
  • 追加节点
<body>
    <ul>
        <li>我是大毛li>
        <li>我是二毛li>
    ul>
    <script>
        // 二毛   ul.children[1]
        // 1. 创建新的标签节点
        // let div = document.createElement('div')
        // div.className = 'current'
        let ul = document.querySelector('ul')
        let li = document.createElement('li')

        li.innerHTML = '我是xiao ming'
        // 2. 追加节点  父元素.appendChild(子元素) 后面追加
        // ul.appendChild(li)
        // 3. 追加节点  父元素.insertBefore(子元素, 放到那个元素的前面)   
        ul.insertBefore(li, ul.children[0])
    script>
body>
  • 克隆节点(cloneNode)

JavaScript 进阶课程笔记 第三天_第1张图片

1.4 删除节点

父元素.remove(要删除的元素)

二、时间对象

2.1 实例化

//获得当前时间
let date = new Date()
//获得指定时间
let date = new Date('1949-10-01')

2.2 时间对象方法

JavaScript 进阶课程笔记 第三天_第2张图片

2.3 时间戳

时间戳是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式

  1. 使用getTime()方法
let date  = new Date()
console.log(date.getTime())
  1. 简写 + new Date()
console.log(+new Date())
  1. 使用Date().now()
console.log(Date.now())

三、重绘和回流

  1. 浏览器是如何进行界面渲染的
    解析(Parser)HTML,生成DOM树(DOM Tree)
    同时解析(Parser) CSS,生成样式规则 (Style Rules)
    根据DOM树和样式规则,生成渲染树(Render Tree)
    进行布局 Layout(回流/重排):根据生成的渲染树,得到节点的几何信息(位置,大小)
    进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
    Display: 展示在页面上
  2. 重绘和回流(重排)
    回流(重排):当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时,浏览器就会重新渲染部分或全部文档的过程称为 回流。
    重绘:由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如:color、background-color、outline等), 称为重绘
    重绘不一定引起回流,而回流一定会引起重绘。

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

  • 页面的首次刷新
  • 浏览器的窗口大小发生改变
  • 元素的大小或位置发生改变
  • 改变字体的大小
  • 内容的变化(如:input框的输入,图片的大小)
  • 激活css伪类 (如::hover)
  • 脚本操作DOM(添加或者删除可见的DOM元素)
    简单理解影响到布局了,就会回流

微博发布案例实现

JavaScript 进阶课程笔记 第三天_第3张图片

DOCTYPE html>
<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 />
      
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200">textarea>
      <div>
        <span class="useCount" id="useCount">0span>
        <span>/span>
        <span>200span>
        <button id="send">发布button>
      div>
    div>
    
    <div class="contentList">
      <ul id="list">ul>
    div>
  div>

  
  <li hidden>
    <div class="info">
      <img class="userpic" src="./images/9.6/03.jpg" />
      <span class="username">死数据:百里守约span>
      <p class="send-time">死数据:发布于 2020年12月05日 00:07:54p>
    div>
    <div class="content">死数据:111div>
    <span class="the_del">Xspan>
  li>

  <script>
    // maxlength 是一个表单属性, 作用是给表单设置一个最大长度

    // 模拟数据
    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' },
    ]
    // 需求1:检测用户输入字数
    //   1. 注册input事件
    //   2. 将文本的内容的长度赋值给对应的数值
    //   3. 表单的maxlength属性可以直接限制在200个数之间
    let textarea = document.querySelector('textarea')
    let useCount = document.querySelector('.useCount')
    // 发布按钮
    let send = document.querySelector('#send')
    // ul
    let ul = document.querySelector('#list')
    textarea.addEventListener('input', function () {
      // console.log(this.value.length)
      useCount.innerHTML = this.value.length
    })

    // 需求2: 输入不能为空
    //   点击button之后判断
    //   判断如果内容为空,则提示不能输入为空, 并且直接return 不能为空
    //   防止输入无意义空格, 使用字符串.trim()去掉首尾空格
    // console.log('  str')
    // console.log('  str '.trim())
    //   并将表单的value值设置为空字符串
    //   同时下面红色为设置为0
    send.addEventListener('click', function () {
      if (textarea.value.trim() === '') {
        //   并将表单的value值设置为空字符串
        textarea.value = ''
        //   同时下面红色为设置为0
        useCount.innerHTML = 0
        return alert('内容不能为空')
      }
      // 随机数
      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
      }
      let random = getRandom(0, dataArr.length - 1)
      // 需求3:   新增留言  写到send 的里面
      // 创建一个小li,然后里面通过innerHTML追加数据
      let li = document.createElement('li')
      // 随机获取数据数组里面的内容, 替换newNode的图片和名字以及留言内容
      li.innerHTML = `
       
${dataArr[random].imgSrc}> ${dataArr[random].uname}

${new Date().toLocaleString()}

${textarea.value}
X
`
// 需求4:删除留言 放到追加的前面 // 在事件处理函数里面获取点击按钮, 注册点击事件 // (易错点: 必须在事件里面获取, 外面获取不到) // 删除对应的元素(通过this获取对应的那条需要删除的元素) // 教你一招: 放到追加进ul的前面,这样创建元素的同时顺便绑定了事件,赞~~ // 使用 li.querySelector() let del = li.querySelector('.the_del') del.addEventListener('click', function () { // 删除操作 点击的是X 删除的小li 父元素.removeChild(子元素) ul.removeChild(li) }) // 利用时间对象将时间动态化 new Date().toLocaleString() // 追加给 ul 用 父元素.insertBefore(子元素, 那个元素的前面) ul.insertBefore(li, ul.children[0]) // 需求5:重置 // 将表单域内容重置为空 // 将userCount里面的内容重置为0 textarea.value = '' // 同时下面红色为设置为0 useCount.innerHTML = 0 })
script> body> html>

你可能感兴趣的:(Javascript,笔记,javascript,前端,html5)