webAPI定义解释，学习，innerText，innerHTML，textContent，各种获取元素的方法

这篇文章是用来记录我学习webAPI的收获：
其中innerText和textContent的点是参考 郝壮_7b3d转载的一篇文章的。
今天是重新复习webAPI的第一天
什么是webAPI?
API(Application Programming Interface 应用程序接口)其实就是一组工具，是一些预定义的函数，目的是方便开发人员。
而webAPI是浏览器提供的一套工具，这些工具可以操作浏览器。

js的组成：1.ECMAScript ：定义了一系列的规范
2.DOM ： 文档对象模型（一个网页可称为文档，而document就是这个对象，网页中所有内容都是节点）
3.BOM ： 浏览器对象模型

Document是一个树形结构
图片:
当要操纵页面中的元素时，首先得获取它，这下面是获取元素的几个方法：
1.document.getElementById() 通过id来获取单个元素，这里有两个注意的点：
【1】.只能通过document来获取，不能通过其他元素获取
【2】.获取的元素并非是实时的

2.document.getElementsByTagName()/elem.getElementsByTagName()通过标签名来获取一组元素，没有兼容性问题，且获取的实时的，很好用

3.document.getElementsByClassName()/elem.getElementsByClassName()通过类名来获取一组元素，这里有两个注意的点：
【1】.获取的元素是实时的
【2】.IE9以下不支持


4.document.querySelector()这种是可以用css选择器的写法来获取一组匹配元素中的第一个，document.querySelectorAll()也是，不过这个是获取一组，这两个获取到的元素也不是实时的。

innerText和innerHTML：
两个都能获取调用它的开始标签到结束标签中的内容，只是第一个仅能获取文本内容并不识别标签，而第二个可以获取到所有子节点（包括文本节点，注释节点，元素节点…)。

且第一个会忽略换行，第二个不会。

这两个也可以用于设置元素内容：
element.innerText = ‘…’;
element.innerHTML = ‘…’
但要注意用这两个设置内容时原先的内容全会消失，被新内容代替。

innerText和textContent：
【1】.innerText的显示依赖于浏览器，而textContent的显示依赖于代码的书写：

【2】.textContent可以显示

这两者的兼容性：
谷歌两个都支持
新版的Firefox两个都支持，旧版的只支持textContent
IE9及以上两个都支持，旧版仅支持innerText