【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

           

            console.log(document.querySelector('.box1'));

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

         

        querySelectorAll

        选中一组元素

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

        事件

        事件初识

        基本概念

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

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

        事件三要素

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

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

        点击事件

        示例：

           

            //事件源

            let button = document.querySelector('input')

            //绑定事件类型（点击事件）onclick

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

            button.οnclick=function(){

                alert("hello")

            }

        键盘事件

        1. onkeydown
        2. onkeypress
        3. onkeyup

        onkeydown

        键盘按下时触发事件

           

            //事件源

            let input = document.querySelector('input')

            //绑定事件类型（点击事件）

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

            input.onkeydown = function(){

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

            }

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

           

            //事件源

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

            }

        效果：

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

        因此我们需要使用onkeypress

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

           

            //事件源

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

            }

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

        

        onkeyup

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

            
        
        
            function myOnkeyup(){
                console.log("按键被抬起")
            }
        

         效果

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

        示例：

           

            let input = document.querySelector('input')

            input.onkeydown = function(event){

                if(event.shiftKey)

                {

                    alert("shift键被按下")

                }

            }

        效果：