当前位置： 首页 > news >正文

web APIs(更新中)

news 2025/7/18 7:26:43

本文是基于 B 站 pink 老师前端 JavaScript 课程整理的学习笔记

参考资料MDN

Dom获取&属性操作

变量声明

 由前文（前端基础JavaScript 笔记）知变量声明有三个 var let 和 const

现在我们建议：const 优先

原因：

  • const 语义化更好
  • 很多变量我们声明的时候就知道他不会被更改了（值有变化就改用 let ,比如 i++里的i）
  • 实际开发中也是，比如react框架，基本用const

 但是数组和对象可以将 let 改为 const.

对于引用数据类型，const声明的变量，里面存的不是值，不是值，是地址！

为什么const声明的对象可以修改里面的属性？

  • 因为对象是引用类型，里面存储的是地址，只要地址不变，就不会报错
  • 建议数组和对象使用 const 来声明

什么时候使用let声明变量？

  • 如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用let
  • 比如 一个变量进行加减运算，比如 for循环中的 i++

1.Web API 基本认知

 1.1 作用和分类

作用: 就是使用 JS 去操作 html 和浏览器 

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

1.2 什么是DOM

 DOM（Document Object Model——文档对象模型）是浏览器提供的一套专门用来操作网页内容 的功能，用于开发网页内容特效和实现用户交互。

1.3 DOM树

  1. 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
  2. 描述网页内容关系的名词
  3. 作用：文档树直观的体现了标签与标签之间的关系 

1.4 DOM对象（重要）

DOM对象：浏览器根据html标签生成的 JS对象（DOM对象）

DOM的核心思想：把网页内容当做对象来处理

document 对象：

  • 是 DOM 里提供的一个对象
  • 所以它提供的属性和方法都是用来访问和操作网页内容的 。例：document.write()
  • 网页所有内容都在document里面
<div>一段话</div>
<!-- <div>在HTML里叫标签，在这里叫DOM对象 -->

2.获取DOM对象

 2.1 根据CSS选择器来获取DOM元素 (重点)

 2.1.1.选择匹配的第一个元素
document.querySelector('css选择器')

参数: 包含一个或多个有效的CSS选择器 字符串（必须是字符串，也就是必须加引号）

返回值： CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到，则返回null。

能直接操作修改

2.1.2. 选择匹配的多个元素
document.querySelectorAll('css选择器')
例如
document.querySelectorAll('ul li')

 参数: 包含一个或多个有效的CSS选择器字符串（必须是字符串，也就是必须加引号）

返回值： CSS选择器匹配的NodeList 对象集合

不能直接操作修改（获取的是数组）

得到的是一个伪数组：

  • 长度有索引号的数组
  • 是没有 pop() push() 等数组方法 想要得到里面的每一个对象，则需要遍历（for）的方式获得。 

 哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

 2.2 其他获取DOM元素方法（了解）

//根据id获取一个元素
document.getElementById('nav')
//根据标签获取一类元素  获取页面索引的div
document.getElementsByTagName('div')
//根据类名获取元素 获取页面所有类名为W
document.getElementsByClassName('W')

3.操作元素内容

3.1.对象.innerText 属性

 将文本内容添加/更新到任意标签位置, 显示纯文本，不解析标签

<div class="box">文字</div>
<script>const box = document.querySelector('.box')console.log(box.innerText)    //获取文字内容box.innerText = '新内容'   //修改文字内容
</script>

3.2.对象.innerHTML 属性

将文本内容添加/更新到任意标签位置 ，会解析标签，多标签建议使用模板字符

<div class="box">文字</div>
<script>const box = document.querySelector('.box')console.log(box.innerText)    //获取文字内容box.innerHTML = '<strong>新内容</strong>'   //修改文字内容
</script>

4.操作元素属性

 4.1 操作元素常用属性

还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片

最常见的属性比如： href、title、src 等

对象.属性=值const picture = document.querySelector('img')
picture.title = 'JavaScript笔记'
案例：随机图片
<body><img src="./images/1.webp" alt=""><script>// 取到 N ~ M 的随机整数function getRandom(N, M) {return Math.floor(Math.random() * (M - N + 1)) + N}// 1. 获取图片对象const img = document.querySelector('img')// 2. 随机得到序号const random = getRandom(1, 6)// 3. 更换路径img.src = `./images/${random}.webp`</script>
</body>

