JavaScript(WebAPI)

文章目录

  • 1. 什么是 WebAPI
  • 2. DOM 基本概念
    • 2.1 DOM 树
  • 3. 获取元素
    • 3.1 querySelector
    • 3.2 querySelectorAll
  • 4. 事件初识
    • 4.1 键盘事件
  • 5. 操作元素
    • 5.1 获取/修改元素属性
    • 5.2 获取/修改表单元素属性
    • 5.3 获取/修改样式属性
  • 6. 操作节点
    • 6.1 新增节点
    • 6.2 删除节点

1. 什么是 WebAPI

在这里插入图片描述
前面学的 JS 基础语法主要是让我们建立基本的编程思维,相当于练武需要先
扎马步。但是真正来写一个更加复杂的有交互式的页面,还需要 WebAPI 的支持,相当于各种招式。

2. DOM 基本概念

在这里插入图片描述

2.1 DOM 树

一个页面的结构是一个树形结构, 称为 DOM 树。
页面结构形如:
在这里插入图片描述
DOM 树结构形如:
在这里插入图片描述
在这里插入图片描述
这些文档等概念在 JS 代码中就对应一个个的对象,所以才叫 “文档对象模型”。

3. 获取元素

3.1 querySelector

querySelector 能够完全复用前面学过的 CSS 选择器知识,达到更快捷更精准的方式获取到元素对象。
在这里插入图片描述
selectors 包含一个或多个要匹配的选择器的 DOM字符串 DOMString 。 该字符串必须是有效的CSS选择器字符串;如果不是,则引发 SYNTAX_ERR 异常。
表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象。
如果您需要与指定选择器匹配的所有元素的列表,则应该使用 querySelectorAll()。
可以在任何元素上调用,不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素

举个例子:
在这里插入图片描述
结果如下:
在这里插入图片描述

3.2 querySelectorAll

使用 querySelectorAll 用法和上面类似:
在这里插入图片描述
在这里插入图片描述

4. 事件初识

JS 要构建动态页面,就需要感知到用户的行为,用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件。被 JS 获取到,从而进行更复杂的交互操作。

事件三要素:
在这里插入图片描述
举个例子:
在这里插入图片描述
其中 btn.onclick = function() 这个操作称为 注册事件/绑定事件。
结果如下:
在这里插入图片描述
注意: 这个匿名函数相当于一个回调函数, 这个函数不需要程序猿主动来调用, 而是交给浏览器, 由浏览器自动在合适的时机(触发点击操作时) 进行调用

4.1 键盘事件

在这里插入图片描述
举个例子:
在这里插入图片描述
结果如下:
在这里插入图片描述
当我们输入时,会进行一个响应。虽然有了响应,但是我们不知道它输入的是什么。
在这里插入图片描述
在这里插入图片描述
它打出来的是ascii,但是它不区分大小写。
在这里插入图片描述
这个事件是区分大小写的。但是这个键不支持Shift、Alt等这些键。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我们可以看到按下和松开都有响应了。

5. 操作元素

5.1 获取/修改元素属性

可以通过 Element 对象的属性来直接修改, 就能影响到页面显示效果:
在这里插入图片描述
此时可以看到 img 这个 Element 对象中有很多属性:
在这里插入图片描述
我们可以在代码中直接通过这些属性来获取属性的值或者直接修改属性:
在这里插入图片描述
结果如下:
在这里插入图片描述

5.2 获取/修改表单元素属性

在这里插入图片描述
代码示例: 切换按钮的文本。
假设这是个播放按钮,在 “播放” - “暂停” 之间切换:
在这里插入图片描述
代码示例: 点击计数
使用一个输入框输入初始值(整数),每次点击按钮, 值 + 1或者-1。
在这里插入图片描述
代码示例: 全选/取消全选按钮
在这里插入图片描述
在这里插入图片描述
这里的checked属性就是选中了就为true,没有选中是false。这里我们把全部选中给完成了。
在这里插入图片描述
在这里插入图片描述
但是还存在这种情况还没有解决。
在这里插入图片描述

5.3 获取/修改样式属性

