JavaScript--DOM01--元素获取和基础事件JavaScript--DOM01--元素获取和基础事件本文主

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天

DOM

简介

文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口

DOM树

文档：一个页面就是一个文档，DOM中使用document来表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

DOM把以上内容都可以看作是对象

获取元素

通过以下方式获取页面元素

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

根据ID获取

使用getElementByld()方法获取带有ID的元素对象

作用

getElementByld()返回一个匹配特定ID的元素

语法

var element = document.getElemenntById(id);

参数
- element是一个Element的对象。如果当前文档有特定ID的元素不存在则返回null
- id是大小写的敏感的字符串，代表要查找的元素的ID
返回值

返回一个匹配到ID的DOM Element对象，若果在当前文件下没找到返回null

示例

<body>
    <div id = 'now'>
        2022-6-29
    </div>
    <script>
    	var time = document.getElementById('now');
       console.log(time);
       console.log(typeof(time));
       //可以获取一些有关于这个元素对象的细节
       console.dir(time);
    </script>
</body>

注意

因为文档页面从上到下执行，所以先得有标签元素，所以JavaScript写到标签元素的下面
get，获得；element，元素；by，通过驼峰命名法
参数id是大小写敏感的字符串
返回的是一个元素对象
console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法

获取某类标签元素

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

作用

getElementsByTagName 方法返回具有给定标记名称的元素

语法

getElementsByTagName(name)

参数

name：一个字符串，表示元素的名称。

返回值

返回的是获取过来元素对象的集合，以伪数组的形式存储的

示例

<body>
    <ul>
        <li>mzmm403</li>
        <li>mzmm403</li>
        <li>mzmm403</li>
        <li>mzmm403</li>
        <li>mzmm403</li>
    </ul>
    <ol>
        <li>mzmm403</li>
        <li>mzmm403</li>
        <li>mzmm403</li>
        <li>mzmm403</li>
        <li>mzmm403</li>
    </ol>
    <script>
    	var list = document.getElementsBayTagName('li');
        console.log(list);
        console.log(typeof(list));
        var list1 = document.getElementsByTagName('ol');
        console.log(list1[0].getElementsByTagName('li'))
    </script>
</body>

注意

一次打印内部对象可以采用遍历的方式
得到元素对象是动态的（即标签内部的内容变化，JavaScript的获取的对象内部内容跟着变）
如果页面只有一个li或者没有li，返回的还是伪数组的形式
我们想要获取父元素内部所有指定标签的子元素我们可以现获取父元素然后从父元素组成的伪数组中获取到我们指定的标签名的子元素
在获取指定的标签名的子元素时应注意父元素必须是单个对象

通过HTML5新增的方法获取

通过类名获取 getElementsByClassName

语法

document.getElementsByClassName(name)

参数

表示要匹配的类名的字符串;多个类名由空格分隔

返回值

根据类名获得某些元素集合

示例

<body>
    <div class='box'>
        盒子
    </div>
     <div class='box'>
        盒子
    </div>
    <div id='nav'>
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
    	var boxs = document.getElementsByClassName('box');
        console.log(boxs);
    </script>
</body>

注意

只能在html5里面使用

querySelector() 根据指定选择器返回第一个元素对象

语法

document.querySelector('选择器');

返回值

根据指定选择器返回第一个元素对象

示例

<body>
    <div class='box'>
        盒子1
    </div>
     <div class='box'>
        盒子2
    </div>
    <div id='nav'>
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
    	var firstBox = document.querySelector('.box');
        console.log(firstBox);
    </script>
</body>

注意

里面的选择器需要加符号类必须要加. id要加#
html5里面使用

doucument.querySelectorAll() 根据指定选择器返回

语法

doucument.querySelectorAll('选择器');

返回值

根据指定选择器返回，并且也是以伪数组的方式返回

特殊元素获取

获取body元素

示例

<body>
    <script>
    	var body = doucument.body;
        console.log(body);
        console.dir(body);
    </script>
</body>

获取html标签

示例

<!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>Document</title>   
</head>
<body>
    <script>
    	var html = doucument.doucumentElement;
        console.log(html);
    </script>
</body>
</html>

基础事件

事件的概述

出发响应的一种机制

示例

<body>
    <button id='btn'>
        mzmm403
    </button>
    <script>
        // 获得一个事件源
    	var btn = document.getElementById('btn');
        //绑定事件并使用函数指定事件处理程序
        btn.onclick = function(){
            alert('我是mzmm403');
        }
    </script>
</body>

事件三要素
- 事件源：事件被触发的对象
- 事件类型：如何触发什么事件，比如鼠标点击（onclick）还是鼠标经过还是键盘按下等
- 事件处理程序：通过一个函数赋值的方式完成

执行事件步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

常见的鼠标事件

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