JavaScript知识点整理（十三）- DOM -（1）简介、获取元素、事件基础

目录

一、DOM简介

1.1 什么是DOM

1.2 DOM树

二、获取元素

2.1 如何获取页面元素

2.2 根据ID获取

2.3 根据标签名获取

2.4 通过HTML5新增的方法获取

2.5 获取特数元素（body，html）

三、事件基础

3.1 事件概述

3.2 执行事件的步骤

3.3 常见的鼠标事件

---

一、DOM简介

1.1 什么是DOM

文档类型对象，是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变页面内容、结构和样式

1.2 DOM树

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

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

二、获取元素

2.1 如何获取页面元素

DOM在我们实际开发中主要用来操作元素

获取页面中元素可以使用以下方式：

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

2.2 根据ID获取

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

document.getElementById - Web API 接口参考 | MDN (mozilla.org)

语法：

var element = document.getElementById(id);

案例练习 

    <div id="time">2022-2-14</div>
    <!-- 1. 因为文档页面由上到下加载，所以先得有标签 所以script写道标签的下面 -->
    <script>
        // 2.get：获取；element：元素；
        // 3.id区分大小写
        // 4.返回的元素是一个对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5. console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
        console.dir(timer);
    </script>

2.3 根据标签名获取

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

Document.getElementsByTagName() - Web API 接口参考 | MDN (mozilla.org)

 语法：

var elements = document.getElementsByTagName(name);

案例练习

    <ul>
        <li>莫愁前路无知己1</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]);
        }
        // 3.如果页面中只有一个li 返回的还是伪数组的形式
        // 4.如果页面中没有这个元素返回的是空的伪数组的形式
    </script>

 注意：

1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
2. 得到的元素对象是动态的

可以获取某个元素（父元素）内部所指定签名的子元素

        element.getElementsByTagName('标签')

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己 

2.4 通过HTML5新增的方法获取

        document.getElementsByClassName('类名'); // 1. 根据类名返回元素对象集合
        document.querySelector('选择器'); // 2. 根据指定选择器返回第一个元素对象 里面的选择器需要加对应的符号如'.'或'#'
        document.querySelectorAll('选择器'); //根据指定选择器返回所有元素对象集合

2.5 获取特数元素（body，html）

        document.body // 1. 返回body元素
        document.documentElement // 2. 返回html元素

三、事件基础

3.1 事件概述

事件是由三部分组成：事件源、事件类型、事件处理程序

• 事件源：事件被出发的对象，例如 按钮
• 事件类型：如何促发 什么事件，例如 鼠标点击(onclick)
• 事件处理程序：通过一个函数赋值的方式 完成

3.2 执行事件的步骤

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

案例练习

    <div>123</div>
    <script>
        // 执行步骤
        // 点击div 控制台输出 被选中
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2. 绑定事件 注册事件
        // div.onclick
        // 3. 添加事件处理程序
        div.onclick = function(){
            console.log('被选中');
        }
    </script>

3.3 常见的鼠标事件

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