【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，调用这个方法的元素将作为本次查找的根元素

示例代码：

   

box1

   

box2

   

 

querySelectorAll

选中一组元素

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

事件

事件初识

基本概念

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

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

事件三要素

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

参考手册w3school 在线教程https://www.w3school.com.cn/

点击事件

示例：

   

键盘事件

1. onkeydown
2. onkeypress
3. onkeyup

onkeydown

键盘按下时触发事件

   

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

   

效果：

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

因此我们需要使用onkeypress

事件在用户按下键时（键盘）发生

   

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

onkeyup

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

 效果

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

示例：

   

效果：