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

前端开发：JavaScript（7）—— Web API

news 2025/8/9 7:59:25

前面我们说过，JavaScript分为三部分：

  • ECMAScript：基础语法部分
  • DOM API：操作页面结构
  • BOM API：操作浏览器

DOM和BOM就是Web API。在之前的文章中，我们基础地讲解了JavaScript的语法部分，即ECMAScript，了解了它的基本语法书写，但掌握JavaScript还需要掌握Web API的内容。

关于API

API是一个广泛的概念，其本质上是一些现成的函数/对象，能够直接投入使用，方便开发者进行开发。我们马上要学习的DOM API和BOM API都是属于API的范畴，相当于已经编写好了一些工具，我们只要学习如何去使用即可。大大减小了开发成本。

DOM API

关于DOM API

DOM 的全称为Document Object Model，采用W3C标准；它为我们提供了一系列的函数，让我们可以操作网页结构、内容和样式。

DOM树

一个页面的结构是一个树形结构，称为DOM树。树形结构是数据结构中十分普遍的一种，我们就不展开讲解数据结构了。

页面的结构有下面一些概念：

  • 文档：一个页面就是一个文档，使用document表示。
  • 元素：页面中所有的标签都称为元素，使用element表示。（HTML）
  • 节点：网页中的所有元素都可以称为 节点/标签节点。用node表示。

这些概念在JS代码中对应一个个的对象。

获取元素

这部分的工作内容其实类似于CSS选择器。获取元素的方式有两种功能最为强大的方式：

1、querySelector

它的使用方式如下：

let element = document.querySelector(selectors);

document表示整个页面。document.querySelector就表示选中整个页面。在括号中的selectors部分写上选择器表达式。我们创建一个HTML文件，加入属性为类box1和box2的div标签：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box1">box1</div><div class="box2">box2</div><h3><span><input type="text"></span></h3>    
</body>
<script>console.log(document.querySelector(".box1"));
</script>
</html>

运行一下：

可以看到我们选中的box1所在行被打印了出来。我们在selectors中的选择器内容一定要合法，如果输入的选择器不存在，则控制台会报错。

获取子级元素

我们还可以获取子级元素。在上面的基础上将代码修改为：

console.log(document.querySelector('h3').querySelector('span'));

然后点击运行：

发现成功打印了<h3>标签中的<span>标签部分的内容。

2、querySelectorAll

使用querySelectorAll可以快速选取一组元素。我们来对比使用：

!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box1">box1</div><div class="box2">box2</div><h3><span><input type="text"></span></h3>    
</body>
<script>console.log(document.querySelector('div'));console.log(document.querySelectorAll('div'));
</script>
</html>

运行一下：

我们发现使用querySelector只能按照顺序选择第一行的元素，而使用querySelectorAll可以将满足条件的元素全部选中。

至此，我们已经学会了如何使用DOM来获取元素。虽然还有其他方法，但上述两种方法已经足够我们完成目标了，掌握了querySelector，我们就能快速地获取元素。至于其他方法的学习，我们会在今后的例子中慢慢学到。

事件

我们介绍过JS开发式的目标是想要实现动态页面。我们想要实现动态的效果，就要感知到用户的行为。用户对于页面的一些操作，例如点击、选择、修改等都会在页面上产生一个个事件，发生的事件会被JS获取，从而进行更加复杂的交互操作。

事件三要素

  1. 事件源：由哪个元素触发的
  2. 事件类型：用户做出了哪种操作？（点击、选择还是修改？）
  3. 事件处理程序：进一步的处理方式（通常是一个回调函数）

我们来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="btn">点击</button><script>let btn = document.getElementById('btn');//获取对应id的元素btn.onclick = function(){alert("hello world!");}</script>
</body>
</html>

这是很简单的一段代码，运行一下就能知道，我们点击按钮后会弹出hello world窗口进行反馈。在页面运行时，我们点击按钮就是一次交互，button是事件源，我们的点击是事件类型，而处理程序则是弹出hello world.

所以上述代码在收到用户的点击事件后就会返回一个弹出窗口。点击是一种常见的事件类型，此外还有很多不同的点击事件。我们选取一些来进行讲解。

onkeydown

该事件在用户按下键盘某个按键后发生。主要有三个关键字，分别是：

onkeydown、onkeypass和onkeyup，对应按下、按住和松开。

<body><input type="text">
</body>
<script>let input = document.querySelector("input");input.onkeydown = function(){console.log("键盘按下");}
</script>

在上面的代码中，当我们往文本框中输入，按下键盘时控制台就会打印出“键盘按下”。

说明onkeydown就是在按下键盘时响应。在上述的代码基础上，我们可以做出更复杂的修改：

