DOM简介+操作元素+修改样式+案例

API（应用程序官方接口）
简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
Web API
是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。
web api很多，所以这阶段成为 web apis

DOM简介

文档对象模型（Document Object Model，简称DOM），处理可扩展标记语言（HTML或者XML）的标准编程接口。
通过DOM接口可以改变网页的内容、结构、样式。

• DOM树
  文档：一个页面就是一个文档，DOM中用document表示；
  元素：页面中所有的标签都是元素，DOM中用element表示。
  节点：页面中所有内容都是节点，DOM中用node表示。
  DOM把以上内容都看作是对象。

获取元素

获取页面中元素的方式：

• 根据ID获取
• 根据标签名获取
• 通过HTML5新增的方法获取
• 特殊元素获取
  根据ID获取
  通过getELementById（id）；
  1、文档页面从上往下加载，所以先得有标签 ，所以script写在标签下面。
  2、id参数是大小写敏感的字符串
  3、返回的是一个元素对象。
  4、书写方式：document.getELementById（）
  5、console.dir//打印我们返回的元素对象，更好的查看里面的属性和方法。
  根据标签名获取
  getElementByTagName（）
  1、返回的是获取过来元素对象的集合，以伪数组的形式存储。
  2、想要依此打印里面的元素对象可以采用遍历的方式。
  3、得到的元素对象是动态的。
  4、如果只有一个li时，返回的还是为数组形式
  5、若果页面中没有li，放回的是空的伪数组。
  document.getElementByTagName（‘li’）;
  6、获取某个父元素内部所有指定的标签名的子元素。父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。
  eg: console.log(ol[0].getElementByTagName（‘ol’）);
  H5新增的方法获取
  1、getElementByClassName 根据类名获得某些元素集合。
  2、document.querySelector()返回指定选择器的第一个元素。里面的选择器要加符号.box #nav
  3、document.querySelectorAll()，返回指定选择器的所有对象集合。

获取特殊元素
1、获取body 元素
document.body；
2、获取html 元素
document.documentElement；

事件基础

简单理解：触发–响应机制。
网页中每个元素都可以产生某些可以触发Javascript的事件。
<