Web APIs三---DOM节点操作

1.父节点parentNode

parentNode是一个属性
找到子元素的父节点

closeBtn.addEventListener('click', function () {
   // 找btn的父节点
   this.parentNode.style.display = 'none';
})

2.子节点children

父元素.children
children是一个属性,获得所有子元素节点,返回的是一个伪数组
childNodes获得的是所有子节点、包括文本节点（空格、换行）、注释节点等

3.兄弟节点

下一个兄弟元素节点 nextElementSibling 属性
上一个兄弟元素节点 previousElementSibling 属性
previousSibling和nextSibling属性获得的是非元素节点(空格,换行,注释等)

4.创建节点

这是一个方法,创建的是元素节点
语法：document.createElement('标签名')

let newLi = document.createElement('li');

5.创建的节点添加到页面

通过插入到某个父元素中添加到页面
方法：父元素.appendChild(要添加的元素)
作用：将元素放到父元素的里面的最后面

ul.appendChild(newLi);

方法：父元素.insertBefore(要添加的元素, 在谁前面)
作用：将节点添加到指定的节点前面
细节:必须要两个参数,不然报错,第二个参数可以是null undefined,此时效果和appendChild一致

ul.insertBefore(newLi, ul.children[0]);

6.克隆节点

方法: 元素.cloneNode(布尔值)
参数 布尔值
true 会克隆节点自身，后代节点也会克隆
false 默认值 只会克隆节点自身，后代节点不会克隆

let newUl = ul.cloneNode(1);
document.body.appendChild(newUl)

7.删除节点

要删除元素必须通过父元素删除,如不存在父子关系则删除不成功,删除后从dom树中消失
方法：父节点.removeChild(child)

for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', function () {
        ul.removeChild(this)
    })
}

8.创建时间对象

当前时间:let date = new Date();
指定时间:let date = new Date('1949-10-01');

date.getFullYear() 获得年份
date.getMonth()+1 月份 取值0 - 11 0表示1月份 11表示12月份
date.getDate() 日
date.getHours() 时 取值 0 - 23
date.getMinutes() 分 取值 0 - 59
date.getSeconds() 秒 取值 0 - 59
date.getDay() 星期几 取值0 - 6 0表示星期日 6表示星期六

9.时间戳

指1970年01月01日00时00分00秒起至现在的毫秒数
是一种特殊的计量时间的方式
使用场景：倒计时效果
获取时间戳方法一：可以获取当前时间戳及指定时间戳

let date = new Date();
console.log(date.getTime());

方法二：推荐方式 简单
可以获取当前时间戳及指定时间戳

console.log(+new Date())        // 当前的时间时间戳
console.log(+new Date('2020/08/16'))  // 指定时间的时间戳

方法三：无法获取指定时间的时间戳

console.log(Date.now())