【自学javascript笔记】DOM对象获取元素以及Date()对象的应用——单击按钮显示时间

deidei~~

于 2023-01-24 13:13:44 发布

分类专栏： javascript 学习感悟文章标签： javascript 前端开发语言 html

本文链接：https://blog.csdn.net/qq_51843898/article/details/128754187

版权

javascript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

学习感悟

7 篇文章 0 订阅

订阅专栏

简介：本篇文章总结了javascript用DOM对象获取页面元素的方式，以及Date()内置对象的应用。展现了如何实现简单的用户交互效果，并修改页面显示内容。

前言

我们在学习了html与CSS之后一定会产生这样的疑问：我们在平时上网过程中常见的交互效果，比如说“单击按钮显示内容”，这个是怎么做出来的呢？今天我们就来探讨一下，如何实现事件的触发。

一、事件三要素

什么是事件：事件可以理解成是被Javascript侦测到的行为。可以简单理解成：“触发—相应”的机制。
事件三要素：

事件源： 事件被触发的对象，即这个事件是发生在哪一个元素身上。
事件类型： 描述事件是如何被触发的。比如鼠标点击，还是鼠标经过，还是键盘按下等等。
事件处理程序： 用一个函数赋值的方式，来描述这个事件被触发之后将发生什么事。

我们在实际写程序的时候，需要遵循上面事件三要素的步骤来完成一个事件的定义与实现。首先用DOM 获取事件源 ，然后 给出事件类型（比如btn.onclick表示鼠标点击时触发），最后 在匿名函数中写出触发之后期望实现的操作。
其中事件类型是我们需要积累的，下面这张表给我们列出了一些常见的鼠标事件：

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

二、DOM选中事件源

经过上面的分析，我们知道了要完整的写一个事件首先需要选中事件源。那么我们怎么选中呢？答案是使用DOM对象来进行选中。
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。
有以下常见的4种方式来对页面中的内容进行选中。（后面两种是H5中新增的获取元素的方式）

getElementById()： 根据元素的ID来获取元素。
getElementsByTagName()： 根据元素的标签来进行选中。
getElementsByClassName()： 根据元素的类名来进行选中。
querySelector()： 可以根据元素的ID、类名、标签来选取元素，但是如果出现多个相同标签的元素，或者具有同一个class的元素，只能选中第一个。
querySelectorAll()： 跟querySelector()类似，但是可以选中具有相同标签名或者class名的所有元素。

1.getElementById()

在获取某个特定id的元素的时候应该在script中定义一个变量来承接document.getElementById(‘ID’)的返回值，该返回值就是那个ID的对象。
示例代码如下：

<body>
    <div id="time">2022-01-23</div>
    <script>
        var timer=document.getElementById('time');
    </script>
</body>

2.getElementsByTagName()

当我们的页面中有很多某个特定的标签的时候，我们可以采用document.getElementByTagName()来选中页面中的所有该标签元素。
使用document.getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
示例代码：

<body>
    <ul>
        <li>咪</li>
        <li>喵</li>
        <li>咪咪</li>
        <li>喵喵</li>
        <li>咪咪咪</li>
        <li>喵喵喵</li>
    </ul>
    <script>
        var lis=document.getElementsByTagName('li');
    </script>
</body>

这样，我们就选中了页面中所有的<li>标签。并且可以用数组的方式来选择我们需要哪一个li。
li数组下标
不过需要注意的是，getElementsByTagName返回的永远是一个数组，所以如果事实上取的标签如果全局只有一个的话，还是需要用数组元素的形式去取（下标为0）。

3.getElementsByClassName()

使用方式与上面的getElementsByTagName类似，都是可以选中一类元素，可以选中所有指定“类名”的元素，以集合的形式返回。使用的时候要当作数组来使用，访问第一个元素带下标0。
使用方式：

var Ele=document.getElementsByClassName("类名");//根据类名返回元素对象集合

4.querySelector()

根据上面两种获取元素的方式，我们已经能够通过ID名获取某一个具体的元素，也能够通过标签名获取某一类元素。那么我们能不能通过“类名”来进行选择呢？
答案是：可以的。
在H5中新增了一种获取元素的方式，叫做querySelector()，运用它我们既可以通过ID获取元素，也可以通过标签名获取元素，还可以通过类名获取元素。
不过，querySelector只能返回指定选择器的第一个对象，不能全部返回。
使用方法：querySelector(“选择器名称”); 既然是选择器，那么就不要忘记名字前面的符号。

var Ele=document.querySelector("#time");
var Ele1=document.querySelector("div");
var Ele2=document.querySelector(".box");

Ele指向的是ID为time的元素。
Ele1指向的是标签为div的第一个元素。
Ele2指向的是类名为box的第一个元素。

5.querySelectorAll()

querySelectorAll选择器使用方法与querySelector类似，但是会返回指定选择器的所有元素对象，所以还是一个集合。要使用其中的某一个指定元素的时候，需要用数组的方式去访问。

var Ele=document.querySelectorAll("#time");
var Ele1=document.querySelectorAll("div");
var Ele2=document.querySelectorAll(".box");

