前端学习笔记 | WebAPIs（DOM+BOM）

news2024/11/17 20:44:37

一、作用和分类

1、基本概念

作用：使用JS去操作HTML和浏览器

分类：DOM（文档对象模型）和BOM（浏览器对象模型）

html的标签=JS的DOM对象

2、获取DOM对象-参数必须加引号

（1）选择匹配的第一个元素：可直接进行修改

document.querySelector('选择器') //返回DOM对象

（2）获取多个：返回伪数组，只能通过遍历的方式修改

document.querySelectorAll('ul li') //返回DOM对象

（3）其他

b8ccde623f2245f58be8d1b11ce74189.png

二、操作元素

1、操作元素内容

（1）obj.innerText 仅获取文字

（2）obj.innerHTML 可以解译标签(添加/更改标签）

2、操作元素属性

（1）img.src

（2）img.title

...

3、操作元素样式属性

（1）通过style修改（麻烦）

语法：obj.style.属性值

注：

a.css中带-的采用小驼峰命名法，如background-color→backgroudColor

b.大部分值都是字符串，需要加''"，带单位

c.修改body属性可直接使用：document.body.style.属性=' '

（2）通过类名修改（不推荐）

obj.className=' '

缺点：会覆盖原来的类名，需要手动添加原类名

（3）通过classList修改（推荐）

元素.classList.add('类名')

元素.classList.remove('类名')

元素.classList.toggle('类名')  有就删掉，没有就添加

【案例】轮播图

4、操作元素表单属性

表单.value='' 修改表单的值

表单.type='password' 修改成不可见

input.checked=true/false 复选框选中/不选中

button.disabled=true/false 按钮禁用/不禁用

5、自定义属性

在元素标签中内加属性：data-名称

获取自定义属性集合：元素.dataset

获取自定义属性：元素.dataset.名称

6、间歇函数-计时器

（1）开启定时器

方法1：setInterval(函数名-不加小括号，间隔时间-ms)
方法2：setInterval(function(){},间隔实际-ms)

（2）关闭定时器

clearInterval（定时器名）

三、事件监听

事件是在编程中系统发生的动作或发生的事件

1、事件语法

元素对象.addEventListener('事件类型'，要执行的函数)

2、事件监听三要素

事件源：哪个dom元素，要获取dom元素

事件类型：用什么方式触发-点击、鼠标经过...

事件调用的函数：要做什么事

3、事件类型

鼠标事件：click（鼠标点击）、mouseenter（鼠标经过）、mouseleave（鼠标离开）

焦点事件：focus（获得焦点）、blur（失去焦点）

键盘事件：keydown（键盘按下触发）、keyup(键盘抬起触发，推荐)

文本事件：input（用户输入事件）

4、事件对象

是什么：也是个对象，有事件触发时的相关信息

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

5552bd99b7be450e972c523944670854.png

5、环境对象

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

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

谁调用，this就是谁

6、回调函数

是什么：函数A作为参数传递给函数B

应用：定时器、监听事件

四、事件流

事件完全执行的流动路径：捕获阶段+冒泡阶段

1、事件捕获

事件被触发，所有元素从祖先开始到子代依次被执行

2、事件冒泡 

事件被触发，所有元素从子代开始到祖先依次被执行

3、阻止冒泡

把事件限制在当前元素内，防止冒泡：既能阻止冒泡，也能阻止捕获

事件对象.stopPropagation()

4、事件解绑

（1）传统on注册（L0）

btn.οnclick=null

（2）事件监听注册（L2）

使用removeEventLisener(事件，函数名)

匿名函数无法解绑，只能修改成在外部定义的函数

5、鼠标经过事件

mouseover和mouseout会有冒泡效果，不推荐

mouseenter和mouseleave没有冒泡效果，推荐

 五、事件委托

1、是什么

减少事件注册次数，利用冒泡的原理：给父元素添加事件-子元素点击-冒泡到父元素

2、方法

（1）获取父元素

（2）注册事件

（3）利用事件对象.target.tagName找到真正触发元素，设置条件：只有点击真正触发元素才能执行函数

3、阻止事件

（1）阻止冒泡

事件对象.stopPropagation()

（2）阻止默认行为

事件对象e.preventDefault()

六、其他事件 

1、页面加载事件

（1）事件名：load

作用：所有外部资源加载完毕后执行js

window.addEventListener('load'.function(){})

（2）事件名：DOMContentLoaded

作用：HTML文档被完全加载和解析完成后，不用等等样式、图像等完全加载

2、元素滚动事件

事件名：scroll

滚动条在滚动时触发事件

window.addEventListener('scroll'.function(){})

（1）获取被卷去的大小：

  • scrollLeft
  • scrollTop

检测方法：

document.documentElement.scrollTop

（2）scrollTo，滚动至具体位置

window.scrollTo(x,y)

3、页面尺寸事件

窗口改变时触发事件

window.addEventListener('resize'.function(){})

clientWidth、clientHeight：获取宽高（不包含border）

七、元素的尺寸与位置

offsetWidth、offsetHeight：获取宽高（内容+padding+border）

offsetLeft、offsetTop：得到的位置优先级（以带有定位的父级>文档左上角）

dcfc11c5284b4895b00527c5d8e3b991.png

八、日期对象

日期对象：用于表示时间的对象

作用：获取当前系统时间

1、实例化日期对象

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

2.转换日期格式

日期对象.toLocaleString()
日期对象.toLocaleTimeString() 仅显示时间
日期对象.toLocaleDateString() 仅显示日期

3.时间戳：计算时间的方式—主要用于计算倒计时

三种方式获取时间戳

1、getTime() 必须实例化Date()
2、+new Date() 推荐
+new Date('2022-4-1 18:30:00')
3、Date.now() 仅能返回当前的时间戳

九、节点操作

1、DOM节点

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

2、节点操作（元素节点）

（1）查找节点

通过关系来查找

  • 父节点
元素对象.parentNode
  • 字节点
元素对象.children
  • 兄弟节点
元素对象.previousElementSibling 上一个兄弟元素
元素对象.nextElementSibling 下一个兄弟元素

（2）增加节点

步骤1 创建节点

const div = document.createElement('div')

步骤2  追加节点

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

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

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

父元素.insertBefore(要插入的元素,在哪个元素前面)
e.g ul.insertBefore(li,ul.children[0])

（3）克隆节点

步骤1 克隆元素

元素对象.cloneNode(true)
参数：
true 克隆标签及内容
false 仅可怜标签不克隆内容

步骤2 追加元素

元素对象.appendChild(要插入的元素)

（4）删除节点

删除元素必须通过父元素删除

父元素.removeChild(父元素.children[0])

 十、M端事件（移动端）

1、了解M端常见的事件

  • touchstart 手指在DOM元素中触摸
  • touchmove 手指在DOM元素中滑动
  • touchend  手指在DOM元素中移开

2、swiper插件

（1）引入.css和.js文件

（2）复制demo的HTML内容、CSS内容、JS内容

十一、window对象

1、BOM

2、定时器（延时函数）

只执行一次

setTimeout(回调函数，等待延迟的毫秒数)

清除延时函数

let timer=setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)