4.2 操作元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。比如通过 轮播图小圆点自动更换颜色样式 ，点击按钮可以滚动图片，这是移动的图片的位置 left 等等

4.2.1.通过 style 属性操作CSS

对象.style.样式属性 = '值'<body><div class="box"></div><script>// 1. 获取元素const box = document.querySelector('.box')//2. 修改样式属性 对象.style.样式属性 = '值'  别忘了跟单位box.style.width = '300px'// 多组单词的采取 小驼峰命名法box.style.backgroundColor = 'hotpink'box.style.border = '2px solid blue'box.style.borderTop = '2px solid red'</script>
</body>
页面刷新，页面随机更换背景图片
。。。。。。<style>body{background: url('../photo/1.jpg') no-repeat top center/cover;}</style>
</head>
<body><script>let num=Math.floor(Math.random()*7)+1document.body.style.backgroundImage = `url(../photo/${num}.jpg)`</script>
</body>
 4.2.2. 操作类名(className) 操作CSS

 使用：修改的样式比较多，直接通过style属性修改比较繁琐

元素.className = '类名'// 1. 获取元素
const div = document.querySelector('div')
// 2.添加类名  class 是个关键字 我们用 className
div.className = 'nav box'    //保证前面的类不会失效

由于class是关键字, 所以使用className去代替

className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

4.2.3. 通过 classList 操作类控制CSS

 为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')<body><div class="box active">文字</div>
。。。。。。// 1. 获取元素
const box = document.querySelector('.box')// 2. 修改样式// 2.1 追加类 add() 类名不加点，并且是字符串
box.classList.add('active')// 2.2 删除类  remove() 类名不加点，并且是字符串
box.classList.remove('box')// 2.3 切换类  toggle() 有该类就删掉，没有就加上
box.classList.toggle('active')

 使用 className 和classList的区别？

  • 修改大量样式的更方便
  • 修改不多样式的时候方便
  • classList 是追加和删除不影响以前类名

 4.3 操作表单元素 属性

获取: DOM对象.属性名

设置: DOM对象.属性名 = 新值

//获取元素
const uname =  document.querySelector('input')
//获取值 获取表单里的值 用 表单.value
console.log(uname.value)  //不能用innerHTML
//设置表单的值
uname.value = '文本'

 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性，比如： disabled、checked、selected

//获取
const ipt = document.querySelector('input')
//默认为false，不选中
ipt.checked = true//获取
const button = document.querySelector('botton')
//默认为false，不禁用
button.disabled = true

4.3.自定义属性

标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、 selected 

自定义属性：

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

<div data-id="yi" data-spm="...">1</div>
<script>const one = document.querySelector('div')console.log(one.dataset)  //获取全部的自定义属性值console.log(one.dataset.id)  //yi
</script>

5.定时器-间歇函数

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发，例如：网页中的倒计时

目标：能够使用定时器函数重复执行代码

定时器函数可以开启和关闭定时器

5.1.开启定时器

setInterval(函数，时间间隔)
// 开启定时器  setInterval(函数,间隔时间)  单位ms
setInterval(function(){console.log('一秒钟执行一次')
}, 1000)setInterval(函数名，时间间隔)
function fn(){console.log('一秒钟执行一次')
}
setInterval(fn , 1000)    //不用写小括号！
//如果要加小括号就要加引号（很少见）
setInterval('fn()',1000)

1.函数名字不需要加括号

2.定时器返回的是一个id数字 

5.2.关闭定时器

关闭定时器： let 变量名 = setInterval(函数，间隔时间)clearInterval（变量名）function fn(){console.log('一秒钟执行一次')
}
let a = setInterval(fn, 1000)
clearInterval(a)

1.函数名字不需要加括号

2.定时器返回的是一个id数字

Dom事件基础

1.事件监听（绑定）

 什么是事件？

事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮

 什么是事件监听？

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

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

事件监听三要素：

  • 事件源： 那个dom元素被事件触发了，要获取dom元素
  • 事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
  • 事件调用的函数： 要做什么事（不是立即执行的，要有触发条件）

案例：随机点名案例（js部分）

