日期对象与节点操作

1.日期对象

1.1实例化

在这里插入图片描述

// 实例化
    const date = new Date()
    console.log(date);

    // 返回指定时间
    const date1 = new Date('2022-5-1 08:30:00')
    console.log(date1);

1.2日期对象方法

日期对象与节点操作_第1张图片

1.3时间戳

日期对象与节点操作_第2张图片
三种获取时间戳的方法

日期对象与节点操作_第3张图片

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

    console.log(+new Date());

    console.log(Date.now());

2.结点操作

2.1DOM结点

日期对象与节点操作_第4张图片

2.2查找节点

日期对象与节点操作_第5张图片
父节点查找
日期对象与节点操作_第6张图片

const baby = document.querySelector('.baby')
    console.log(baby);
    console.log(baby.parentNode);
    console.log(baby.parentNode.parentNode);

子节点查找
日期对象与节点操作_第7张图片

 const ul = document.querySelector('ul')
    console.log(ul.children);

兄弟关系查找
日期对象与节点操作_第8张图片

const li2 = document.querySelector('ul li:nth-child(2)')

    console.log(li2.previousElementSibling);
    console.log(li2.nextElementSibling);

3.增加节点(重点)

3.1创建节点

日期对象与节点操作_第9张图片

3.2追加节点

日期对象与节点操作_第10张图片

const ul = document.querySelector('ul')
    const li = document.createElement('li')
    li.innerHTML = '我是你你你爹'


    ul.appendChild(li)//插入到最后面

    ul.insertBefore(li, ul.children[0])//插入到最前面

3.3克隆节点

日期对象与节点操作_第11张图片

3.4删除节点

日期对象与节点操作_第12张图片

	const ul = document.querySelector('ul')
    // 删除节点
    ul.removeChild(ul.children[0])

4.M端事件

日期对象与节点操作_第13张图片

<div></div>
  <script>
    const div = document.querySelector('div')
    div.addEventListener('touchstart', function () {
      console.log('摸我了');
    })
    div.addEventListener('touchend', function () {
      console.log('不摸了');
    })
    div.addEventListener('touchmove', function () {
      console.log("一直模");
    })

5.JS插件

日期对象与节点操作_第14张图片

你可能感兴趣的:(Javascript,javascript,前端,开发语言)