CSS 中指定给元素的属性,都可以通过 JS 来修改。
在这里插入图片描述
"行内样式"通过 style 直接在标签上指定的样式,优先级很高。
代码示例: 点击文字则放大字体
style 中的属性都是使用 驼峰命名 的方式和 CSS 属性对应的。例如: font-size => fontSize, background-color => backgroundColor 等。这种方式修改只影响到特定样式,其他内联样式的值不变。
在这里插入图片描述
类名样式操作:

element.className = [CSS 类名];

修改元素的 CSS 类名,适用于要修改的样式很多的情况。

代码示例: 开启夜间模式
在这里插入图片描述
举个例子:
在这里插入图片描述
在这里插入图片描述
当我们点击过后:
在这里插入图片描述

6. 操作节点

6.1 新增节点

在这里插入图片描述
创建元素节点:
使用 createElement 方法来创建一个元素, options 参数暂不关注。

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

tagName是标签的名字。
在这里插入图片描述
举个例子:
在这里插入图片描述
虽然创建出来了,但是并没有显示在页面上。这是因为新创建的节点并没有加入到DOM 树中。

插入节点到 dom 树中:
方法一:使用 appendChild 将节点插入到指定节点的最后一个孩子之后
在这里插入图片描述
举个例子:
在这里插入图片描述
这里是插入了div盒子的后面。
在这里插入图片描述

方法二: 使用 insertBefore 将节点插入到指定节点之前。
在这里插入图片描述
在这里插入图片描述
举个例子:
在这里插入图片描述
结果如下:
在这里插入图片描述
注意1: 如果针对一个节点插入两次,则只有最后一次生效(相当于把元素移动了)
在这里插入图片描述
在这里插入图片描述
注意2: 一旦一个节点插入完毕,再针对刚刚的节点对象进行修改,能够同步影响到 DOM 树中的内容

6.2 删除节点

在这里插入图片描述
在这里插入图片描述
举个例子:
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/608011.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浅谈智慧路灯安全智能供电方案设计——安科瑞赵嘉敏

摘要: 智慧路灯,作为智慧城市、新基建、城市更新的主要组成部分,近些年在各大城市已得到很好的落地和 应用,但其与传统路灯相比集成大量异元异构电子设备,这些设备的供电电压、接口形式、权属单位各不相同, 如何设计一…

Z-library居然来中国了!

提起「Z-Library」的大名,想必有不少朋友是知道的,早在2021年11月该网站遭遇了封站,好在目前已经有了比较稳定的国内直达网址,实测过了几个月还是能够稳定访问。 Z-Library是一个电子图书馆项目,提供世界上最大的免费…

Python基础(二十一、模块的使用,else的使用tip)

文章目录 一、模块什么是模块?导入模块的语法注意事项 二、elseelse与forelse与whileelse与try-except总结 当我们编写复杂的程序时,往往需要使用到大量的函数和变量。为了提高代码的可维护性和重用性,Python 提供了模块的概念。模块是一个包…

java编程中,保证接口幂等性的实现方案讨论

一、什么是幂等性 数学中的幂等是指f(x) f(f(x)),编程领域的术语是指同一个操作,在重复提交的情况下,最终产生的影响是不变的。举例说: 提交订单时,用户在购物车界面,重复点击“下单”,服务端…

【CUDA】windows下的CUDA安装

一、前言 windows10 下安装 CUDA ,首先需要下载安装包: CUDA toolkit(工具包) 二、安装前的准备 电脑环境检查 通过cmd,输入nvidia-smi 查看自己的驱动版本和支持的CUDA版本,如下图红圈标记位置 下载 …

经典问题 | 线程打印ABA问题

问题描述 有三个线程,分别命名为 ThreadA、ThreadB 和 ThreadC。请设计一个程序,使得它们循环打印输出字符串 "A"、"B"、"C",打印顺序为 "ABCABCABC..."。要求使用线程同步机制确保按照指定顺序打印…

尤雨溪:框架挖坑靠文档来补,这算 PUA 用户吗?丨 RTE 开发者日报 Vol.122

开发者朋友们大家好: 这里是 「RTE 开发者日报」 ,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE (Real Time Engagement) 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

JWT令牌(Token)设计

