JavaScript基础3

m0_73450236

已于 2024-05-15 20:34:17 修改

阅读量715

点赞数 11

文章标签： javascript

于 2024-05-13 13:51:13 首次发布

本文链接：https://blog.csdn.net/m0_73450236/article/details/138781287

版权

1 Web API 基本认知

1.1 变量声明

变量声明有3个 var let 和const
- 优先使用let 或者 const
- 尽量const优先：const用于常量声明，也就是不会改变的量
- 如下的代码的let可以改成const，因为值没有发生变化。

栈里面的内容没有变化，并且后面不会在堆中开辟新空间，就可以用const进行声明。也可以理解为如果引用数据类型在后面的代码中只是添加或删除某个元素，没有更改整个数组或对象，是可以用const的。

1.2 Web API的作用与分类

作用：通过js去操作html和浏览器
分类：DOM（文档对象模型），BOM(浏览器对象模型)

1.3 什么是DOM

DOM (DOCUMENT OBJECT MODEL – 文档对象模型)用来呈现以及任意HTML或XML文档交互的API
DOM的作用：操作网页内容

1.4 DOM树

DOM树是什么
- 含义：将html文档以树状结构表现出来，我们称之为文档树或DOM树
- 作用：文档树直观的体现了标签与标签之间的关系

1.5 DOM对象

DOM对象：浏览器会针对html标签，自动生成一个对象
- html中称为标签，如<a>标签，但是js调用的标签，称为对象
- 所有标签的属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
DOM的核心思想
- 把网页内容当作对象来处理
document对象
- 是DOM里提供的一个对象
- 所以它提供的属性和方法都是用来访问和操作网页内容的
  
  如：document.write()
- 网页所有内容都在document里面

2 获取DOM对象

2.1 根据CSS选择器来获取DOM元素（重点）

记忆方式：querySelector selector就是选择器的意思

2.1.1 选择匹配的第一个元素

语法：

// css选择器分为：标签；class；id
document.querySelector('css选择器')

参数：

包含一个或多个有效的css选择器字符串

返回值：

返回第一个匹配的元素，一个HTMLElement对象

<script>
    // 元素选择器
    let obj = document.querySelector('div')
    console.log(obj)
	// 类选择器
    let obj3 = document.querySelector('.three')
    console.log(obj3)
	// id选择器
    let obj4 = document.querySelector('#four')
    console.log(obj4)
</script>

2.1.2 选择匹配多个元素

语法：

document.querySelectorAll('css选择器')

返回一个NodeList：数组字面量

例如下面的代码：

    // 获取多个元素
    let obj6 = document.querySelectorAll('ul li')
    console.log(obj6)
    console.log(obj6[0])

obj6为一个伪数组，哪怕获取的只有一个元素，也是伪数组

注意：

queryselector 可以修改获取的对象
queryselectorall不可以直接修改获取的对象，如果想修改，需要取到具体的某一个对象

练习：请控制台依次输出3个li的DOM对象

2.2 其他获取DOM元素方法

// 通过id获取元素
document.getElementById('nav')

// 根据标签获取一类元素 获取页面 所有div
document.getElementByTagName('div')

// 根据类名获取元素 获取页面所有类名为w的
document.getElementByClassName('w')

3 设置/修改DOM元素内容

3.1 document.write()方法

3.2 对象.innerText 属性

<body>
    <div>粉红色的回忆</div>
    <script>
        let div = document.querySelector('div')
		// innerText
        div.innerText = '有点意思'
    </script>
</body>

但是innerText不识别标签，如div.innerText = '<br>有点意思',这样的话，会连同<>内部的东西原封不动的输出出来。

3.3 对象.innerHTML属性

它与innerText的区别是，它可以解析标签

案例：随机显示抽取的名字显示到指定的标签内部

需求：将名字放入span盒子内部

<body>
    <span id="name">名字</span><br>
