Web APIs 第三天 - DOM- 节点操作

bg.png

一. 节点操作

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表示星期天 )

1.png

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() // 只能获取当前时间的时间戳