JWT(JSON Web Token)是一种基于开放标准的令牌(Token),用于在不同实体之间传递和验证信息。它由三部分组成:头部(Header)、载荷(Payload)和签名(S…

Centos Unable to verify the graphical display setup

ERROR: Unable to verify the graphical display setup. 在Linux下安装Oracle时 运行 ./runInstaller 报错 ERROR: Unable to verify the graphical display setup. This application requires X display. Make sure that xdpyinfo exist under PATH variable. No X11 DISPL…

使用Python脚本自动发送个性化微信消息通知

需求: 需要向单位同事定期(每周一次)发送每个人的业务情况提醒,同时也要发送新的登录token。如果采用邮件大家也不常看,提醒效果很差,同时邮件传输非常不安全,单位很多人邮箱默认密码不改&…

使用开源通义千问模型(Qwen)搭建自己的大模型服务

目标 1、使用开源的大模型服务搭建属于自己的模型服务; 2、调优自己的大模型; 选型 采用通义千问模型,https://github.com/QwenLM/Qwen 步骤 1、下载模型文件 开源模型库:https://www.modelscope.cn/models mkdir -p /data/…

微信小程序中组件内生命周期如何调用组件内方法

在组件的.js文件中使用 Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {},/*** 组件的方法*/methods:{async getData() {},},/*** 组件的生命周期*/lifetimes:{// 在组件实例进入页面节点树时执行attached:function(){this.getData() //调用}} …

JavaScript-数组-笔记

1.定义数组 数组: 可以存储任意数据类型,元素之间使用英文逗号隔开 1)使用new关键字定义数组 var 变量名 new Array() ;定义空数组 var 变量名 new Array(数据1,数据2) ; 定义有元素的数组 注意&#xff…

Jmeter 性能 —— 吞吐量与并发用户数关系!

1、吞吐量和并发用户数的关系 2、已知在线用户数为3000,算出对应的并发用户数 ①我们常用的确定并发用户数的公式是: C活动用户数操作时间/系统运行时间 如每天最大在线用户数为3000人,每个用户平均操作时间为1小时,系统运行时…

【后退N帧协议】- 协议应用与局限分析

后退N帧协议是计算机网络通信中常用的一种流量控制协议,用于确保数据的可靠传输。本文将深入探讨后退N帧协议的原理、应用场景及局限性。 后退N帧协议的核心思想是在发送端发送数据时,等待接收端返回的确认信号。发送端每次发送N帧数据,并等…

零基础学Python网络爬虫案例实战 全流程详解 高级进阶篇

零基础学Python网络爬虫案例实战 全流程详解 入门与提高篇 零基础学Python网络爬虫案例实战 全流程详解 高级进阶篇 编辑推荐 本书讲解了Python爬虫技术的高级进阶知识,帮助有一定爬虫基础的读者进一步提高爬虫技术。本书详解了突破反爬机制的常用手段以及Scrapy和…

基于SSM+Vue的学校社团管理系统(Java毕业设计)

大家好,我是DeBug,很高兴你能来阅读!作为一名热爱编程的程序员,我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里,我将会结合实际项目经验,分享编程技巧、最佳实践以及解决问题的方法。无论你是…

工业相机——靶面尺寸、像元尺寸、分辨率 、传感器尺寸

文章目录 1 靶面尺寸、像元尺寸、分辨率2 相机传感器的感光区尺寸规格1 靶面尺寸、像元尺寸、分辨率 工业相机基本知识理解:靶面尺寸、像元尺寸、分辨率 1、靶面尺寸:由Sensor对角线长度表示,单位英寸,这里的1英寸=16mm 2、像元尺寸:单个感光元件的大小,一般都是正方形…

C# OpenCvSharp DNN FreeYOLO 人脸检测人脸图像质量评估

目录 效果 模型信息 yolo_free_huge_widerface_192x320.onnx face-quality-assessment.onnx 项目 代码 frmMain.cs FreeYoloFace FaceQualityAssessment.cs 下载 C# OpenCvSharp DNN FreeYOLO 人脸检测&人脸图像质量评估 效果 模型信息 yolo_free_huge_widerfa…

Qt隐式共享浅析

一、什么是隐式共享 Qt 的隐式共享(implicit sharing)机制是一种设计模式,用于在进行数据拷贝时提高效率和减少内存占用。 在 Qt 中,许多类(如 QString、QList 等)都使用了隐式共享机制。这意味着当这些类…