[JavaScript] 常见WebAPI用法

一、WebAPI是什么？

上一篇讲JS基础语法的文章说提到了JS由三部分组成，分别是

• ES：JavaScript语法；
• DOM：页面文档对象，对页面中的元素进行操作；
• BOM：浏览器对象模型，对浏览器窗口进行操作；
  而WebAPI就包括了DOM + BOM；

本质上可以看成一些现成的方法来供程序员调用，方便开发。
由于WebAPI有很多，大多数使用都是以查阅接口的详细说明文档为主，本文主要列举一些开发中常用的API。

二、事件

2.1 概念

JS要构建动态页面，就需要感知用户的行为。用户对于页面的一些操作，比如点击、选择、修改等操作都会在浏览器中产生一个个时间，被JS获取到，从而达到交互的效果。
其中，最常用的事件就是点击事件onclick。

2.2 事件三要素

1. 事件源：哪个元素触发的；
2. 事件类型：是点击，选中，还是修改？
3. 时间处理程序：进一步如果处理，往往是一个回调函数；

三、获取元素

需要通过一个API，querySelector函数来实现~该方法返回匹配指定CSS选择器的一个元素。

/* 语法:
参数：CSS选择器
类型：String
返回值：匹配指定CSS选择器的第一个元素，如果没有找到，返回null。
*/
document.querySelector(CSS selectors);

<div class="box">abc</div>
<script>
    var elem1 = document.querySelector('.box');
    console.log(elem1);
</script>

若选中的元素有多个，但querySelector只能获取到其中一个，如果想要都获取到，就需要使用querySelectorAll函数来实现~

<div class="box">abc</div>
<div id="id">def</div>
<script>
    var elems = document.querySelectorAll('div');
console.log(elems);
</script>

四、操作元素

4.1 获取/修改元素内容

内容：<div>内容</div>开始标签和结束变迁中间的部分就是内容，内容可以是一段文字，也可以是其他的HTML标签；

//读操作
元素对象.innerText;
//写操作
元素对象.innerText = String;

4.1.1 innerText

innerText只能获取/修改元素里面的文本；

<div>
        <span>hello world</span>
        <span>hello world</span>
</div>
<script>
        var div = document.querySelector('div');
        // 读取 div 内部内容
        console.log(div.innerText);
        // 修改 div 内部内容, 界面上就会同步修改
        div.innerText = 'hello js <span>hello js</sp