<script>
    function randomName (Array) {
        let randomNum = Math.floor(Math.random()*(Array.length))
        nameArray.splice(randomNum,1)
        return Array[randomNum]
    }
    let nameArray = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
    let span = document.getElementById('name')
    span.innerHTML = randomName(nameArray)
</script>

另一种获取标签的方式

let span1 = document.querySelector('#name')
span1.innerHTML = randomName(nameArray)

5. 设置/修改DOM元素属性

5.1 通过style属性操作CSS

语法：

对象.style.css样式 = 值

例如：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width:300px;
            height:300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        let box = document.querySelector('div')
        // css为background_color,改为小驼峰就是backgroundColor
        box.style.backgroundColor = 'hotpink'
		box.style.width = '500px'
    </script>
</body>

注意：

修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法

5.2 通过类名(className)操作CSS

语法：

元素.className = 'class名字'

应用场景：比如鼠标经过，文字的字体变大并且追加颜色，下划线等css改变比较多的地方。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            width:100px;
            height:100px;
            background-color: pink;
        }

        .active{
            width:300px;
            height:300px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class='one'></div>
    <script>
        let box = document.querySelector('.one')
        box.className = 'one active'
    </script>
</body>

5.3 通过classList操作类控制CSS

通过className具有一定的弊端。className容易覆盖之前的样式，所以还需要看标签的原来的className是什么。这样非常的不方便。因此我们可以使用classList直接追加和删除类名。

className会覆盖之前的css Class名字，但是classList不会进行覆盖

语法：

// 追加一个类
元素.classList.add('类名')

// 删除一个类
元素.classList.remove('类名')

// 切换一个类：
// 切换就是相当于开关，原来没有，toggle之后就添加类名。
元素.classList.toggle('类名')

6. 设置/修改表单元素属性

获取：DOM对象.属性名
设置：DOM对象.属性名 = value

<body>
    <input type="text" value="请输入">
    <hr>
    <button disabled>按钮</button>
    <hr>
    <input type="checkbox" name="" id="c1">
<script>
    let input = document.querySelector('input')
    // 设置表单中的值
    input.value = '小米手机'
    // 设置表单的type
    input.type = 'password'

    // 修改button的disable状态
    let btn = document.querySelector('button')
    btn.disabled = false

    // checkbox自动勾选
    let chkbox = document.querySelector('#c1')
    chkbox.checked = true
</script>

7. 自定义属性

在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获得

<body>
    <div data-id="1">1</div>
    <div data-id="2">2</div>
    <div data-id="3">3</div>
    <div data-id="4">4</div>
    <div data-id="5">5</div>
    <script>
        const one = document.querySelector('div')
        console.log(one.dataset.id)
    </script>
</body>

8. 定时器-间歇函数

8.1 开发中的使用场景：

每个一段时间需要自动执行一段代码，不需要我们手动去触发
例如：网页中的倒计时
要实现这种需求，需要定时器函数
定时器函数有两种，今天先学习间歇函数

8.2 间歇函数的使用

8.2.1 间歇函数的启用

语法：

setInterval(函数，间隔时间)

作用：

每个一段时间就调用这个函数

间隔时间的单位是毫秒

例如：网页中有一个div，div中进行秒的计数

<body>
    <div class="time">1</div>
<script>
    // 匿名函数的写法
    let time_counter = 0
    setInterval(function(){
        let div = document.querySelector('.time')
        div.innerText = time_counter++
    },1000)
    
    // 调用函数的写法
    function counter(){
        console.log(time_counter)
    }
    let time_counter = 0
    setInterval(counter,500)
</script>

8.2.2 间歇函数的返回值

定时器函数的返回值是定时器的序号

如果有一个定时器，就是1，如果有2个定时器，第二个定时器的返回值就是2

8.2.3 关闭定时器

语法：

let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)

9. 综合案例

案例1：

做注册时用户协议倒计时的功能

