WebApi第一天

一.WebAPI概念介绍

1.1-WebAPI概念介绍

1.API（Application Programming Interface,简单说就是应用程序编程接口)

2.WebAPI概念：浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)

1.2JavaScript组成三个部分

总的来说就是：

ECMAScript（定义了javascript的语法规范JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了js语言的标准）

• DOM - 文档对象模型（一套操作页面元素的APIDOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作）

• BOM - 浏览器对象模型（一套操作浏览器功能的API，通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等）

1.3，DOM（今天主要类容也就是dom）

HTML DOM 树

 

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素， 属性，CSS 样式，事件做出反应

DOM工作原理：硬盘代码读取到内存 ->  浏览器渲染引擎生成DOM树（document） ->  开始渲染页面

二.获取页面元素

1.1获取元素的方法有

1通过选择器：id选择器 : #id名 ​​​​​​​，类选择器: .类名 ，标签选择器:标签名 ，子代选择器:ul>li

后代选择器:ul li

js语言如何获取元素页面元素：document.querySelector('选择器') （获取满足条件的第一个元素）

document.querySelectorAll('选择器')（获取满足条件的所有元素）

重点：两者的区别

 querySelector获取的是dom对象，可以直接操作修改
   querySelectorAll获取的是伪数组，不可以直接操作修改。必须要通过下标取出里面的dom对象才可以修改。

querySelectorAll特点：

          （1）会获取满足选择器条件的所有元素，并且一定返回数组类型
            (2)如果选择器不存在，则返回空数组
            (3)如果选择器只能找到一个元素，也会返回数组

伪数组有数组三要素（下标，元素，长度），不能使用数组api

三.操作元素属性

1.1普通元素语法

1获取元素css样式属性：box.style.width

2获取元素类名 ​​​​​​​：box.className

3获取元素(图片img)的路径：img.src

1.2表单元素语法

1获取表单元素(单标签)的文本：input.value

2是否禁用布尔类型：input.disabled

3是否选中(布尔类型),radio单选框 checkbox多选框：input.checked

4是否选中(布尔类型),select下拉选择框：input.selected

1.3元素类容操作

 innerText :  操作元素文本（会把所有的内容都当成文本，无法解析标签）
 innerHTML :  操作元素内容（文本+标签）（可以解析字符串中的标签，）

1.4元素常用的属性

 1.5元素样式属性

元素样式的操作：语法：  元素.style.样式属性 = 值 
                注意点： 有-的样式属性需要转成驼峰命名（去掉-,后面第一个字母大写）

 追加类：  元素.classList.add('类名')
                 移除类：  元素.classList.remove('类名')
                 切换类：  元素.classList.toggle('类名')
                 切换意思： 如果有,则移除。 没有则追加。

四.事件介绍及注册事件（重点）

事件：js处理用户交互的一种机制（交互：什么元素在什么时刻做什么事 ）

事件的三要素：

• 事件源：什么元素（div p）

• 事件类型：什么时刻（鼠标点击onclick 鼠标移入：onmouseover）

• 事件处理函数：做什么事（一段代码：函数）

注册事件:本质是给元素属性赋值

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

事件工作原理

• a.事件在注册的时候，不会执行（函数在声明的时候不会执行）

• b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数

页面中 任何元素 都可以注册 很多个事件(点击，移入等)

                单击： onclick
                双击: ondblclick
                鼠标移入： onmouseover
                鼠标移出： onmouseout