【精简笔记】JavaScript进阶内容第四天

往期文章目录

【精简笔记】JavaScript基础内容第一天
【精简笔记】JavaScript基础内容第二天
【精简笔记】JavaScript基础内容第三天
【精简笔记】JavaScript基础内容第四天
【精简笔记】JavaScript基础内容第五天
【精简笔记】JavaScript基础内容大总结
【精简笔记】JavaScript进阶内容第一天
【精简笔记】JavaScript进阶内容第二天
【精简笔记】JavaScript进阶内容第三天

---

---

前言

本文主要讲述JS的核心用法，请读者确保已熟悉JS基础语法
今日主要内容：日期对象的实例化、时间对象方法、时间戳 、节点操作

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、日期对象

1.1日期对象

用来表示时间，可以获得当前的系统时间

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

1.2得到指定时间

const data1 = new Date('2023-6-3 9:00:00')

1.3、时间对象方法

const date = new Date()

console.log(date.getFullYear())
console.log(date.getMonth()+1)//月份是从0到11
console.log(date.getDate())
console.log(date.getDay())//获得星期 星期天是0
console.log(date.getHours())//获得小时
console.log(date.getMinutes())//获得分钟
console.log(date.getSeconds())//获得秒

console.log(date.toLocaleString)//2024/6/27 21:09:21;
console.log(date.toLocaleDateString) //2024/6/27
console.log(date.toLocaleTimeString) //2024/6/27

1.4、时间戳

1.4.1什么是时间戳 ？

获得当前时间的毫秒数

 console.log(+new Date())

获得指定时间的时间戳的方法

console.log(+new Date('2024-6-27 22:00:00'))

二、节点操作

2.1什么是DOM节点？

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

2.2节点类型

元素节点：所有的标签、html是根节点
属性节点：所有的属性，比如：href
文本节点：所有的文本
其他

2.3查找节点

获得父节点

 <div class="dad">
        <div class="baby"></div>
    </div>
    <script>
        const baby =document.querySelector('.baby')
        console.log(baby)
        console.log(baby.parentNode)//打印父级 只能得到最近一级的即父类
    </script>

获得子节点

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
<script>
    const ul = document.querySelector('ul')
    console.log(ul.children)//得到一个伪数组
</script>

获得兄弟节点

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
<script>
    const li2 = document.querySelector('ul li:nth-child(2)')
    console.log(li2.previousElementSibling)//上一个兄弟
    console.log(li2.nextElementSibling)//下一个兄弟
</script>

2.4增加节点

 const div = document.querySelector('div')
        document.body.appendChild(div)//在末尾插入

<ul>
        <li>第一个</li>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        const li = document.createElement('li')
        li.innerHTML = '新来的'
        ul.insertBefore(li,ul.children[0])
    </script>

2.5 克隆节点

元素.cloneNode(布尔值）

举例说明：

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
</ul>
const ul = document.querySelector('ul')
    const li1 =  ul.children[0].cloneNode(true)//加上true能够克隆内容

2.6删除节点

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

const ul = document.querySelector('ul')
    ul.removeChild(ul.children[0])
``

---

# 总结

今日内容较简单，快速浏览即可