web Api

1.1-WebAPI概念介绍

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
任何开发语言都有自己的API
API的特征输入和输出(I/O)
API的使用方法(console.log())
WebAPI概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

1.2-JavaScript组成三个部分
1.ECMAScript - JavaScript的核心
定义了javascript的语法规范
JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了js语言的标准
2.DOM - 文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
3.BOM - 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

1.3-DOM
Docuemnt Object Model（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

02-获取页面元素

思考 ： css语言如何获取页面元素？
通过选择器
id选择器 : #id名
类选择器: .类名
标签选择器:标签名
子代选择器:ul>li
后代选择器:ul li
js语言如何获取元素页面元素？
也是通过选择器

语法示例:querySelector()
描述:document.querySelector(‘选择器’)根据选择器获取满足条件第一个元素
返回值:DOM对象,null

语法:querySelectorAll()
示例描述:document.querySelectorAll(‘选择器’)根据选择器获取满足条件所有元素
返回值:伪数组

注意点:1. 获取单个元素 ： document.querySelector(‘选择器’)
1.1 如果选择器不存在则获取null
1.2 如果选择器存在，只会获取满足条件的第一个 “dom对象”
2. 获取多个元素: document.querySelectorAll(‘选择器’)
2.1 如果选择器不存在则获取空数组 []
2.2 如果选择器存在，会获取满足所有条件的 “dom对象伪数组”
3.querySelector与querySelectorAll区别
3.1 querySelector获取的是dom对象，可以直接操作修改
3.2 querySelector获取的是伪数组，不可以直接操作修改。必须要通过下标取出里面的dom对象才可以修改。

03-操作元素属性

语法（普通元素） 示例 描述

元素.style.样式属性 box.style.width 获取元素css样式属性
className box.className 获取元素类名
innerText box.innerText 获取元素的文本
src img.src 获取元素(图片img)的路径
href a.href 获取元素（a标签）的超链接

语法（表单元素） 示例 描述
value input.value 获取表单元素(单标签)的文本
disabled input.disabled 是否禁用（布尔类型）
checked input.checked 是否选中(布尔类型),radio单选框 checkbox多选框
selected input.selected 是否选中(布尔类型),select下拉选择框

1.1-元素内容操作
作用完全不同（只是有些类似）
类似点：获取到的都是string类型字符串
innerText:获取元素文本
innerHTML:获取元素内容（文本+标签）

1.2-元素常用属性

语法 作用
元素.id 获取id
元素.className 获取类名
元素.innerText 获取文本
元素.href 获取链接（常用于a标签）
元素.src 获取路径(常用于img标签)
元素.style 获取css样式对象(获取的是一个对象类型，包含所有css熟悉)
元素.style.backgroundColor 获取css样式的颜色 （带-的css样式，需要使用驼峰命名来获取）

1.3-元素样式属性
1.3.1-通过 style 操作样式
1.语法： 元素.style.样式属性 = 值
注意点： 有-的样式属性需要转成驼峰命名（去掉-,后面第一个字母大写）
设置样式需要注意的地方
如果样式属性有 - ， 例如 border- font- padding-等，则需要转成驼峰命名
驼峰命名： 去掉-, -后面的第一个字母大写

1.3.2-通过className操作样式
2.className语法: 元素.className = ‘类名’
注意点： 会覆盖原本的类名
通过className设置类名来设置样式注意点
类名需要通过className来访问，而不是class，因为class是js中的关键字
如果元素原本有类名,则会被覆盖

1.3.3-通过classList操作样式
classList语法:
3.1 追加类： 元素.classList.add(‘类名’)
3.1 移除类： 元素.classList.remove(‘类名’)
3.1 切换类： 元素.classList.toggle(‘类名’)
切换意思： 如果有,则移除。 没有则追加。

1.4-表单元素常用属性

语法 作用
元素.value 获取文本
元素.disabled 获取禁用状态 （布尔类型）
元素.checked 获取选中状态（用于radio/checkbox）
元素.selected 获取选中状态(用于option)

1.在html中，表单元素有一类独有的属性，表示表单元素的两种状态 disabled selected checked
2.在js中，这一类属性属于布尔类型
3.在html中，写了就是true，没写就是false

04-事件介绍及注册事件
1.事件：js处理用户交互的一种机制
交互：什么元素在什么时刻做什么事
2.事件的三要素：组成事件的三要素
事件源：什么元素（div p）
事件类型：什么时刻（鼠标点击onclick 鼠标移入：onmouseover）
事件处理函数：做什么事（一段代码：函数）
3.注册事件:本质是给元素属性赋值
事件源.事件类型 = 事件处理函数
box.onclick = function(){}
4.事件工作原理
a.事件在注册的时候，不会执行（函数在声明的时候不会执行）
b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数
5.页面中 任何元素 都可以注册 很`多个事件(点击，移入等)

单击： onclick
双击: ondblclick
鼠标移入： onmouseover
鼠标移出： onmouseout
表单输入独有的事件，只要用户输入了就会触发:oninput

语法： 事件源.事件类型 = 事件处理函数
box.onclick = function(){}

5.事件原理
5.1 注册事件本质 是 ： 对象的属性(方法)赋值
5.2 注册事件的时候，事件处理函数不会执行 （函数在声明的时候不会执行）
5.3 当用户触发事件(点击)的时候，浏览器会自动去调用事件处理函数
点击box的时候，浏览器底层会执行一行代码： box.onclick();