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