【JAVA WEB】JavaScript(WebAPI)--DOM基本概念 获取元素 点击事件 键盘事件

目录

什么是WebAPI

DOM的基本概念

DOM是什么

DOM树

获取元素

querySelector 

querySelectorAll

事件

事件初识

基本概念

事件三要素

点击事件

键盘事件


什么是WebAPI

前端学习的 JS 分成三个大的部分

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

WebAPI 就包含了DOM+BOM。

DOM的基本概念

DOM是什么

DOM 全程为 Docunment Object Model

W3C标准给我们提供了一系列的函数,让我们可以操作:

  • 网页内容
  • 网页结构
  • 网页样式

DOM树

一个页面的结构是一个树型结构,称为DOM树。

重要概念:

  • 文档:一个页面就是一个文档,使用document表示
  • 元素:页面中所有的标签都称为元素,使用element表示
  • 节点:网页中所有的内容都可以称为节点(标签节点,注释节点,文本节点,属性节点),使用node表示

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

所以才叫“文档对象模型”

获取元素

这部分工作类似于CSS选择器的功能

querySelector 

选中一个元素

//这个是HTML5新增的,IE9及以上版本才能使用

用法:var element=document.querySelector(selectors);

  • selectors包含一个或多个要匹配的选择器的DOM字符串DOMstring,该字符串必须是有效的CSS选择器字符串,如果不是,则引发SYNTAX_ERR异常
  • 表示文档中与指定的一组CSS选择器匹配的第一个元素的html元素Element对象
  • 如果需要与指定选择器匹配的所有元素的列表,则应该使用querySelectorAll()
  • 可以在任何元素上调用,不仅仅是document,调用这个方法的元素将作为本次查找的根元素

示例代码:

<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'));

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

</script>

 

querySelectorAll

选中一组元素

 console.log(document.querySelectorAll('div'));

事件

事件初识

基本概念

JS要构建动态页面,就需要感知到用户的行为

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

事件三要素

  1. 事件源:哪个元素触发的
  2. 事件类型:是点击,选中,还是修改
  3. 事件处理程序:进一步如何处理,往往是一个回调函数

参考手册w3school 在线教程icon-default.png?t=N7T8https://www.w3school.com.cn/

点击事件

示例:

<body>

    <input type="button" value="这是一个按钮">

</body>

<script>

    //事件源

    let button = document.querySelector('input')

    //绑定事件类型(点击事件)onclick

    //函数设定了事件处理程序

    button.οnclick=function(){

        alert("hello")

    }

</script>

键盘事件

  1. onkeydown
  2. onkeypress
  3. onkeyup

onkeydown

键盘按下时触发事件

<body>

    <input type="text">

</body>

<script>

    //事件源

    let input = document.querySelector('input')

    //绑定事件类型(点击事件)

    //函数设定了事件处理程序

    input.onkeydown = function(){

        console.log("键盘正在按下")

    }

</script>

当我们需要获取键盘输入了什么内容时可以通过event事件,如下操作:

<body>

    <input type="text">

</body>

<script>

    //事件源

    let input = document.querySelector('input')

    //绑定事件类型(点击事件)

    //函数设定了事件处理程序

    input.onkeydown = function(event){

        console.log("键盘正在按下");

        let a = event.keyCode;

        console.log(a);

        //转换成字符

        let b=String.fromCharCode(a);

        console.log(b);

    }

</script>

效果:

从上面的效果可以看出onkeydown不区分大小写

因此我们需要使用onkeypress

事件在用户按下键时(键盘)发生

<body>

    <input type="text">

</body>

<script>

    //事件源

    let input = document.querySelector('input')

    //绑定事件类型(点击事件)

    //函数设定了事件处理程序

    input.onkeypress = function(event){

        console.log("键盘正在按下");

        let a = event.keyCode;

        console.log(a);

        //转换成字符

        let b=String.fromCharCode(a);

        console.log(b);

    }

</script>

效果:可以看出onkeypress有效的显示了键盘输入内容

onkeyup

键盘松开时触发事件,下述是另一种写法,也可以如上面的方法进行编写

