我的WebAPI学习（一）------ DOM元素的获取以及事件的基本用法

前言：这里，DOM树的概念就不多赘述，快速入门，干！

DOM元素获取

当我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作，这时候如何定位就显得很至关重要了

通过ID获取

使用方法：document.getElementById(id)
作用：根据ID获取元素对象 参数：id值，区分大小写的字符串
返回值：元素对象 或 null

根据标签名获取

使用方法：document.getElementsByTagName(‘标签名’)
或element.getElementsByTagName(‘标签名’)
作用：根据标签名获取元素对象 参数：标签名 返回值：元素对象集合（伪数组，数组元素是元素对象）

????：因为我们获得的是一个对象的集合，所以如果我们想要里面的某个元素就需要遍历

其他一些常用方法

document.getElementsByClassName可以根据类名获取元素对象的集合
document.querySelector通过选择器获取第一个匹配的元素对象
document.querySelectorAll通过选择器获取所有匹配的元素对象

最简单的方式F12复制选择器就好哈哈哈

获取特殊元素（body与html）

document.body获取body元素
document.documentElement获取html元素

事件

关于什么是事件就不多解释，网上有一堆，而且本系列主要也是给自己复习用，不讲究太多了

事件三要素

• 事件源（什么东西）：触发事件的元素
• 事件类型（什么事件）： 例如 click 点击事件
• 事件处理程序（要去做什么）：事件触发后要执行的代码(函数形式)，事件处理函数
  下面通过一个简单例子说明：

<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
//(1) 事件源 事件被触发的对象   谁  按钮
        var bt = document.getElementById('xxx');
//(2) 事件类型  
//(3) 事件处理程序  通过一个函数赋值的方式 完成
        bt.onclick = function() {
            console.log('JavaScript真好');
        }
</script>

常见的鼠标事件（网图搜集）

详细的可以查看脚本之家