// 数据数组
const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
const qs=document.querySelector('.qs')
//开始按钮模块
let random=0
const start = document.querySelector('.start')
start.addEventListener('click',function (){// 随机数  写let，const声明就成局部变量,不能在外面关闭了timerId=setInterval(function(){const random = parseInt(Math.random()*arr.length)qs.innerHTML = arr[random]}),30})
const end=document.querySelector('.end')
end.addEventListener('click',function(){clearInterval(timerId)arr.splice(random,1)
if(arr.length===1){start.disabled=end.disabled=true
}
})

2.事件类型

鼠标事件焦点事件键盘事件文本事件
鼠标触发表单获得光标键盘触发表单输入触发

click 鼠标点击

mouseenter 鼠标经过

mouseleaver 鼠标离开 

focus 获得焦点

blur 失去焦点

Keydown 键盘按下

keyup 键盘抬起

input 用户输入事件
const input=document.querySelector('input')
//鼠标
input.addEventListener('click' , function(){ 函数体 })
//焦点事件
input.addEventListener('blur' , function(){ 函数体 })
//键盘
input.addEventListener('keydown' , function(){ 函数体 })
//用户输入文本
input.addEventListener('input' , function(){ console.log(text.value)})  //text.value文本值

3.事件对象

事件对象也是个对象，这个对象里有事件触发时的相关信息 , 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

使用场景

  • 可以判断用户按下哪个键，比如按下回车键可以发布新闻
  • 可以判断鼠标点击了哪个元素，从而做相应的操作

获取事件对象：

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

一般命名为event、ev、e

元素.addEventListener('click', function(e){   })
//此处的e就是事件对象

部分常用属性

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

4.环境对象

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

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

  • 函数的调用方式不同，this 指代的对象也不同
  • 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
  • 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
//普通函数的this指向window
function fn()
{console.log(this)
}const btn = document.querySelector('button')
btn.addEventListener('click',function(){console.log(this)  //btn对象
})使用，例：点击按钮变红
const btn = document.querySelector('button')
btn.addEventListener('click',function(){this.style.color = 'red'
})

5.回调函数 

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数

简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

http://www.lryc.cn/news/591104.html

相关文章：

  • 中兴B860AV5.1-M2_S905L3SB最新完美版线刷包 解决指示灯异常问题
  • 【测试100问】为什么要做接口测试？
  • 大带宽服务器对于高流量网站的作用
  • 2025年6月GESP（C++一级）：值日
  • 淘宝获取商品规格接口（item-sku）操作详解
  • 【Modelsim】原理图怎么看？
  • 【后端】.NET Core API框架搭建（8） --配置使用RabbitMQ
  • `@Configuration` 是 Spring 框架中的一个注解
  • Jmeter使用 -1
  • React Native打开相册选择图片或拍照 -- react-native-image-picker
  • php主流框架FastAdmin框架详解以及如何查看版本号和初始安装fastadmin框架-优雅草卓伊凡|大东家
  • Flutter在Android studio运行出现Error: Entrypoint is not a Dart file
  • HikariCP数据库连接池高性能优化实战指南
  • 23种设计模式--#2单例模式
  • git的cherry-pick
  • Py-Clipboard :iOS与Windows互相共享剪贴板（半自动）
  • AI+医疗！VR和MR解剖学和针灸平台，智能时代如何重塑健康未来
  • vue3实现web端和小程序端个人签名
  • [RAG] LLM 交互层 | 适配器模式 | 文档解析器(`docling`库, CNN, OCR, OpenCV)
  • docker安装与简单项目上手
  • 如何实现微信小程序引导组件【添加到我的小程序】+ 附源码
  • wx小程序原生开发使用高德地图api
  • 大语言模型任务分解与汇总：从认知瓶颈到系统化解决方案
  • 分布式分片策略中，分片数量的评估与选择
  • SAP-ABAP：SAP的‘cl_http_utility=＞escape_url‘对URL进行安全编码方法详解
  • 2025毫米波雷达技术白皮书：智能汽车与物联网的感知核心
  • 【web安全】DVWA存储型XSS分析与利用
  • 【Linux系统】进程地址空间
  • 一款基于PHP开发的不良事件上报系统源码，适用于医院安全管理。系统提供10类事件类别、50余种表单，支持在线填报、匿名上报及紧急报告。
  • 亚马逊广告进阶指南：广告成本预算怎么设置合理