3、JS执行机制

同步任务：都在主线程上执行，形成一个执行栈

异步任务：添加到任务（=消息）队列中

（1）普通事件

（2）资源加载

（3）定时器

事件循环：主线程不停地获取任务→执行任务→再获取任务→执行任务

4、location对象

数据类型：对象

  • location.href：获取完整的URL地址，对其赋值时用于地址的跳转
  • location.search：获取地址中携带的参数，符号？后面部分
  • location.hash：获取地址中的哈希值，符号#后面部分
  • reload（）：刷新页面，强制刷新reload（true）

5、navigator对象

navigator.userAgent：主要用来获取浏览器信息

应用：判断进入pc或者移动端

6、history对象

back()：进行后退

forward()：前进

go()：-1后退，1前进

十二、本地存储

1、本地存储的介绍

存储在本地用户浏览器中，一刷新不丢失数据

2、本地存储的分类

（1）localStorage

本地存储只能存字符串类型

//增-添加数据
localStorage.setItem(key,value)
//查-获取数据
localStorage.getItem(key)
//删-删除数据:只删除名字
localStorage.removeItem(key)
//改-前提，已有改键值
localStorage.setItem(key,value)

（2）sessionStorage

生命周期为关闭浏览器窗口，再同一个窗口下数据可共享，用法同localStorage

3、存储复杂数据类型

复杂数据类型必须先转为JSON

localStorage.setItem(key,JSON.stringify(obj))

取出来需要再转成对象

JSON.parse(localStorage.getItem('obj'))

十三、数组map和join方法

目的：利用数组的方式实现字符串拼接（高效，开发常用）

1、map

遍历处理的数据，生成新的数组

const arr=['red','blue','pink']
arr.map(function(ele,index){
return ele+'颜色'
})

2、join

把数组中所有元素转换成一个字符串

arr.join(连接字符串)

3、map+join渲染页面

（1）渲染业务要封装成一个函数render

（2）使用map方法遍历数组，里面更换数据，然后会返回有数据的tr数组

（3）通过join方法把map返回的数组转换为字符串

（4）把字符串通过innerHTML赋值给tbody

十四、正则表达式

1、介绍

正则表达式是用于匹配字符串中字符组合的模式。在JS中，正则表达式也是对象。

通常来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

2、作用

  • 表单验证（匹配）
  • 过滤敏感词（替换）
  • 字符串中提取我们想要的部分（提取）

