    <div id="time">2022-4-27</div>
    <script>
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof (timer));

        console.dir(timer);

根据标签名获取getElementsByTagName()

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

可以获得多个！所以element加s

     document.getElementsByTagName('标签名');

1.返回的是获取过来元素对象的集合，以伪数组的形式存储的
2.我们想要依次打印里面的元素对象，我们可以采用遍历的方式
3.如果页面中只有一个li ，返回的还是伪数组的形式

注意：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的,比如内容变了，JS是不需要改变的，会自动变化的
如果获取不到元素 , 则返回为空的伪数组(因为获取不到对象)

<body>
    <ul>
        <li>知否知否，应是绿肥红瘦13</li>
        <li>知否知否，应是绿肥红瘦2</li>
        <li>知否知否，应是绿肥红瘦3</li>
        <li>知否知否，应是绿肥红瘦4</li>
        <li>知否知否，应是绿肥红瘦5</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 ，以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2.我们想要依次打印里面的元素对象，我们可以采用遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
    </script>
</body>

还可以获取某个元素(父元素)内部所有指定标签名的子元素.

    element.getElementsByTagName('标签名');

注意：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

    <ol id="ol">
        <li>生僻字1</li>
        <li>生僻字2</li>
        <li>生僻字3</li>
        <li>生僻字4</li>
    </ol>
    <script>
        // element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        var ol = document.getElementsByTagName('ol'); // 返回的是伪数组样式的 [ol]
        console.log(ol[0].getElementsByTagName('li')); // 这里只有一个ol，所以ol[0]就是这一个ol

        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li')); // 可以给ol加上id

通过 HTML5 新增的方法获取

1.document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合

        var boxs = document.getElementsByClassName('box');
        console.log(boxs); // [div.box, div.box]

2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

切记：里面的选择器要加符号

        var firstBox = document.querySelector('.box'); // .box 类选择器
        console.log(firstBox);
        var nav = document.querySelector('#nav'); // #nav id选择器
        console.log(nav);
        var li = document.querySelector('li'); // 标签选择器
        console.log(li);

3. document.querySelectorAll('选择器'); // 根据指定选择器返回所有元素对象集合(还是伪数组

        var allBox = document.querySelectorAll('.box');
        console.log(allBox); // 返回所有类命为 box的盒子
        var lis = document.querySelectorAll('li');
        console.log(lis);   // 返回所有 标签名为li的盒子

所有代码运行截图为：

获取特殊元素（body，html）

获取body元素

doucumnet.body； // 返回body元素对象

        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle); // 返回的是元素对象，更好的查看对象的属性和方法

获取html元素

document.documentElement； // 返回html元素对象

        var htmlEle = document.documentElement;
        console.log(htmlEle);

代码运行截图如下：

事件基础

事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解：触发--- 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件三要素

事件是由三部分组成：事件源，事件类型，事件处理程序。我们也称为事件三要素

事件源：事件被触发的对象（点一个按钮弹出对话框，按钮就是事件源）
事件类型：如何被触发的（鼠标点击onclick，鼠标经过，键盘按下等）
事件处理程序：通过一个函数赋值的方式完成做什么事情（要弹出对话框）

案例：点击按钮弹出警示框

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框

        var btn = document.getElementById('btn');  // 获得事件源
        btn.onclick = function () {
            alert('点秋香');
        }
    </script>
</body>

执行事件的步骤

1. 获取事件源 //var btn = document.getElementById('btn');

2. 注册事件（绑定事件） //btn.onclick

3. 添加事件处理程序（采取函数赋值形式） // btn.onclick = function () { }

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        var div = document.querySelector('div');
        div.onclick = function () {
            console.log('我被选中了');
        }
    </script>
</body>