<body>
    <textarea name="" id="" cols="30" rows="2">
        用户注册协议
        ... ...
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议(6)</button>
<script>
    // 获取元素
    let btn = document.querySelector('.btn')
    // 定义一个变量 用来计数
    let i = 6
    // 开启计时器
    let timer = setInterval(function(){
        i--
        btn.innerHTML =`我已经阅读用户协议(${i})`
        if (i === 0) {
            // 清除定时器
            clearInterval(timer)
            btn.disabled = false
            btn.innerHTML = `我同意该用户协议`
        }
    },1000)
</script>

10. 事件

事件的定义：编程时，系统内发生的动作或者发生的事情

10.1 事件监听

事件监听的定义：程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件。

事件监听的语法

元素.addEventListener('事件类型',事件调用的函数)

注意：
1. 事件类型要加引号
2. 函数是点击之后再去执行，每次点击执行一次
事件监听三要素
- 事件源：那个DOM元素被事件触发了，要获取dom元素（语法中元素就是事件源）
- 事件：用什么方式触发，比如鼠标单击click，鼠标经过mouseover等（上面括号中第一个参数）
- 事件调用的函数:要做什么事（上面括号中，第二个参数）

<body>
    <button>点击我</button>
<script>
    let btn = document.querySelector('button')
    btn.addEventListener('click',function(){
        alert('点击了我')
    })
