日期对象与节点操作与重构回流
Published on 2022-11-21 13:38 in 分类: WEB api with 帅气丶汪星人
分类: WEB api

日期对象与节点操作与重构回流

日期对象

日期对象就是，js的内部内置对象，它属于一个构造函数封装的对象。实例化对象，在代码中一定要使用new，实例化对象。

创建一个时间对象获取当前时间：const NowTime = new Date（）

创建一个时间对象获取指定时间：const Time = new Date（`2022-12-12 00:00:00 `）  注意区分这里是获取的指定时间

 获取年月日

复制代码
<script>
    let data = new Date()
    data.getFullYear(),      //获得年份                 获取四位年份 2022
    (data.getMonth() + 1)    //获取月份                 取值为0-11，月份少一，需要＋1
    data.getDate()           //获取月份中的每一天         不同的月份取值也不相同
    data.getDay()            //获取星期                 取值为0-6
    data.getHours()          //获取小时                 取值为0-23
    data.getMinutes()        //获取分钟                 取值为0-59
    data.getSeconds()        //获取秒钟                 取值为0-59
</script>
复制代码

获取当前时间案例

复制代码
    <style>
        div {
            width: 300px;
            height: 40px;
            border: 1px solid pink;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
<div></div>
<script>
    function getTime() {
        // 创建实例化对象
        const data = new Date()
        // 获取年份
        const year = data.getFullYear() //年份
        let month = data.getMonth() + 1  //月份
        let date1 = data.getDate()  //日期
        let h = data.getHours()          //获取小时                 取值为0-23
        let m = data.getMinutes()        //获取分钟                 取值为0-59
        let s = data.getSeconds()        //获取秒钟                 取值为0-59
        month = month < 10 ? `0` + month : month
        h = h < 10 ? '0' + h : h
        m = m < 10 ? '0' + m : m
        if (s < 10)  s = `0` + s
        return`今天是:${year}年${month}月${date1}日 ${h}:${m}:${s}`
    }
    const res = getTime()  //函数调用一次执行一次，这里已经被res调用了，我们使用计时器调用的时res函
    //所以这里我们需要直接调用gitTime（）这个函数
    console.log(res)
    // 渲染
    const div = document.querySelector(`div`)
    div.innerHTML = res
    // 开始定时器
    setInterval(function () {
        // console.log(1)
        div.innerHTML = getTime()  //我们这里为了获取最新的时间
    },1000)
</script>
复制代码

（重点）时间戳（总的毫秒数）

什么是时间戳，如果计算器倒计时效果，前面的方法无法直接计算，需要借助时间戳完成

什么是时间戳，指的是，1970年1月1日00时00分00秒起，到现在的毫秒数，它是一种特殊的计量时间方式

使用场景，计时器效果，前边的方法无法进行直接计算，需要借助时间戳完成

倒计时的计算方法：将来的时间戳 - 现在的时间戳 = 剩余的时间戳

获取时间戳有三种办法：

第一种方法：const Time = new Date（）

第二种方法：const Time = +new Date（）

第三种方法：const Time = Date.now（）

复制代码
    //第一种获得总的毫秒数的方法
    const date = new Date()
    console.log(date.getTime())
    // 第二种获得总的毫秒数的方法
    console.log(+new Date())
    // 第三种获得总的毫秒数的方法  h5新增方法
    console.log(Date.now())
    //指定时间（未来的时间或者过去的时间），总的毫秒数 2022-11-18 18:30:00
    console.log(+new Date(`2022-11-18 18:30:00`))
复制代码
复制代码
    function Time() {
        let time = +new Date() //到现在的时间
        let times = +new Date(`2023-5-5 0:0:0`) //到未来的时间
        let timess = (times - time) / 1000  //转换为秒数
        console.log(timess)
        let h = parseInt(timess / 60 / 60  % 24)
        let m = parseInt(timess / 60  % 60)
        let s = parseInt(timess % 60)
        h = h < 10 ? `0` + h : h
        m = m < 10 ? `0` + m : m
        s = s < 10 ? `0` + s : s
    }
    Time()
    // 开启定时器
    // setInterval(function () {
    //     getCountTimer()
    // },1000)
    setInterval(Time,1000)
复制代码

DOM节点

dom节点，dom树里边每一个内容都可以称之为节点

节点类型，元素节点，比如body，div，html时节点

父节点查找方式

父节点查找语法：parentNode属性，使用方法（子元素.parentNode）

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

复制代码
<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>
<script>
    const box3 = document.querySelector(`.box3`)
    console.log(box3)  //反馈box3
    console.log(box3.parentNode)    //反馈box2
    console.log(box3.parentNode.parentNode)     //反馈box1
    console.log(box3.parentNode.parentNode.parentNode)      //反馈body
    console.log(box3.parentNode.parentNode.parentNode.parentNode)       //反馈html
    console.log(box3.parentNode.parentNode.parentNode.parentNode.parentNode)        //反馈#document
    console.log(box3.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode)        //反馈null
</script>
复制代码

子节点查找方式

子节点查找语法：childNodes 获取所有的子节点，包括文本节点，注释节点（一般用不上）

子节点查找语法：childrean 仅获取所有元素节点，返回的还是一个为数组。使用方法（父元素.children）

    // 获取子节点
    const ul = document.querySelector('ul')
    // console.log(ul)
    console.log(ul.childNodes)
    console.log(ul.children[1])

兄弟节点查找方式

查找下一个兄弟节点：nextElementSibling

查找上一个兄弟节点：previousElementSibling

    // 获取兄弟节点
    const li3 = document.querySelector(`ul li:nth-child(3)`)
    console.log(li3)
    console.log(li3.nextElementSibling) //下一个兄弟 第4个li
    console.log(li3.previousElementSibling) //上一个兄弟 第2个li

创建节点，添加节点

增加节点，无中生有，自己创建一个节点

比如我们点击发布按钮，可以增加一条信息

一般情况下，我们增加的节点，按照以下操作

创建一个新的节点，把创建的新的节点放入指定的元素内部，创建出来一个新的网页元素，再添加到网页内。一般都是创建节点，在添加元素

注意点，我们添加节点的时候，是在父元素上添加子元素节点的

创建元素节点的办法：const li = document.createElement(`li`)

添加父级节点后边：ul.appendChild(li) 

添加父级节点前边：ul.insertBefore(li,ul.children[0]) //children创建一个字节点

复制代码
<ul>
    <li>1</li>
</ul>
<script>
    //创建一个新的li
    // document.createElement(`标签名`)
    const li = document.createElement(`li`)
    const ul = document.querySelector(`ul`)
    console.log(li)//创建出来一个标签,也就是元素对象
    console.log(ul)
    // 追加一个li的节点
    // 追加的时候,需要获取父元素,插到父元素的前边或者后边
    // ul.insertBefore(要插入的元素,在哪个元素的前面添加) //创建一个li只能追加一次
    ul.insertBefore(li,ul.children[0]) //children创建一个字节点
    // ul.appendChild(需要插入的元素,在元素的最后边插入)
    // ul.appendChild(li)
</script>
复制代码

克隆节点

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

赋值一个原有节点，布尔值，把赋值的节点放入指定元素的内部

克隆节点的语法：元素名称.cloneNode（布尔值）

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

如果为true，则代表克隆时会包含后代节点一起克隆

如果为false，则代表克隆时不包括后代节点，不写默认为false

复制代码
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    // 获取元素2,克隆一个2追加到ul中最后一个
    // const li2 = document.querySelector(`ul`).children[1]
    // console.log(li2)
    // // 元素克隆
    // const  lili2 = li2.cloneNode(true)
    // console.log(lili2)//克隆的元素对象
    // // 追加到ul中
    // const ul = document.querySelector(`ul`)
    // ul.appendChild(lili2)
    //
    // 方法2
    const ul = document.querySelector(`ul`)
    const li2 = ul.children[1]  //获取li2 //children后边追加的是索引值
    // 元素克隆
    const lili2 = li2.cloneNode(true)
    console.log(lili2) //克隆的元素对象
    // 追加到ul后边
    ul.appendChild(lili2)
复制代码

删除节点和隐藏节点

如果一个节点已经在页面中不需要时，可以删除它

在js原生DOM操作中，要删除元素必须通过父级元素删除

删除节点语法：父级元素.removeChile（需要删除的子集元素）

删除节点语法：父级元素.removeChild(删除父级元素的.children[n]个

注意点，如果不存在父子关系则删除不成功

删除节点和隐藏节点的区别，隐藏节点，节点还是存在的，但是删除节点，就真的删除了

复制代码
<div>哈哈</div>
<ul>
    <li>没有用了</li>
    <li>没有用</li>
</ul>
<script>
    const ul = document.querySelector(`ul`)
    ul.removeChild(ul.children[0])
    const body = document.querySelector(`body`)
    body.removeChild(body.children[1])
</script>
复制代码

回流和重绘

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

  • 解析（Parser）HTML，生成DOM树(DOM Tree)

  • 同时解析（Parser） CSS，生成样式规则 (Style Rules)

  • 根据DOM树和样式规则，生成渲染树(Render Tree)

  • 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）

  • 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制

  • Display: 展示在页面上

回流和重绘

  • 回流（重排）

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

  • 重绘

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

  • 重绘不一定引起回流，而回流一定会引起重绘。

  • 会导致回流（重排）的操作

    • 页面的首次刷新

    • 浏览器的窗口大小发生改变

    • 元素的大小或位置发生改变

    • 改变字体的大小

    • 内容的变化（如：input框的输入，图片的大小）

    • 激活css伪类 （如：:hover）

    • 脚本操作DOM（添加或者删除可见的DOM元素）

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

posted @   帅气丶汪星人  阅读(55)  评论(0)  编辑  收藏  举报
相关博文：
·  初识WEB api 和 倒计时
·  延时定时器-本地储存-数组的map初了解
·  DOM03~
·  WebAPI_DAY3_DOM节点和时间戳
·  Web API 第四天
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
← → ↓ ↑
点击右上角即可分享
微信分享提示