原生JavaScript APIs基础回顾

1. API 和Web API

什么是API？
API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能
什么是Web API？
Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

2.DOM简介

2.1什么是DOM

文档对象模型（Document Object Model），是W3C组织推荐的可处理扩展标记语言（HTML或者XML）的标准编程接口

2.2 DOM树

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

3. 元素操作

3.1获取普通元素

通过 id 获取：
document.getElementById("id名")

<div id="one"> </div>

<script>
	var div = document.getElementById("one");
</script>

通过标签名获取：
document.getElementsByTagName("标签名")

<div> </div>
<div> </div>
<div> </div>

<script>
	var divs = document.getElementsByTagName("div");
</script>

H5新增获取元素方式-根据类名获得：
document.getElementsByClassName("类名")

<div class="box"> </div>
<div class="box"> </div>
<div class="box"> </div>

<script>
	var divs = document.getElementsByClassName("box");
</script>

H5新增获取元素方式-通过选择器获得：
document.querySelector("选择器")
document.querySelectorAll("选择器")

<div class="box" id="one">第一个</div>
<div class="box" id="one">第二个</div>
<div class="box" id="one">第三个</div>

<script>
	//获取匹配的第一个元素
	var div = document.querySelector("div"); //标签选择器获取
	var div = document.querySelector("#id"); //id选择器获取