</script>
```案例1：关闭广告

```javascript
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            position:relative;
            width:1000px;
            height:200px;
            background-color: pink;
            margin:100px auto;
            text-align:center;
            font-size:50px;
            line-height:200px;
            mso-bidi-font-weight: 700;
        }
        .box1 {
            position:absolute;
            right:20px;
            top:10px;
            width:20px;
            height:20px;
            background-color:skyblue;
            text-align:center;
            line-height:20px;
            font-size:16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box">我是广告
    <div class="box1">X</div>
</div>
<script>
    const btn = document.querySelector('.box1')
    btn.addEventListener('click',function(){
        const box = document.querySelector('.box')
        box.hidden = true;
    })
</script>

案例2：随机点名案例

<body>
<h2>随机点名</h2>
<div class="box">
    <span>名字是：</span>
    <div class="qs">这里显示姓名</div>
</div>
<div class="btns">
    <button class="start">开始</button>
    <button class="end">结束</button>
</div>

<script>
    // 数据数组
    const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
    let dis_name = null

    function getRandomName() {
        let qs = document.querySelector('.qs')
        qs.innerText = arr[Math.floor(Math.random() * (arr.length))]
    }

    function startRandomName() {
        dis_name = setInterval(getRandomName, 100)
    }

    function endRandomName() {
        clearInterval(dis_name)
    }
    const start = document.querySelector('.start');
    start.addEventListener('click',startRandomName)

    const end = document.querySelector('.end');
    end.addEventListener('click',endRandomName)

</script>
</body>

10.2 常见的事件

事件类型	代码
鼠标点击	click
鼠标经过	mouseenter
鼠标离开	mouseleave
表单获得光标	focus
表单失去焦点	blur
键盘按下	Keydown
键盘抬起	Keyup
用户输入事件	input

10.2.1 简单的鼠标经过案例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:200px;
            height:200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
<script>
    const div = document.querySelector('div')
    div.addEventListener('mouseenter',function(){
        div.style.backgroundColor = 'blue'
    })
    div.addEventListener('mouseleave',function(){
        div.style.backgroundColor = 'pink'
    })
</script>
</body>

10.2.2 焦点事件

案例5：搜索框下拉菜单

<body>
<input tyle="text">
<script>
    const input = document.querySelector('input')
    input.addEventListener('focus',function(){
        console.log('焦点触发')
    })
    input.addEventListener('blur',function(){
        console.log('失去焦点')
    })
</script>
</body>

案例6：小米搜索框

10.2.3 键盘事件

检测按键按下或抬起

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<script>
    const input = document.querySelector('input[type=text]')
    input.addEventListener('keyup', function () {
        console.log('keyup')
    })
</script>
</body>

检测字符输入事件

<body>
<input type="text">
<script>
const input = document.querySelector('input[type=text]')
input.addEventListener('input',function(){
    console.log('输入内容了')
})
</script>
</body>

10.3 事件对象

事件对象是什么

也是个对象，这个对象里有事件触发时的相关信息
使用场景

可以判断用户按下哪个键，比如按下回车键可以发布新闻

可以判断鼠标点击了哪个元素，从而做相应的操作

语法：如何获取

在事件绑定的回调函数的第一个参数就是事件对象

一般命名为event、en、e

<body>
<button>点击</button>
<script>
    const btn = document.querySelector('button')
    // 事件函数里面的e就是事件对象
	btn.addEventListener('click',function(e){
        console.log(e)
    })
</script>
</body>

事件对象的常用属性

属性	含义
type	获取当前的事件类型
clientX/clientY	获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY	获取光标相对于当前DOM元素左上角的位置
key	用户按下的键盘键的值现在不体长使用keyCode

<input type='text'>
<script>    
	const input = document.querySelector('input')
	input.addEventListener('keyup',function(e){
        if (e.key === 'Enter'){
            console.log(e.key)
        }
    })
</script>

10.4 环境对象

目标：能够分析判断函数运行在不同环境中 this所指代的对象

环境对象：指的函数内部特殊的变量this，它代表着当前函数运行时所处的环境

作用：弄清this的指向，可以让我们的代码更简洁。

每个函数内部都有一个环境变量（this）

10.5 环境对象：this

谁调用this，this就指向谁

<body>
<button>点击</button>
<script>
    function fn(){
        console.log(this)
    }
    // 普通函数里面的this指向的是window
    fn()
    // this指向调用者，button调用的this，指向的就是button
    const btn = document.querySelector('button')
    btn.addEventListener('click',function(){
        console.log(this)
        this.style.color='red'
    })
</script>
</body>

10.6 回调函数

回调函数的定义：如果将函数A作为参数传给函数B时，我们称作为参数的A为回调函数

常见的使用场景：比如之前的定时器，定时器本身就是一个函数，里面的fn就是回调函数。过了1秒钟就回去调用fn这个函数。

10.7 编程思想——排他思想

干掉所有人，复活他自己

案例：鼠标经过按钮后，变色。离开后取消

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pink{
            background-color: deeppink;
        }
    </style>
</head>
<body>
<button>first</button>
<button>second</button>
<button>third</button>
<button>forth</button>
<button>fifth</button>
<script>
    let btn = document.querySelectorAll('button')
    for (let i = 0; i < btn.length; i++) {
        btn[i].addEventListener('mousemove', function () {
        	// 去除之前激活的状态
            for (let j = 0; j < btn.length; j++) {
                btn[j].classList.remove('pink')
            }
            // 给当前触发事件的btn添加激活样式
            this.classList.add('pink')
            console.log(this)
        })
    }
</script>

13. 事件流

13.1 事件流与两个阶段说明

事件流的概念：指事件完整执行过程种的流动路径

从大向小为捕获，从document --> html --> body --> div

从小到大为冒号

实际工作都是使用事件冒泡为主

10.1.1 事件捕获

事件捕获的概念：

addEventListener('事件类型',事件处理函数,是否使用捕获机制)

<body>
    <div class="father">father
        <div class="son">son
        </div>
    </div>
<script>
    const fa = document.querySelector('.father')
    const son = document.querySelector('.son')
    document.addEventListener('click',function(){
        alert('我是爷爷')
    },true)
    fa.addEventListener('click',function(){
        alert('我是爸爸')
    },true)
    son.addEventListener('click',function(){
        alert('我是儿子')
    },true)
</script>

第三个参数如果是使用true，则点击son，则依次提示我是爷爷,我是爸爸,我是儿子这说明捕获是从大向小。

如果第三个参数填false或者什么都不填，那就是事件冒泡。

事件冒泡概念：

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件。

<代码将事件捕获里面的第三个参数true删除>

10.1.2 阻止冒泡

问题：因为默认就有冒泡模式的村咋，所以容易导致事件影响到父级元素

需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡。

前提：阻止事件冒泡需要拿到事件对象

语法：它要先获得事件对象

事件对象.stopPropagation()

注意：这个方法是阻断事件流，不仅仅是阻止冒泡，还能阻止捕获。

比如下面的代码中，我在father的事件中，添加了阻止事件流。我们再点击‘儿子’的时候，就只显示我是儿子，我是爸爸，而我是爷爷没有显示

<body>
    <div class="father">father
        <div class="son">son
        </div>
    </div>
<script>
    const fa = document.querySelector('.father')
    const son = document.querySelector('.son')
    document.addEventListener('click',function(){
        alert('我是爷爷')
    })
    fa.addEventListener('click',function(e){
        alert('我是爸爸')
        e.stopPropagation()		//阻止事件流
    })
    son.addEventListener('click',function(){
        alert('我是儿子')
    })
</script>
</body>

10.1.3 鼠标经过事件的区别

鼠标经过事件：
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave没有冒泡效果（推荐）

10.2 解绑事件

<button>点击</button>
<script>
    const btn = document.querySelector('button')
    // l0 绑定事件
    btn.onclick = function(){
        alert('click1')
    }
    // l0 事件解绑
    btn.onclick = null
    function fn(){
        alert('click2')
    }
    // l2 绑定事件
    btn.addEventListener('click',fn)
    btn.removeEventListener('click',fn)
</script>

注意：removeEventListener无法解绑匿名函数

10.3 事件委托（含重点案例）

利用事件冒泡进行事件委托

需求：如果同时给多个元素注册事件，我们怎么做？

for循环

有没有一种技巧注册一次事件就能完成以上效果呢？

如下代码，有没有什么方法对所有li进行注册，除了for循环

<ul>
    <li>我是第1个小li</li>
	<li>我是第2个小li</li>
	<li>我是第3个小li</li>
	<li>我是第4个小li</li>
	<li>我是第5个小li</li>
</ul>

利用事件冒泡的特点

给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。

事件委托的特点：将事件绑定给父元素

案例：点击每1个小li，当前li文字变为红色

<body>
<ul>
    <li>我是第1个小li</li>
    <li>我是第2个小li</li>
    <li>我是第3个小li</li>
    <li>我是第4个小li</li>
    <li>我是第5个小li</li>
    <p>我不需要变色</p>
</ul>
<script>
    // 将子元素的事件绑定到父元素身上
    // 1. 获得父元素
    const ul = document.querySelector('ul')
    // 2. 进行事件绑定
    ul.addEventListener('click',function(e){
    // 我们只需要点击li才变色，所以需要一个判定
        // e.target 指向的是点击的事件对象
        console.dir(e.target)
        if(e.target.tagName !== 'P'){
            e.target.style.color = 'red'
        }
    })
</script>
</body>

10.4 阻止默认行为

例如：网站用户注册，如果信息没有填写完整，就不能进行注册信息的提交。这是就需要阻止表单submit的默认行为。

语法：

e.preventdefault()

10.5 其他事件

页面加载；页面滚动；页面缩放

10.5.1 页面加载事件

页面加载时window对象的事件

它需要将JavaScript写在head标签中

加载外部资源（如图片，外联css和JavaScript）加载完毕后触发事件
事件名：load（等待的意思）
监听页面所有资源加载完毕：
- 给window添加load事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.addEventListener('load', function () {
            const btn = document.querySelector('button')
            btn.addEventListener('click', function () {
                alert('点击结束')
            })
        })
    </script>
</head>
<body>
<button>点击</button>
</body>
</html>

10.5.2 元素滚动事件

滚动条在滚动的时候持续触发的事件
事件名：scroll
监听整个页面滚动
```
window.addEventListener('scroll',function(){
   
})
```
使用场景：比如我们想滚动到某一个地方，页面产生一些改变的话，那我们需要获取滚动的位置。
- 两个属性：scrollLeft和scrollTop
  
  scrollTop：滚动时，被卷去的头部
  
  scrollLeft：滚动时，被卷去的左侧
  
  这两个值是可读写的

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding-top: 100px;
            height: 3000px;
        }
    </style>