会以集合的形式返回所有页面上存在的该类或者标签的元素。

三、DOM对指定事件源写处理程序

在了解了怎么选定页面中指定元素的多种方式之后，我们来看一下怎么对选定的这个事件源写一个处理程序，就是以某种特定方式触发了事件之后定义这个事件怎么发生。定义怎么执行这个事件我们常常采用下面这个框架模式：

var btn=document.querySelector('button')//选取元素
btn.onclick(这里的onclick可以换成别的事件类型)=function(){
     //这里面写具体的操作
}

上面这个框架就表示，我们先选中了标签是button的第一个元素，然后当鼠标单击这个元素的时候，就执行function中的内容。这就是定义一个事件的基本格式。
接下来我们通过一个实例来理解一下。
现在我们需要写一个程序，目标是：按下按钮就能显示现在的时间

那么经过分析，我们首先先在body中放一个按钮：

<button id="timer">点我显示当前时间</button>

这样，页面上就能显示出这个按钮，但是我们点击它并不能显示当前时间。如果在点击它之后还要在其下面显示出时间，那么就必定需要有一个容器来承接这段文字，不然是放不上去的。
所以我们先在button下面放一个空的div。

<button id="timer">点我显示当前时间</button>
<div></div>

如果不点击这个按钮，那么div里面的内容就是空的。如果点击了这个按钮，那么div内就会被当前时间填充。
接下来定义事件：
在他们下面写一个script，并且通过querySelector获取两个元素。

    <script>
        //获取事件对象
        var btn=document.querySelector('button');
        var write=document.querySelector('div');
        //注册事件 如果点击按钮就会执行function中的内容
        btn.onclick=function(){
            //里面给出执行程序，即将当前时间显示在div内
        }
  </script>

接下来我们来介绍如何修改元素内的内容。修改元素内的内容我们可以用innerText也可以用innerHTML，这两者之间的区别是：如果在innerText中书写标签，他会将其以文本的形式呈现在容器中，而innerHTML可以识别这个标签。所以innerHTML更加灵活，更加常用。
知道怎么修改div内的内容将其填充进去之后，那么内容怎么办呢？也就是我们如何获取当前的时间呢？
这里就不得不提一下Date内置对象，专门用来获取当前时间，其具体使用方法可以查阅MDN文档，这里不再赘述。
（不过有一点值得注意的是Date()是一个构造函数，需要var一个对象来承接它）
给出获取当前时间的函数：

function GetDate(){
    var time=new Date();
    var year=time.getFullYear();

    var month=time.getMonth()+1;//月份是从0开始的，所以需要+1
    if(month<10){month='0'+month;}

    var day=time.getDate();
    if(day<10){day='0'+day;}
           
    var hour=time.getHours();
    if(hour<10){hour='0'+hour;}
            
    var minute=time.getMinutes();
    if(minute<10){minute='0'+minute;}
            
    var second=time.getSeconds();
    if(second<10){second='0'+second;}
    return "现在是"+year+"年"+month+"月"+day+"日"+" "+hour+"时"+minute+"分"+second+"秒";
}

所以完整的实现该效果的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示系统时间</title>
    <style>

    </style>
</head>
<body>
    <button id="timer">点我显示当前时间</button>
    <div></div>
    <script>
        //获取事件对象
        var btn=document.querySelector('button');
        var write=document.querySelector('div');
        //注册事件 如果点击按钮就会执行function中的内容
        btn.onclick=function(){
            //将当前时间获取之后显示在div中
            write.innerText=GetDate();
        }
        function GetDate(){
            var time=new Date();
            var year=time.getFullYear();
            var month=time.getMonth()+1;//月份是从0开始的，所以需要+1
            if(month<10){month='0'+month;}

            var day=time.getDate();
            if(day<10){day='0'+day;}
            
            var hour=time.getHours();
            if(hour<10){hour='0'+hour;}
            
            var minute=time.getMinutes();
            if(minute<10){minute='0'+minute;}
            
            var second=time.getSeconds();
            if(second<10){second='0'+second;}
            return "现在是"+year+"年"+month+"月"+day+"日"+" "+hour+"时"+minute+"分"+second+"秒";
        }
    </script>
</body>
</html>

总结

以上便是如何用js实现一些用户交互事件的方法，主要讲述了什么是事件的三要素，如何获取事件对象（重要），以及如何定义事件执行程序，并给出了应用模版。

deidei~~

关注

2
点赞
踩
0
收藏
打赏
0
评论
【自学javascript笔记】DOM对象获取元素以及Date()对象的应用——单击按钮显示时间

我们在学习了html与CSS之后一定会产生这样的疑问：我们在平时上网过程中常见的交互效果，比如说“单击按钮显示内容”，这个是怎么做出来的呢？今天我们就来探讨一下，如何实现事件的触发。以上便是如何用js实现一些用户交互事件的方法，主要讲述了什么是事件的三要素，如何获取事件对象（重要），以及如何定义事件执行程序，并给出了应用模版。
复制链接

扫一扫