文章目录
一、WebAPI是什么?
上一篇讲JS基础语法的文章说提到了JS由三部分组成,分别是
- ES:JavaScript语法;
- DOM:页面文档对象,对页面中的元素进行操作;
- BOM:浏览器对象模型,对浏览器窗口进行操作;
而WebAPI就包括了DOM + BOM;
本质上可以看成一些现成的方法来供程序员调用,方便开发。
由于WebAPI有很多,大多数使用都是以查阅接口的详细说明文档为主,本文主要列举一些开发中常用的API。
二、事件
2.1 概念
JS要构建动态页面,就需要感知用户的行为。用户对于页面的一些操作,比如点击、选择、修改等操作都会在浏览器中产生一个个时间,被JS获取到,从而达到交互的效果。
其中,最常用的事件就是点击事件onclick。
2.2 事件三要素
- 事件源:哪个元素触发的;
- 事件类型:是点击,选中,还是修改?
- 时间处理程序:进一步如果处理,往往是一个回调函数;
三、获取元素
需要通过一个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</span>'