【Web 三件套】JavaScript WebAPI 介绍

免费的东西

于 2022-03-02 01:13:06 发布

阅读量350

点赞数

分类专栏：前端 html 文章标签：小程序前端 vue.js

本文链接：https://blog.csdn.net/m0_67394360/article/details/123220401

版权

本文深入探讨WebAPI，包括其背景知识、DOM基本概念、元素获取与操作、事件介绍和节点操作。通过实例展示了querySelector、querySelectorAll、事件处理、元素内容与属性修改以及DOM节点的增删改操作，帮助读者掌握JavaScript对网页内容的动态控制。

摘要由CSDN通过智能技术生成

文章目录

1. WebAPI 背景知识
- 1.1 API 基本介绍
- 1.2 WebAPI 基本介绍
2. DOM 基本概念
- 2.1 DOM 基本介绍
- 2.2 DOM 树
3 获取元素
- 3.1 querySelector
- 3.2 querySelectorAll
4. 事件介绍
5. 操作元素
6. 操作节点
7. 案例

1. WebAPI 背景知识

1.1 API 基本介绍

API（Application Programming Interface 应用程序接口）： 是一些预先定义的接口（如函数、HTTP 接口）或指软件系统不同组成部分衔接的约定。用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程，而又无需访问源码，或理解内部工作机制的细节。

1.2 WebAPI 基本介绍

在《【Web 三件套】JavaScript 入门知识》这章中介绍了 JS 基本分成三个部分

ECMAScript（简称 ES）：是 JavaScript 的语法
DOM（Document Object Model）：文档对象模型，用于对页面中的元素进行操作。（页面上的每个 HTML 元素，都在 JS 中对应到一个对象，通过 JS 操作这些对象，就可以达到控制页面表现形式的效果）
BOM（Browser Object Model）：浏览器对象模型，用于对浏览器窗口进行操作。（浏览器也在 JS 中提供了一些对象，例如：刷新页面、控制浏览器窗口大小、前进、后退等等，通过 JS 操作这些对象就可以控制浏览的一些行为）

WebAPI 就包含了 DOM 和 BOM，下面着重介绍几个常用的接口，更详细的内容可以参考 WebAPI 接口参考文档

WebAPI 接口参考文档： https://developer.mozilla.org/zh-CN/docs/Web/API

2. DOM 基本概念

2.1 DOM 基本介绍

DOM（Document Object Model 文档对象模型）： 是 W3C 组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口（API），它可以动态地访问程序和脚本、更新其内容、结构和 www 文档的风格（HTML 和 XML 文档是通过说明部分定义的）。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。

重要概念：

文档（document）：一个页面就是一个文档
元素（element）：页面中所有的标签都称为元素
节点（node）：网页中所有的内容都可以称为节点，如标签节点、注释节点、文本节点、属性节点

上述文档等概念在 JS 代码中就对应一个个对象，所以称为文档对象模型

2.2 DOM 树

基本介绍： DOM 是一种基于树的 API 文档，由于一个页面的结构是一个树形结构，称其为 DOM 树。

注意： DOM 树不是所有的标签的集合，而是根据当前页面的情况，由于每个页面的情况不一样，每个页面的 DOM 树则不一样

页面结构形如：

DOM 树结构形如：

3 获取元素

3.1 querySelector

基本介绍：

文档对象模型 Document 引用的 querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element 对象。如果找不到匹配项，则返回 null

语法：

let element = document.querySelector(selectors);

selectors 参数：

包含一个或多个要匹配的选择器的 DOM 字符串 DOMString。该字符串必须是有效的 CSS 选择器字符串；如果不是，则引发 SYNTAX_ERR 异常。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <input type="text" id="number" value="0">
    <input type="button" id="button" value="自增">

    <script>
        // 获取第一个 id 名为 number 的对象
        let number = document.querySelector('#number');
        // 使用 dir 打印一个元素对象, 此时就能看到里面的具体属性
        console.dir(number)
    </script>
</body>
</html>

3.2 querySelectorAll

基本介绍： 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList。与 querySelector 不同，querySelectorAll 方法返回文档中与指定选择器或选择器组匹配的全部 Element 对象。

语法：

let elementList = document.querySelectorAll(selectors);

selectors 参数：

一个 DOMString 包含一个或多个匹配的选择器。这个字符串必须是一个合法的 CSS 选择器，如果不是，会抛出一个 SyntaxError 错误。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <input type="text" id="number" value="0">
    <input type="button" id="button" value="自增">

    <script>
        // 获取选择器为 input 的全部对象
        let inputs = doc