<body><input type="text" onkeyup="myOnkeyup()">
</body>
<script>function myOnkeyup(){console.log("按键被抬起")}
</script>

 效果

不是所有的键都会触发onkeypress或者onkeydown 事件,如shift,alt按下时并未触发,因此我们需要另一些如altKey,ctrlKey,shiftKey

示例:

<body>

    <input type="text">

</body>

<script>

    let input = document.querySelector('input')

    input.onkeydown = function(event){

        if(event.shiftKey)

        {

            alert("shift键被按下")

        }

    }

</script>

效果:

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

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

相关文章

鸿蒙开发系列教程(十九)--页面内动画(2)

组件内转场动画 组件的插入、删除过程即为组件本身的转场过程&#xff0c;组件的插入、删除动画称为组件内转场动画。通过组件内转场动画&#xff0c;可定义组件出现、消失的效果。 transition(value: TransitionOptions) 参数可以定义平移、透明度、旋转、缩放这几种转场样…

评估方法:CMMI/能力成熟度模型集成

一、什么是CMMI CMMI&#xff0c;全称为Capability Maturity Model Integration&#xff0c;即能力成熟度模型集成。它是由美国卡内基梅隆大学软件工程研究所研发的过程改进模型&#xff0c;也是国际上用于评价软件企业能力成熟度的一项重要标准。 CMMI的目的是帮助软件企业对…

中小学信息学奥赛CSP-J认证 CCF非专业级别软件能力认证-入门组初赛模拟题第一套(完善程序题)

CCF认证CSP-J入门组模拟测试题第一套 三、完善程序题 第一题 九宫格 请完善下面的程序,将1~9个数字分别填人3x3的九宫格中,第一行的三个数字组成一个三位数。要使第二行的三位数是第一行的2倍,第三行的三位数是第一行的3倍且每个格子里的数字都不能重复,现在要求输出所有的填…

视觉slam十四讲学习笔记(四)相机与图像

理解理解针孔相机的模型、内参与径向畸变参数。理解一个空间点是如何投影到相机成像平面的。掌握OpenCV的图像存储与表达方式。学会基本的摄像头标定方法。 目录 前言 一、相机模型 1 针孔相机模型 2 畸变 单目相机的成像过程 3 双目相机模型 4 RGB-D 相机模型 二、图像…

【JavaEE】网络原理: UDP协议和TCP协议的相关内容

目录 1. 应用层 2. 传输层 2.1 端口号 2.2 UDP协议 2.3 TCP协议 1.确认应答 2.超时重传 3.连接管理 三次握手 四次挥手 状态转换 4.滑动窗口 5.流量控制 6.拥塞控制 7.延迟应答 8.捎带应答 9.面向字节流 粘包问题 10.异常情况 网络通信中, 协议是一个非常重…

第二十九回 施恩三入死囚牢 武松大闹飞云浦-分布式版本控制系统Git使用

武松要蒋门神答应三件事&#xff1a;离开快活林、东西都归还施恩&#xff0c;公开对施恩赔礼道歉&#xff0c;不许在孟州住。蒋门神不得已都答应了&#xff0c;灰溜溜地离开了孟州城。 一个月之后&#xff0c;天气转凉&#xff0c;张都监调武松到孟州城&#xff0c;做了他的亲…

统计图饼图绘制方法(C语言)

统计图饼图绘制方法&#xff08;C语言&#xff09; 常用的统计图有条形图、柱形图、折线图、曲线图、饼图、环形图、扇形图。 前几类图比较容易绘制&#xff0c;饼图绘制较难。今值此介绍饼图的绘制方法。 本方法采用C语言的最基本功能&#xff1a; &#xff08; 1.&#xff09…

《Docker极简教程》--Docker容器--Docker容器的概念

一、Docker容器的基本概念 1.1 Docker容器是什么&#xff1f; Docker容器是一种轻量级、可移植的虚拟化技术&#xff0c;用于打包、运输和运行应用程序及其所有依赖项。它利用Linux内核的特性&#xff08;如命名空间和控制组&#xff09;来提供隔离性和资源管理&#xff0c;使…

数据结构在JavaScript中的体现

