Web API——获取元素、事件基础

1. 如何获取页面元素
DOM在实际开发中主要用来操作元素
获取页面中的元素可使用以下几种方式：
（1）根据ID获取
（2）根据标签名获取
（3）根据HTML5新增的方法获取
（4）特殊元素获取

2. 根据ID获取
使用getElementById()方法可以获取带有ID的元素对象
element是一个Element对象，如果当前文档中拥有特定ID的元素不存在则返回null
id是大小写敏感的字符串，代表了所要查找的元素的唯一ID

//返回的是获取过来元素对象的集合，以伪数组的形式存储
document.getElementsByTagName('li');//可以得到这个元素里面的某些标签

var nav = document.getElementById('nav');//ID只有一个，获得的是这个nav元素

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

document.getElementsByClassName('box');

querySelector返回指定选择器的第一个元素对象

var firstBox = document.querySelector('.box');

querySelectorAll()返回指定选择器所有元素对象集合

var allBox = document.querySelectorAll('.box');

3.获取特殊元素(body, html)

var bodyEle = document.body;//获取body元素

var htmlEle = document.documentElement;//获取html元素

事件基础：触发响应机制。
Javascript使我们有能力创建动态页面，事件是可以被Javascript侦测到的行为。
网页中每个元素都可以产生某些可以触发Javascript的事件，例如可以在用户点击某个按钮时产生一个事件，然后去执行某些操作。
事件三要素：即事件由三部分组成：事件源，事件类型，事件处理程序。
事件源：事件被触发的对象，按钮。
事件类型：如何触发，什么事件：鼠标点击还是经过或者按下？
事件处理程序：通过一个函数赋值的方式完成