Web APIs

一、变量声明:varletconst

JavaScript 中有三种声明变量的方式:

  • var:ES5 及之前的标准写法,存在变量提升和函数作用域的问题。
  • let:块级作用域,可重新赋值。
  • const:块级作用域,不可重新赋值(但对象属性可变)。

✅ 推荐用法:

  1. 优先使用 const:语义更清晰,表示该变量不会被重新赋值。
  2. 如果发现后续需要修改变量值,再改用 let
js 复制代码
const PI = 3.14; // 不会被重新赋值
let count = 0;
count++; // 合法操作

❓为什么 const 声明的对象可以修改属性?

因为 const 保证的是引用地址不变,而对象是引用类型,只要地址不变,里面的属性是可以修改的。

js 复制代码
const person = { name: 'Tom' };
person.name = 'Jerry'; // ✅ 合法
person = {}; // ❌ 报错:Assignment to constant variable.

🔍 建议 :对于数组和对象,推荐使用 const 来声明,防止意外改变引用地址。


二、Web APIs 简介

Web APIs 是浏览器提供给 JavaScript 使用的一些接口,主要用来操作网页内容(DOM)和浏览器功能(BOM)。

  • DOM(文档对象模型):用于操作 HTML 内容。
  • BOM(浏览器对象模型):用于操作浏览器窗口、历史记录、导航等。

三、DOM 操作详解

1️⃣ DOM 树的概念

HTML 文档以树状结构呈现,称为 DOM 树。它直观地展示了标签之间的父子关系,便于我们通过 JavaScript 遍历和操作页面元素。


2️⃣ 获取 DOM 元素

✅ 单个元素获取

js 复制代码
const firstLi = document.querySelector('ul li:first-child');

✅ 多个元素获取

js 复制代码
const allLis = document.querySelectorAll('ul li');

⚠️ 注意:querySelectorAll() 返回的是一个伪数组,不能直接调用 pop()push() 等方法,必须通过遍历处理。

js 复制代码
const lis = document.querySelectorAll('.nav li');
for (let i = 0; i < lis.length; i++) {
  console.log(lis[i]);
}

3️⃣ 修改元素内容

innerText vs innerHTML

方法 是否解析 HTML 用途说明
innerText ❌ 不解析 显示纯文本
innerHTML ✅ 解析 插入 HTML 内容
js 复制代码
const box = document.querySelector('.box');
box.innerText = '我是一个盒子'; // 显示纯文本
box.innerHTML = '<strong>我要更换</strong>'; // 显示加粗文字

4️⃣ 修改样式

可以通过 .style 属性动态修改元素样式。

css 复制代码
.box {
  width: 200px;
}
js 复制代码
const box = document.querySelector('.box');
box.style.width = '300px';

四、实战案例:随机轮播图

数据结构

js 复制代码
const sliderData = [
  { url: 'image1.jpg', title: '标题1', color: '#f00' },
  { url: 'image2.jpg', title: '标题2', color: '#0f0' },
  // ...
];

实现代码

js 复制代码
const random = parseInt(Math.random() * sliderData.length);

const img = document.querySelector('.slider-wrapper img');
img.src = sliderData[random].url;

const p = document.querySelector('.slider-footer p');
p.innerHTML = sliderData[random].title;

const footer = document.querySelector('.slider-footer');
footer.style.backgroundColor = sliderData[random].color;

const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`);
li.classList.add('active');

五、表单与交互:倒计时按钮

HTML 结构

html 复制代码
<button class="btn" disabled>我已经阅读用户协议(60)</button>

JS 实现倒计时逻辑

js 复制代码
const btn = document.querySelector('.btn');
let i = 5;
let timer = setInterval(() => {
  i--;
  btn.innerHTML = `我已经阅读用户协议(${i})`;
  if (i === 0) {
    clearInterval(timer);
    btn.disabled = false;
    btn.innerHTML = '同意';
  }
}, 1000);

效果预览


六、总结

  • const 是首选,除非你需要重新赋值。
  • 对象和数组应使用 const 声明,因其引用地址不变即可。
  • DOM 操作是前端开发的基础技能,熟练掌握选择器和修改方法至关重要。
  • 利用 Web APIs 可以轻松实现丰富的网页交互效果,如轮播图、倒计时按钮等。
相关推荐
千鼎数字孪生-可视化10 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月10 分钟前
7月10号总结 (1)
前端·css·css3
天天扭码33 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder36 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte41 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang1 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子2 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试