一、DOM节点
什么是节点：
DOM树里每一个内容都称之为节点节点。
1.1节点操作
1.获取父节点（注意：返回最近一级的父节点 找不到返回为null）
子元素.parentNode
2.获取子节点
注意：
- childNodes 获得所有子节点、包括文本节点（空格、换行）、注释节点等
- children 仅获得所有元素节点返回的还是一个伪数组 (重点)
父节点.childNodes 父节点.children
3.获取兄弟节点
元素.nextElementSibling // 获取下一个兄弟 元素.previousElementSibling // 获取上一个兄弟
1.2创建节点
1.为什么需要创建节点
很多情况下，我们需要在页面中增加元素
比如，点击发布按钮，可以新增一条信息
一般情况下，我们新增节点，按照如下操作：
创建一个新的节点
把创建的新的节点放入到指定的元素内 const 变量名 = document.createElement('标签名')
当我点击 点我创建 的时候，控制台可看到输出的内容
2.3追加创建的节点
// 插入到这个父元素的最后面 父元素.appendChild(要追加的子元素)
3. 定点追加
父元素.insertBefore(要追加的子元素,在那个元素的前面追加)
1.3删除节点
二、日期函数
1.实例化日期
// 获取当前日期对象 const 变量 = new Date() // 获取指定日期对象 语法 const 变量 = new Date('时间字符串')
2.日期对象方法（过一下就可以）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 1.创建日期对象 const n = new Date() const y = n.getFullYear()//获取年份 const m = n.getMonth()+1//获取月份0-11+1 const dd = n.getDate()//1-31 const h = n.getHours()//0-23 const mm = n.getHours()//0-59 const s = n.getSeconds()//0-59 const w = n.getDay() //0-6 +1 console.log(w); </script> </body> </html>
2.1来个案例体验下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { width: 100vw; height: 100vh; display: flex; justify-content: center; /* align-items: center; */ } .box { margin-top: 100px; width: 250px; height: 50px; background-color: pink; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: bold; } </style> </head> <body> <div class="box"></div> <script> const box = document.querySelector('.box') function fn() { let n = new Date() let y = n.getFullYear()//获取年份 let m = n.getMonth() + 1//获取月份0-11+1 let dd = n.getDate()//1-31 let h = n.getHours()//0-23 let mm = n.getHours()//0-59 let s = n.getSeconds()//0-59 let w = n.getDay() //0-6 +1 m = padZero(m) dd = padZero(dd) h = padZero(h) mm = padZero(mm) s = padZero(s) const str = `${y}-${m}-${dd} ${h}:${mm}:${s}` box.innerHTML = str } fn() //动起来加个定时器就可以了，每次调用方法实时刷新 setInterval(fn,1000) function padZero(m) { return m<10? `0${m}`:m } </script> </body> </html>
3.时间戳
是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
// 使用 日期对象.getTime() const date = new Date() const 变量 = date.getTime() // 使用 +new Date() const 变量 = +new Date() // 使用 Date.now() Date.now()
