DOM | DOM树 + 获取元素 +事件基础 + 常见的鼠标事件

目录

DOM简介

什么是DOM

DOM树

获取元素

如何获取页面元素

根据ID获取getElementById()

 根据标签名获取getElementsByTagName()

通过 HTML5 新增的方法获取

 获取特殊元素（body，html）

事件基础

事件概述

事件三要素

 执行事件的步骤

常见的鼠标事件

---

DOM简介

什么是DOM

文档对象模型（document object model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

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

DOM树

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

DOM 把以上内容都看做是对象，有属性和方法

---

获取元素

如何获取页面元素

获取页面中的元素可以使用以下几种方式:

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

根据ID获取getElementById()

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

     document.getElementById('id');

•         // 1.文档页面加载是从上往下的，所以先得有标签，我们的script写到标签的下面
•         // 2. get 获得element 元素  by 通过 驼峰命名法
•         // 3. 参数 id是大小写敏感的字符串
•         // 4. 返回的是一个元素对象

•         // 5. console.dir(); 打印我们返回的元素对象，可以更好的查看里面的属性和方法

    
2022-4-27
    

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

    element.getElementsByTagName('标签名');

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

    

        
生僻字1
        
生僻字2
        
生僻字3
        
生僻字4
    
    

 执行事件的步骤

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

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

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

    
123
    

常见的鼠标事件