一.概述 数据结构是计算机中存储、组织数据的方式。通常情况下&#xff0c;精心选择的数据结构可以带来最优效率的算法&#xff0c;其实算法并不是一个很高级的东西&#xff0c;它充斥在每一种代码组织方式中&#xff1b;而且各种语言关于数据结构方面的内容都是大同小异的&…

【复现】某某ERP 信息泄露漏洞_49

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 该ERP基于SpringBoot框架和SaaS模式&#xff0c;立志为中小企业提供开源好用的ERP软件&#xff0c;目前专注进销存财务生产功能。…

python制作比大小的程序

这个程序是为了学龄前儿童设计的&#xff0c;规则如下 随机生成两个数&#xff0c;每个数都不相同 第一个数大输入1&#xff0c;第二个数大输入2 代码如下 import random while True: var1random.randint(0,30) var2random.randint(0,30) print(&q…

七天入门大模型 :LLM大模型基础知识最全汇总

七天入门LLM大模型学习 旨在帮助初学者理解和学习LLM的基础概念和实践。 未来七天&#xff0c;我将每天为大家推出一篇课程内容&#xff0c;感兴趣的小伙伴们可关注我们 文章目录 技术交流群用通俗易懂方式讲解系列基础模型研究模型定制新范式LLM类型介绍多模态模型Agent模型C…

【MySQL】待修改

外键约束 含义 外键&#xff1a;用来让两张表的数据之间建立连接&#xff0c;从而保证数据的完整性和一致性。 员工表emp&#xff08;子表&#xff09; idnameagejobsalaryentrydatemanageriddept_id1金庸66总裁200002000-01-01null52张无忌20项目经理125002005-12-05113杨…

C++STL案例:评委打分

功能要求&#xff1a; 利用C中的STL功能模拟10个评委为5位选手打分的过程。去掉一个最高分&#xff0c;去掉一个最低分&#xff0c;对剩下的数据取平均分即为该选手的最终得分。 本案例中将用随机数模拟评委打分&#xff0c;实际应用中可以修改为输入评委的分数。 代码实现&…

Java解决删除字符使频率相同问题

Java解决删除字符使频率相同问题 01 题目 给你一个下标从 0 开始的字符串 word &#xff0c;字符串只包含小写英文字母。你需要选择 一个 下标并 删除 下标处的字符&#xff0c;使得 word 中剩余每个字母出现 频率 相同。 如果删除一个字母后&#xff0c;word 中剩余所有字母…

定点整数的表示范围

原码整数表示范围&#xff1a; − ( 2 n − 1 ) ≤ x ≤ 2 n − 1 原码整数表示范围&#xff1a;-(2^n-1)\le x \le 2^n-1 原码整数表示范围&#xff1a;−(2n−1)≤x≤2n−1 补码整数表示范围&#xff1a; − 2 n ≤ x ≤ 2 n − 1 【比原码多表示 − 2 n 】 补码整数表示范围…

lv15 平台总线驱动开发——ID匹配 3

一、ID匹配之框架代码 id匹配&#xff08;可想象成八字匹配&#xff09;&#xff1a;一个驱动可以对应多个设备 ------优先级次低&#xff08;上一章名称匹配只能1对1&#xff09; 注意事项&#xff1a; device模块中&#xff0c;id的name成员必须与struct platform_device中…

C语言系列3——流程控制:条件语句与循环结构

目录 写在开头1. if语句的应用与语法解析2. switch语句的使用技巧3. for与while循环的比较与实际运用3.1 for循环的使用3.2 while循环的使用3.3 比较与实际运用 4. 练习题目4.1 题目介绍4.2 参考答案 写在最后 写在开头 在程序设计中&#xff0c;流程控制结构是至关重要的&…

猫头虎分享已解决Bug || ValueError: No gradients provided for any variable

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

2019年通信工程师初级 实务 真题

文章目录 一、第9章 通信动力与环境通信电源系统的主要功能&#xff1a;“供”、“配”、“储”、“发”、“变” 二、第2章 传输网三、第3章 接入网四、第4章 互联网 一、第9章 通信动力与环境 【问题一】 网络通信设备对动力与环境的质量要求可以归纳为 &#xff08;1&#…