WebAPI

1 什么是WebAPI

前面我们介绍的JS分成三个大的部分：

• ECMAScript：基础语法（这是一套标准，所有的JS引擎都要遵守这个标准），但是这个部分只能写一些基础的逻辑流程，想要完成更复杂的任务，完成和浏览器及页面的交互，就需要以下两个部分；
• DOM API：用来操作页面的一组api；
• BOM API：浏览器对象模型，对浏览器窗口进行操作的一组api。

其中WebAPI就包含了DOM和BOM。

2 DOM API

2.1 获取元素

类似于css选择器的功能

• querySelector：前面学习的获取元素都较为复杂，使用querySelector能够完全复用前面的CSS选择器，更便捷准确的获取元素对象；
  
• querySelectorAll：用法和上面类似，返回元素的集合。

2.2 事件

用户针对浏览器的操作都会在浏览器上产生事件，不同种类的操作就会产生不同的事件，图形化界面的程序都会有事件，如点击、选择、修改、键盘输入等。

事件三个核心要素：

• 事件源：事件是哪个元素发出的；
• 事件类型：点击、移动、键盘输入、调整窗口；
• 事件处理程序：通过哪个函数进行操作。

2.3 操作元素

元素就是HTML标签，操作元素就是在JS中先获取到对应的HTML对象之后，再来操作其中的内容或者属性。

2.3.1 获取/修改元素内容

元素内容：开始标签和结束标签之间的东西。

• innerHTML属性：获取/修改标签的元素内容
  获取元素内容：
  
  
  修改元素内容：
  
  
  

• innerTEXT属性：也是获取/修改元素的属性， 无法获取到 div 内部的 html 结构, 只能得到文本内容，没有innerHTML好用。

2.3.2 获取/修改元素属性

修改开始标签里面的键值对。
获取元素属性：
alt是img标签自带的属性，没有手动指定的时候是空字符串，不是undefined。

修改元素属性：



不只是img标签，其他的所有标签也可以进行获取和修改元素属性。

2.3.3 获取/修改表单元素属性

表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改：

• value: input 的值
  
  
• disabled: 禁用
• checked: 复选框会使用
  
  
• selected: 下拉框会使用
• type: input 的类型(文本, 密码, 按钮, 文件等)
  
  
  
  案例一：点击计数
  在input里面存个整数，使用两个按钮，一个减一，一个加一。
  
  

2.3.4 获取/修改样属性

1. 行内样式：通过style属性嵌入到html里面的样式
   
   
   但是行内样式使用率不高，更常用的还是通过选择器的方式来选中元素，再指定样式，其中最常用的就是类选择器。
2. 类名样式：通过css class 指定的样式
   
   
   

2.4 操作节点

2.4.1 新增节点

1. 先创建出一个元素（createElement）
2. 把新元素加入到DMO树上（appendChild）
   
   

2.4.2 删除节点

removeChild:


以上是我们常用的DOM API，可以认识基础的操作，对于写简单后端项目来说足够用了。如果大家想精通前端，可以继续精学相关知识哦。