日期对象
日期对象就是,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元素)
简单理解影响到布局了,就会有回流
-