</head>
<body>
<script>
    window.addEventListener('scroll',function(){
        // 页面滚动的时候，滚动的是HTML，应该获取html被卷去头部是多少，它是比body更大的容器
        // document.documentElement是HTML标签，这是html获取的写法
        const n = document.documentElement.scrollTop
        console.log(document.documentElement.scrollTop)
    })
</script>
</body>

10.5.3 页面尺寸事件

esize事件

resize 浏览器本身的大小（不是缩放）发生变化的时候，可以触发的事件

window.addEventListener('resize',function(){
	let w = document.documentElement.ClientWidth
    console.log(w)
})

检测屏幕宽度
- clientWidth、clientHeight
  
  获取元素的可见部分宽高（不包含边框，margin，滚动条等）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            padding: 10px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        const div = document.querySelector('div')
        console.log(div.clientWidth)
    </script>
</body>

offsetWidth、offsetHeight

offset与client的区别：offset包括自身宽高外，还包括padding，border
获取位置：offsetLeft和offsetTop

获取元素举例自己定位父级的左、上距离

11 时间对象

时间对象：用来表示时间的对象
作用：可以得到当前系统的时间

11.1 实例化

在代码中发现了new关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间,小括号内为空，获得的是当前时间
```
let date = new Date() //实例化一个date
```
获得指定时间
```
let date = new Date('1949-10-01')
```