<body><input type="text">
</body>
<script>let input = document.querySelector("input");input.onkeydown = function(event){//event是一个全局变量console.log("键盘按下");let a = event.keyCode;//键盘按键编码let b = String.fromCharCode(a);//转换编码为名称console.log(b);}
</script>

运行一下：

获取与修改元素的属性

我们随意找一张图片用img标签插入，并如下写出代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text"><br><span>这是一个span标签</span><br><img src="image.png" alt="图片加载失败" title="这是一张展示图片" width="100px" height="100px">
</body>
<script>let img = document.querySelector('img');console.dir(img)//获取元素的所有属性
</script></html>

我们运行一下，可以在控制台找到img元素：

展开后发现有其对应的属性。我们找一下发现有自己设置的alt属性：

我们设置的其他属性也同样能在上面找到，这里就不全部展示了。如果我们想修改对应的属性，只需要想下面一样加上一行代码：

<script>let img = document.querySelector('img');console.dir(img)//获取元素的所有属性img.alt = "修改属性";
</script>

我们再次运行查看是否修改成功：

可以看到修改成功。这就是获取和修改属性的方法。我们也可以为属性添加绑定一些内容：

<script>let img = document.querySelector('img');console.dir(img)//获取元素的所有属性img.alt = "修改属性";img.onclick = function(){console.log("you have clicked this image.")}
</script>

这样我们点击图片后就会弹窗对应的文字了。

获取与修改表单元素的属性

关于Web表单我们已经在前面介绍过。需要的可以点击前往：Web表单

表单（主要是指input标签）的以下属性可以通过DOM来进行修改：

  • value：input的值
  • disabled：禁用
  • checked：复选框会使用
  • selected：下拉框会使用
  • type：input的类型

其实原理与之前的相同。我们随着看几个案例就明白了：

例1：我们对按钮的文本进行切换；假设我们对播放按钮切换成暂停：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" value="播放"><script>let btn = document.querySelector("input");btn.onclick = function(){if(btn.value === "播放"){btn.value = "暂停";}else{btn.value = "播放";}}</script>
</body>
</html>

例2：简单加减器的实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input class="input" type="text" value="0"><input class="add" type="button" value="+1" onclick="Add()">//为点击绑定一个事件函数<input class="min" type="button" value="-1" onclick="Min()">
</body>
<script>function Add(){let input_element = document.querySelector('.input');//先获取元素,对文本框的数值进行加法操作input_element.value = parseInt(input_element.value) + 1;//parseInt可以获取对应元素的属性值}function Min(){let input_element = document.querySelector(".input");input_element.value = parseInt(input_element.value) - 1;}
</script>
</html>

由于我们选中属性时并未转化为属性对应的数值，所以需要使用 parseInt（）来选取数值进行运算。

例3：设计一个复选框，有一个选项为总选项，当它被勾选时所有选项都被勾选；当有一个子选项取消勾选时，总选项自动取消勾选：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h3>你喜欢什么水果？</h3><input class="all" type="checkbox" onclick="SelectAll()">我都喜欢<br><input class="select" type="checkbox">苹果<br><input class="select" type="checkbox">梨<br><input class="select" type="checkbox">香蕉<br><input class="select" type="checkbox">桃<br><input class="select" type="checkbox">西瓜<br>
<body>
<script>let all = document.querySelector(".all");let select = document.querySelectorAll(".select");//选取全部function SelectAll(){for(i=0;i<select.length;i++){//遍历select[i].checked = all.checked;}}//只要有一个取消勾选，则all也取消勾选for(i=0;i<select.length;i++){select[i].onclick = function(){//遍历让子选项绑定上点击函数for(j=0;j<select.length;j++){if(select[j].checked == false){all.checked = false;break;//及时跳出增加运行效率}}}}
</script>
</html>

在实现上面的代码时，你可能会犯以下的错误：

  • 获取子选项时使用querySelector导致没有选择到全部子选项
  • 忘记设置onclick效果调用函数
  • 循环嵌套时将i与j混淆

    获取与修改样式属性

    CSS中指定给html的属性，都可以通过JS进行修改。

    行内样式

    我们已知有这样的行内样式：

    <body><div style="font-size:50px">ABCD</div>
</body>

    现在我们想实现这样一个功能，当我点击时，字体会逐渐变大。

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="font-size:50px" onclick="SizeChange()">ABCD</div>
</body>
<script>function SizeChange(){let element = document.querySelector('div');console.log(element.style);//由于元素有许多属性，我们不用全部记住，在需要使用时用此行代码可以查看全部属性let size = parseInt(element.style.fontSize) + 5;element.style.fontSize = size + "px";}
</script>
</html>

    在上述实现过程中，我们先选中对应元素的标签，然后通过parseInt转化数值进行加大，最后不能忘记px单位。
    如果字体样式时通过CSS来设计的，最后代码的实现也可以替换成下面的写法，效果不变：

     element.style.cssText = "font-size:" + size + "px";

    操作节点

    节点其实是树形结构中的一个概念，我们这里提到的自然就是DOM树中的节点，它是构成树形结构的基本单位。想要具体了解需要有数据结构部分的知识；如果你还没有学习，可以先不用了解节点部分内容。

    在进行页面设计时常常需要新增节点。新增操作节点包含两个步骤：创建元素节点和将节点插入DOM树。

    创建元素节点

    我们使用createElement方法来创建一个元素，至于option参数我们先不用关注，使用方法如下：

    let element = document.createElement(tagName[options]);

    上面写到的tagName表示HTML标签。

    我们可以再具体一点：

    // 创建元素节点
const newdiv = document.createElement("div");
// 创建文本节点
const textNode = document.createTextNode("Hello World!");

    获取节点

    其实在之前的学习中我们或多或少都学过一些内容。我们获取节点与前面的获取元素、属性有所交叉。关于节点的获取我们给出下面三种方式：getElementById/querySelector和querySelectorAll。来看如下代码：

    // 通过 ID 获取
const header = document.getElementById("header");
// 通过 CSS 选择器获取（第一个匹配项）
const btn = document.querySelector(".submit-btn");
// 获取所有匹配节点
const listItems = document.querySelectorAll("ul > li");

    简单易懂，我们通过这样的代码就能够获取想要的节点了。

    修改节点

    HTML标签中存在包含关系，而这些关系其实就是树形结构。我们对节点的修改，其实就是对一些标签、对应的属性、其所拥有的文本与样式进行修改。在前面的学习中前面已经学会了如何去修改，只是缺少对节点的概念。我们看下面的代码：

    // 修改文本内容
div.textContent = '新的文本内容';
// 修改HTML内容
div.innerHTML = '<strong>加粗文本</strong>';
// 设置属性
img.setAttribute('src', 'new-image.jpg');
// 添加CSS类
div.classList.add('active');

    这些代码的功能我们已经很熟悉了，就不再进行解释。

    删除节点

    删除节点时，我们使用removeChild。使用方法如下：

    container.removeChild(element);

    移除想要移除的子节点。不过也有一种简化的写法：

    oldElement.remove()

    也能实现移除元素的效果。

    我们总结一下节点的作用：节点允许操作文档的每一部分，可以获取、修改文本、属性等不同的内容，也可以动态地添加、删除文档的组成部分。

    现在我们对JavaScript有了基础的了解，能够编写简单的逻辑并实现一些小的功能。但是想要实现前端开发，我们还需要进一步地去学习前端知识，我们现在所学过的HTML、CSS与JavaScript仅仅只是度过了前段开发中的一小段路程；编程需要，也值得我们不断学习；只要有明确的目标，坚持努力，代码能力的提升也只是时间问题了。

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

    相关文章：

  • 从手工到智能决策，ERP让制造外贸企业告别“数据孤岛“降本增效
  • 生产管理ERP系统|物联及生产管理ERP系统|基于SprinBoot+vue的制造装备物联及生产管理ERP系统设计与实现(源码+数据库+文档)
  • Selenium + Python + Pytest + Yaml + POM
  • ISL9V3040D3ST-F085C一款安森美 ON生产的汽车点火IGBT模块，绝缘栅双极型晶体管ISL9V3040D3ST汽车点火电路中的线圈驱动器
  • 【量子计算】量子计算驱动AI跃迁：2025年算法革命的曙光
  • 行业速览：中国新能源汽车市场格局与关键趋势
  • 时序数据库-涛思数据库
  • 实现一个进程池（精讲）
  • ​​Vue3 + Element Plus 构建的现代化即时通讯在线客服系统​
  • STM32学习笔记5-TIM定时器-1
  • 线程池基础知识
  • wstool和catkin_tools工具介绍
  • 智慧社区（十）——声明式日志记录与小区地图功能实现
  • Python实现点云PCA配准——粗配准
  • Ubuntu安装 L20显卡驱动
  • Linux网络--2、Socket编程
  • 中国电信清华：大模型驱动的具身智能发展与挑战综述
  • 动漫软件集合分享
  • Pytest项目_day08（setup、teardown前置后置操作）
  • 144.二叉树的前序遍历
  • 鲸签云解决互联网行业合同管理难题​
  • 【Rust】多级目录模块化集成测试——以Cucumber为例
  • 线程组和线程池的基本用法
  • 【Spring Boot 快速入门】八、登录认证
  • duxapp 2025-05-29 更新 兼容鸿蒙C-API方案，现在鸿蒙端可以用于生产
  • React SSR 水合问题
  • 《告别Bug！GDB/CGDB调试实战指南》
  • TF 上架全流程实战，从构建到 TestFlight 分发
  • UniApp 跳转外部链接实现
  • Elasticsearch LTR（Learning To Rank）从训练到检索与重排