日期对象

实例化日期对象

日期对象：用于表示时间

作用：作为系统时间

在代码中使用new关键字的就是实例化

const data = new Date() 		//获得当前时间

const data = new Date('指定时间') 		//得到指定时间

日期对象方法

日期对象所返回的值并不能直接使用，所以要对其进行转化格式

date.toLocaleString()			//得到当前年月日和当前时间
date.toLocaleDateString()		//得到年月日
date.toLocaleTimeString()		//得到当前时间

时间戳

使用场景：如果计算倒计效果，就可以用到时间戳

时间戳：指的是1970年01月01日00时00分00秒气质现在的毫秒数,它是一种特殊的计量单位

算法：

将来的时间 -现在的时间 = 剩余的时间 （毫秒）

将剩余时间转为时间的年月日 时分秒就是倒时效果了

获得时间戳的三种方法：

1.使用getTime()方法

2.简写+new Date()

3.使用Date.now() //不需要实例化

  <script>
    const date = new Date()
    console.log(date.getTime())
    console.log(+new Date())
    //第二，三方法不需要实例化
    console.log(Date.now())  //只能获得当前时间戳
  </script>

节点操作

DOM节点

DOM节点：DOM树里的每一个内容都被称之为节点

节点类型：

元素节点：所有的标签比如body,div

根节点：div

属性节点：所有的属性比如href

文本节点：所有的文本

其他

查找节点

父节点：parentNode 属性 获得最近的父节点 可以复用

<div class="grandfther">
    <div class="dad">
      <div class="son">x</div>
    </div>
  </div>
  <script>
    const son = document.querySelector('.son')
    console.log(son.parentNode)
    console.log(son.parentNode.parentNode)
  </script>

子节点：childNode 获得所有的子节点，包括文本节点（空格，换行），注释节点等

	children 属性 	仅获得所有元素节点，返回一个伪数组

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    console.log(ul.children)
  </script>

兄弟节点： nextElementSibling 下个兄弟节点

		previousElementSibling		上个兄弟节点

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <script>
    const li = document.querySelector('li:nth-child(2)')
    console.log(li.nextElementSibling)
    console.log(li.previousElementSibling)

增加节点

创建节点

创建节点：即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

创建节点的方法：

document.createElement('标签名')

追加节点

插入父元素的最后面：

父元素.appendChild(要插入的元素)

插入父元素中某个元素的前面：

 父元素.insertBefore(要插入的元素,在哪个元素的前面)

复制节点

特殊情况下，我们新增节点，按如下操作：

1.复制一个原有节点

2.把复制节点放到指定的元素内部

语法：

元素.cloneNode(布尔值)

布尔值为true：把后代一起复制

为false：不克隆后代节点

默认为false

删除节点

在JS原生的DOM操作中，要删除元素必须通过父元素删除

语法：

父元素.removeChild(要删除的元素)

无父子关系删除失败

删除节点和隐藏节点（display：none）有区别：隐藏节点还是存在的但是删除节点，则从HTML中删除节点

M端事件

移动端也特殊之处（触屏事件touch）

touch事件对象代表一个触摸点