11.2 时间对象方法

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为0~11,因此取值后需要`+1`
getDate()	获得月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为0~6
getHours()	获取小时	取值为0~23
getMinutes()	获取分钟	取值为0~59
getSeconds()	获取秒	取值为0~59

案例1：页面显示时间

需求：将当前时间以：YYYY-MM-DD HH:MM:SS 形式显示在页面，并在页面时实现时钟的功能

<body>
<div></div>
    <script>
        function trans(Num){
            if (Num<10){
                return '0'+Num
            } else {
                return Num
            }
        }
        setInterval(function() {
            let timer = new Date()
            let year = timer.getFullYear()
            let month = trans(timer.getMonth() + 1)
            let date = trans(timer.getDate())
            let hour = trans(timer.getHours())
            let minute = trans(timer.getMinutes())
            let second = trans(timer.getSeconds())
            let datetime = `${year}-${month}-${date} ${hour}:${minute}:${second}`
            let time_box = document.querySelector('div')
            time_box.innerHTML = datetime
        },1000)
    </script>
</body>

时间的其他写法：timer.tolocalLestring(),它可以直接获得年月日时间的简单格式

11.3 时间戳

什么是时间戳:从1970年01月01日00时00分00秒起至现在的毫秒数，它时一种特殊的计量时间的方式。

11.3.1 获取时间戳的方法

方法1：使用getTime()的方法

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

1701210245638

方法2：使用+new Date()的方法

console.log(+new Date())

方法3：使用Date().now()

console.log(Date().now())

11.3.2 获取指定时间的时间戳

console.log(+new Date('2025-2-22 00:00:00'))

前2种方法需要进行实例化，但是这种方法就可以不进行实例化

但是只能得到当前的时间戳，而前面2种可以返回指定时间的时间戳

12 节点操作

12.1 DOM节点

节点的含义

DOM树中里任何内容都称之为节点
节点类型
- 元素节点
  
  所有的标签比如body，div
  
  html是根节点
- 属性节点
  
  所有属性
- 文本节点
  
  所有的文本
- 其他

12.2 查找节点

节点关系：
- 父节点
- 子节点
- 兄弟节点

12.2.1 父节点的查找：`子元素.parentNode`

返回最近一级的父节点

比如，通过子节点，关闭父节点

<body>
    <div class="father">
        <div class="son">
            儿子
        </div>
    </div>