3、语法

（1）定义规则

const reg=/规则词/

（2）查找

reg.test(字符串变量)：返回true/false

reg.exec(字符串变量)：找到返回数组，找不到返回null

注：也可写成下列

/哈哈/.test('哈哈'）

4、元字符

是具有特殊含义的字符

[a-z]表示26个字母

（1）边界符

  • ^ 开头
  • $ 结尾

（2）量词

  • *  重复零次或更多次
  • + 重复一次或更多次
  • ？重复零次或一次
  • {n} 重复n次
  • {n,} 重复n次或更多次
  • {n,m} 重复n到m次

（3）字符类

  • [ ] 匹配字符串集合
  • [^ ] ^为取反符号
  • . 除换行符之外的字符

（4）预定类

5、修饰符

  • /表达式/修饰符
    • i 不区分大小写  e.g /表达式/i
    • g 全局匹配，找出所有满足正则表达式的
  • replace
const re=str.replace(/java/ig，'前端')

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1515220.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机三级错题整理

计算机三级错题整理

计算机三级整理 注意事项 第二道大题1.（第二套）2.（第四套真题）3.三十一套 第三道大题1.（第一套真题）2.（第二份真题）3.（第四套真题）4.二十九套5.三十套6.三十三…
阅读更多...
《智能便利，畅享便利柜平台的架构奇妙之旅》

《智能便利，畅享便利柜平台的架构奇妙之旅》

便利柜平台作为一种智能化、便捷的自助服务解决方案，正在逐渐走进人们的生活。本篇博客将深入探讨便利柜平台的架构设计理念、优势和实践，帮助读者了解如何构建智能便利柜平台，提供更便捷的自助服务体验。 ### 便利柜平台架构设计 #### 1. …
阅读更多...
UE4案例记录

UE4案例记录

UE4案例记录（制作3D角色显示在UI中） 制作3D角色显示在UI中 转载自youtube视频 https://www.youtube.com/channel/UCC8f6SxKJElVvaRb7nF4Axg 新建项目 创建一个Actor 场景组件->摄像机组件->场景捕获组件2D，之后添加一个骨骼网格体…
阅读更多...
Python基础课堂最后一课23——正则对象

Python基础课堂最后一课23——正则对象

文章目录 前言一、正则对象是什么？二、正则表达式基本分类1.普通字符2.元字符 总结 前言 很开心能和你们一些学习进步，在这一个多月的时间中，是你们让我坚持了下来，完成了python基础课堂编写，不管如何，我们…
阅读更多...
ubuntu 23.04 安装 中文输入法

ubuntu 23.04 安装 中文输入法

1、安装 fcitx sudo apt install fcitxfcitx 安装好后，可以使用 fcitx-configtool 命令进行配置，其界面如下所示。在这里可以配置不同输入法的切换快捷键，默认输入法等。刚安装系统后，这里只有一个输入法，所以接下来要…
阅读更多...
SORA和大语言模型的区别

SORA和大语言模型的区别

OpenAI的文生视频模型SORA与大语言模型（LLM）的主要区别在于它们的应用领域和处理的数据类型，数据处理能力、技术架构、多模态能力和创新点。SORA作为一款专注于视频生成的模型，展现了在处理视觉数据方面的独特优势和创新能力。 1…
阅读更多...
HttpContext请求接收上下文模块设计与实现(http模块四)

HttpContext请求接收上下文模块设计与实现(http模块四)

目录 类功能 类定义 类实现 编译测试 类功能 类定义 // HttpContext接收请求上下文模块功能设计 typedef enum {RECV_HTTP_ERROR,RECV_HTTP_LINE,RECV_HTTP_HEAD,RECV_HTTP_BODY,RECV_HTTP_OVER } HttpRecvStatu;class HttpContext { private:int _resp_statu; …
阅读更多...
刷题日记——反转公约数、循环位移（厦门大学机试）

刷题日记——反转公约数、循环位移（厦门大学机试）

题目 分析 将输入的数字看作字符串&#xff0c;然后将字符串转成真实值计算两个真实值&#xff0c;然后从1开始遍历公约数&#xff0c;每次发现一个更大的公约数就替换&#xff0c;直到找不到公约数 代码 #include <cstdio> #include <map> #include <string…
阅读更多...
Redis第8讲——Cluster集群模式详解

Redis第8讲——Cluster集群模式详解

前面两篇文章介绍了Redis主从和哨兵模式&#xff0c;不难发现&#xff0c;它们都有一些共同的缺点&#xff0c;首先在主从切换的过程中会丢失数据&#xff1b;另一个就是只有一个master&#xff0c;只能单点写&#xff0c;并没有水平扩容能力。而且每个节点都保存了所有的数据&…
阅读更多...
请说一下卷积神经网络里的特征图和感受野怎么计算？VGG网络的特点？如何解释？

请说一下卷积神经网络里的特征图和感受野怎么计算？VGG网络的特点？如何解释？

请说一下卷积神经网络里的特征图和感受野怎么计算&#xff1f; 特征图的计算 首先要明确什么是特征图&#xff1f; 特征图是卷积层输出的二维数组&#xff0c;每个元素表示一个特定区域的特征。特征图的大小取决于输入图像的大小、卷积核的大小、步幅&#xff08;stride&…
阅读更多...
专升本 C语言笔记-08 goto语句

专升本 C语言笔记-08 goto语句

goto语句 无条件跳转运算符(凡是执行到goto语句会直接跳转到 定义的标签) 缺点&#xff1a;滥用goto语句将会导致逻辑混乱&#xff0c;导致系统崩溃等问题! ! ! 代码演示 int i 0; //定义标签 jump(名字随便起哦) jump:printf("%d ",i); i; if(i < 10)goto j…
阅读更多...
JS高级_数据类型

JS高级_数据类型

undefined与null的区别? undefined代表没有赋值null代表赋值了, 只是值为null // 1. undefined与null的区别?var a1var a2 nullconsole.log(a1, a2)什么时候给变量赋值为null呢? var a null //已经确定a是一个对象, 但还没具体赋值&#xff08;开始&#xff09;a null …
阅读更多...
软考高级：系统工程方法（霍尔三维结构、切克兰德方法等）概念和例题

软考高级：系统工程方法（霍尔三维结构、切克兰德方法等）概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…
阅读更多...
六 超级数据查看器 讲解稿 详情1 概述

六 超级数据查看器 讲解稿 详情1 概述

六 超级数据查看器 讲解稿 详情1 概述 点此此处 以新界面 打开B站 当前视频教程 APP下载地址 百度 下载地址 ​ 讲解稿全文&#xff1a; 大家好&#xff0c;今天我们讲解一下超级数据查看器详情界面。由于内容较多&#xff0c;讲解要分为7集&#xff0c;这是第一集 首…
阅读更多...
云仓酒庄北京朝阳区旗舰店发布活动盛况：红酒品鉴沙龙共筑美好

云仓酒庄北京朝阳区旗舰店发布活动盛况：红酒品鉴沙龙共筑美好

原标题&#xff1a;云仓酒庄北京朝阳区旗舰店活动盛况&#xff1a;红酒品鉴沙龙与招商交流共筑美好未来 在繁忙的都市中&#xff0c;有一片静谧的天地&#xff0c;那便是云仓酒庄北京朝阳区旗舰店。这里不仅是红酒爱好者的聚集地&#xff0c;更是商业交流的新平台。近日&#…
阅读更多...
算法详解——图的深度优先遍历和广度优先遍历

算法详解——图的深度优先遍历和广度优先遍历

目录 一、图结构二、深度优先遍历2.1 图的遍历2.2 深度优先遍历过程2.3 深度优先遍历核心思想2.4 深度优先遍历实现 三、广度优先遍历3.1 广度优先遍历过程3.2 广度优先遍历核心思想3.3 广度优先遍历实现 参考文献 一、图结构 图结构指的是如下图所示的由节点和边组成的数据。 …
阅读更多...
AUTOSAR软件配置（3）：MCAL下载安装

AUTOSAR软件配置（3）：MCAL下载安装

前言 所有的NXP软件的下载安装都是需要自己在官网去注册账号的 中文的NXP官方网址&#xff1a;恩智浦半导体官方网站 | NXP 半导体 注&#xff1a;本文指导安装教程将以S32K144平台为例展开。 下载 找到下载入口的指引 然后在左侧的导航栏找到AUTOSAR 然后选择4.2版本 在…
阅读更多...
【MySQL探索之旅】MySQL数据表的增删查改（初阶）

【MySQL探索之旅】MySQL数据表的增删查改（初阶）

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &…
阅读更多...
kubernetes之概念入门篇

kubernetes之概念入门篇

K8S的内容是要比docker多很多的。 kubernetes中文官网&#xff1a; Kubernetes(K8S)中文文档_Kubernetes中文社区 1、认识kubernetes 1.1、什么是kubernetes&#xff1f; kubernetes是一个开源的&#xff0c;用于管理云平台中多个主机上的容器化的应用&#xff0c;kubernetes…
阅读更多...
鸿蒙API9+axios封装一个通用工具类

鸿蒙API9+axios封装一个通用工具类

使用方式&#xff1a; 打开Harmony第三方工具仓&#xff0c;找到axios&#xff0c;如图&#xff1a; 第三方工具仓网址&#xff1a;https://ohpm.openharmony.cn/#/cn/home 在你的项目执行命令&#xff1a;ohpm install ohos/axios 前提是你已经装好了ohpm &#xff0c;如果没…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023