JS（12）Web API

1.Web ApI的概念

web API是浏览器提供的一套操作浏览器功能和页面元素的APi（Bom和Dom）

2.Dom

2.1.什么是Dom

-- 文档对象模型（Domcument Object Model，简称Dom），是W3C组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。
-- W3C已经定义了一系列的Dom接口，通过这些Dom接口可以改变，网页内容，结构和样式。

2.2.Dom树

-- Dom树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理结果可以加入到当前的页面。
-- 文档：一个页面就是一个文档，Dom中使用document表示。
-- 节点：网页中的所有内容，在文档树中都是节点（标签，属性，文本，注释）使用node表示。
-- 标签节点：网页中的所有标签，通常称为元素节点，又简称“元素”，使用element表示。

2.3.获取元素

2.3.1.根据id来获取

-- 语法：document.getElementById(id)
-- 参数：id值，区分大小写的字符串。
-- 返回值：元素对象和null

2.3.2.根据标签名获取元素

-- 语法：document.getElementsByTagName('标签名') or element.getElementByTagName('标签名')
-- 返回值：元素对象集合（伪数组，数组元素是元素对象）
-- 注意：
	-- 1.因为得到的是一个对象的集合，所以想操作里面的元素就需要被遍历。
	-- 2.得到元素对象是动态的，即当前页面增加了标签，集合中也增加了元素。

2.3.3.H5新增获取元素方式

-- 1.document.getElementByClassName('类名')  	//根据类名返回元素对象集合
-- 2.documen.querySelector('选择器')		//根据指定选择器返回第一个元素对象
-- 3.document.querySelectorAll('选择器')		//根据指定选择器返回元素对象集合
	-- 注意：
		querySelector和querySelectorAll里面的选择器需要加符号（如：.box,#nav）

2.3.4.获取特殊元素（body，html）

-- 1.获取body元素
	let bodyEle = document.body 	//返回body元素对象
-- 2.获取html元素
	let htmlEle = doucument.documentElement 		//返回html元素