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

web APIs(更新中)

news 2025/7/18 7:40:40

本文是基于 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.xdnf.cn/news/1136629.html

相关文章：

  • 【机器学习实战【七】】机器学习特征选定与评估
  • 聚类算法原理与应用(一)：K-means聚类算法原理
  • 基础算法题
  • 如何轻松玩转多线程高并发？
  • Install Docker Engine on UbuntuMySQL
  • cdh6.3.2的hive使用apache paimon格式只能创建不能写报错的问题
  • Python包测试全攻略：从单元测试到持续集成
  • ZKmall开源商城架构助力增长：多端流量聚合与用户体验
  • GitHub开源轻量级语音模型 Vui：重塑边缘智能语音交互的未来
  • Python 网络爬虫 —— 提交信息到网页
  • 音视频同步技术初剖析：原理、实现与FFmpeg分析
  • CrewAI与LangGraph：下一代智能体编排平台深度测评
  • 深度学习前置知识
  • PyTorch边界感知上下文神经网络BA-Net在医学图像分割中的应用
  • ubuntu基础搭建
  • 基于dcmtk的dicom工具 第二章 图像接受StoreSCP(2)
  • ubuntu22 npm install electron --save-dev 失败
  • LVDS系列21：Xilinx 7系ISERDESE2原语（二）
  • 一款基于PHP开发的不良事件上报系统源码，适用于医院安全管理。系统提供10类事件类别、50余种表单，支持在线填报、匿名上报及紧急报告。
  • [MRCTF2020]Ezpop
  • 直播带货与开源AI智能名片链动2+1模式S2B2C商城小程序：重塑电商营销新格局
  • SpringBoot使用ThreadLocal共享数据
  • JAVA中的Collection集合及ArrayList,LinkedLIst,HashSet,TreeSet和其它实现类的常用方法
  • #systemverilog# 关键字之 变量声明周期与静态方法关系探讨
  • SVG基础语法：绘制点线面的简单示例
  • 强化第三讲—一元函数微分学的概念
  • 网络编程-java
  • 2025年视频超高清技术应用全景介绍
  • 模型移植实战：从PyTorch到ONNX完整指南
  • 【C++详解】STL-stack、queue的模拟实现，容器适配器，deque双端队列介绍