一. 节点操作
1. DOM节点
DOM节点:DOM树里每一个内容都称之为节点
节点类型 :
- 元素节点: 所有标签 body div ...
- 属性节点: 所有属性 href title...
- 文本节点: 所有文本
2.查找节点
- 查找父节点
语法: 子元素.parentNode - 查找子节点
语法: 父元素.children 查找所有子元素 返回的是伪数组
父元素.childNodes 获得所有子节点、包括文本节点(空格、换行)、注释节点等 - 查找兄弟节点
上一个兄弟节点: 元素.previousElementSibling
下一个兄弟节点: 元素.nextElementSibling
3.增加节点
创建节点:
语法: document.createElement('标签名')
追加节点:
- 语法:父元素.appendChild(要添加的元素)
作用:将元素放到父元素的里面的最后面 - 语法:父元素.insertBefore(要添加的元素, 在谁前面)
作用:将节点添加到指定的节点前面
第二个参数为 null 或 undefined 效果等同于 appendChild 放在最后
创建的节点不会在页面中显示,创建后还要追加节点才会在页面中显示
4.克隆节点:
语法:元素.cloneNode(布尔值)
参数 布尔值
true 会克隆节点自身,后代节点会克隆的
false 默认值 只会克隆节点自身,后代节点不会克隆的
克隆节点要添加到页面中才能看到
5.删除节点
要删除元素必须通过父元素删除
语法: 父节点.removeChild(要删除的元素)
- 如不存在父子关系则删除不成功
- 删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点
二.时间对象
1.创建时间对象
语法: new Date()
let date = new Date() 获得当前时间
let date2 = new Date('指定时间') 获得指定时间
2.时间对象方法
date.getFullYear() 获得年份
date.getMonth() + 1 获得月份(结果0-11 0 表示1月 11表示12月 所有要加一才是月份)
date.getDate() 获得日
date.getHours() 时
date.getMinutes() 分
date.getSeconds() 秒
date.getDay() 星期 (结果0-6 0表示星期天 )
<script>
// 时间对象方法
// 步骤:
// 1. 先创建时间对象
// 2. 时间对象 去调用方法得到年月日
let date = new Date()
console.log(date)
// 年
console.log( date.getFullYear())
// 月 结果0-11 0 表示 1 月 11 表示 12 月
console.log(date.getMonth() + 1)
// 日
console.log(date.getDate())
// 时
console.log(date.getHours())
// 分
console.log(date.getMinutes())
// 秒
console.log(date.getSeconds())
// 星期 结果 0 - 6 0 表示星期天 6 表示星期六
console.log(date.getDay())
</script>
3.秒数转时分秒的公式
h = parseInt(time / 60 / 60 % 24)
m = parseInt(time / 60 % 60)
s = parseInt(time % 60)
4.时间戳
时间戳是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
获取方式:
- 方式1:getTime()
- 方式2:+new Date() 括号里面不写,是获取当前时间的时间戳 括号里面写指定时间,是获取指定时间的时间戳
- 方式3:Date.now() // 只能获取当前时间的时间戳