js学习笔记（五）

最新推荐文章于 2024-07-20 10:36:53 发布

zxy0330

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量169

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/zxy0330/article/details/126284111

版权

前言

本笔记是b站黑马程序员前端入门教程的听课笔记，主观性较强，初衷是与大家共同交流，一起进步。

节点操作

DOM节点的类型

DOM树里每一个内容都称之为节点
节点类型：

元素节点
属性节点
文本节点
其他

查找节点

父节点查找

使用parentNode属性
返回最近一级的父节点，找不到返回为null

子元素.parentNode

子节点查找
chlidNodes：获得所有子节点、包括文本节点（空格、换行）、注释节点等
children：仅获得所有元素节点，返回的还是一个伪数组

父元素.parentNode

兄弟关系查找
下一个兄弟节点：nextElementSibling 属性
上一个兄弟节点：previousElementSibling 属性

增加节点

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

document.createElement('标签名')

追加节点

//插入到这个父节点的最后一个子元素
父元素.appendChild(要插入的元素)
//插入到这个父节点的某个子元素前面
父元素.insertBefore(要插入的元素,在哪个元素前面)

删除节点

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

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

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

时间对象

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

实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间

//获取当前时间
let date=new Date()
//获得指定时间
let date=new Date('1949-10-01')

时间对象方法

因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
时间对象方法

时间戳

时间戳是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
获取时间戳的方法

//getTime()方法
let date = new Date()
console.log(date.getTime())
//简写+new Date()
console.log(+new Date())
//使用 Date().now()
console.log(Date().now())

事件对象

获取事件对象

事件对象是什么：也是个对象，这个对象里有事件触发时的相关信息
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

元素.addEventListener('click',function(e){});

事件对象常用属性

部分常用属性
type

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

事件流

事件流与两个阶段说明

事件流指的是事件完整执行过程中的流动路径
说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
简单来说：捕获阶段是从父到子冒泡阶段是从子到父

事件捕获和事件冒泡

事件冒泡
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的

事件捕获
从DOM的根元素开始去执行对应的事件 (从外到里)，需要写对应代码才能看到效果

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

说明：

addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false
若是用 L0 事件监听，则只有冒泡阶段，没有捕获

阻止事件流动

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
若想把事件就限制在当前元素内，就需要阻止事件流动
阻止事件流动需要拿到事件对象
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

事件对象.stopPropagation()

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果(推荐)
阻止默认行为，比如链接点击不跳转，表单域的不提交
两种注册事件的区别：
传统on注册（L0）
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖偶就可以实现事件的解绑
都是冒泡阶段执行的
事件监听注册（L2）
语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
匿名函数无法被解绑