<script>
    let son = document.querySelector('.son')
    son.parentNode.style.display = 'none'
</script>

案例：关闭父节点

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .erweima img{
            width:300px;
        }
    </style>
</head>
<body>
    <div class="erweima">
        <img src="../static/img/p1.jpeg" alt="">
        <i class="close_btn">x</i>
    </div>
<script>
    let btn = document.querySelector('i')
    btn.addEventListener('click',function(){
        this.parentNode.style.display = 'none';
    })
</script>

12.2.2 子节点查找

childNodes

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

仅获得所有元素节点

返回的还是一个伪数组

语法：父元素.children

案例：点击按钮后，ul的所有文字变为红色

12.2.3 兄弟节点

下一个兄弟节点

语法：nextElementSibling属性

上一个兄弟节点

语法：previousElementSibling属性

<button>点击</button>
    <ul>
    <li>第一个</li>
    <li class="two">第二个</li>
    <li>第三个</li>
    <li>第四个</li>
  </ul>
<script>
  let btn =document.querySelector('button')
  let two = document.querySelector('.two')
  btn.addEventListener('click',function(){
    two.style.color='pink'
    two.nextElementSibling.style.color='blue'
    two.previousElementSibling.style.color = 'blue'
  })
</script>

12.3 增加节点

目标：能够根据需求新增节点的能力
比如添加评论：点击发布后，下面出现一条评论
增加节点的步骤：
1. 先创建一个节点
2. 再将节点放入到指定的元素内部

12.3.1 创建节点

语法：

document.createElement('标签名')

12.3.2 追加节点

插入到父元素的最后一个元素

语法：

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

<body>
<ul></ul>
<script>
    // 第1步：创建节点
    const div = document.createElement('div')
    // 第2步：将创建的标签放在页面中指定的父元素下面
    document.body.appendChild(div)

    // 在ul中追加li标签
    const ul = document.querySelector('ul')
    const li = document.createElement('li')
    ul.appendChild(li)
</script>
</body>

插入到父元素的某个元素前面

语法：

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

<body>
<ul></ul>
<script>
 // 在父元素中的末尾创建一个节点
 // 第1步：创建节点
 const div = document.createElement('div')
 // 第2步：将创建的标签放在页面中指定的父元素下面
 document.body.appendChild(div)

 // 在ul中追加li标签
 const ul = document.querySelector('ul')
 const li = document.createElement('li')
 ul.appendChild(li)
 li.innerHTML = '我是老大'

 // 在父元素中指定放置位置，
 const li_1 = document.createElement('li')
 ul.insertBefore(li_1,ul.children[0])
 li_1.innerHTML = '我是li'
</script>
</body>

案例：学成在线

克隆节点

语法：

现有元素.cloneNode(布尔值)

布尔值为true：克隆时包含后代节点一起克隆

布尔值为false：克隆时不包括后代节点

<body>
<ul>
    <li>我是内容</li>
</ul>
<script>
    let li = document.querySelector('ul li')
    let newli = li.cloneNode(true)
    let ul = document.querySelector('ul')
    ul.appendChild(newli)
</script>
</body>

删除节点

若一个节点在页面中已不需要时，可以删除它
在JavaScript原生DOM操作中，要删除元素必须通过父元素删除

语法：

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

注意:

如不存在父子关系则删除不成功
删除节点和隐藏节点有区别：隐藏节点还是存在的，但删除，是从html中删除节点。

案例：点击页面button，删除ul中的第一个li标签

<button>点击</button>
<ul>
    <li>我是内容1111111</li>
    <li>我是内容2222222</li>
</ul>
<script>
    let btn = document.querySelector('button')
    btn.addEventListener('click', function () {
        let ul = document.querySelector('ul')
        let li_ar = document.querySelectorAll('ul li')
        // 或者使用
        // ul.removeChild(ul.children[0])
        ul.removeChild(li_ar[0])
    })
</script>

13 M端事件

M端事件就是移动端

事件	说明
触屏事件
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发