web Api基础(一)

web Api基础知识点

自我总结的web Api基础的知识点

01-- web Api 的概念

1. API是一些预先定义的方法,这些方法能够实现某些特定的功能 ；
2. 浏览器提供的一套操作浏览器功能和页面元素的API ( BOM 和 DOM ) ；
3. 任何开发语言都有自己API ；

02-- JS的组成

ECMAScript -javaScript的核心

定义了javaScript的语法规范

BOM - 浏览器对象模型

一套操作浏览器功能的API, 通过BOM 可以操作浏览器窗口 =>( 弹出框 / 浏览器跳转)

DOM - 文档对象模型

一套操作HTML 和 XML 的API
DOM 会把整个网页当成一个对象, 操作这个网页,只要操作这个document 对象即可

03-- API -应用程序编程接口

其实就是一大堆的方法, 我们可以把API看成是工具,做不同的事情需要不同的工具

例如下面的举例

做饭需要一套做饭的工具：锅碗瓢盆
打仗需要一套打仗的工具：刀枪剑戟
找对象需一套找对象的工具：钱权颜缘 +  车房钱权
DOM：用来操作页面元素的一套工具。
BOM：用来操作浏览器一些行为的一套工具。

事件三要素

事件: 理解为浏览器的感知系统, 触发–> 响应机制, javascript 是基于事件驱动的

事件源: 触发事件的元素
事件名称: 触发的事件名称
事件处理函数: 触发事件时调用的函数

注意: 事件函数不会立即执行, 而是当事件触发的时候才会执行( 浏览器会自动调用 )

阻止a 标签的默认跳转

 (1) return false 阻止页面跳转
 (2) void(0) 表示不作任何操作,防止链接跳转到其他页面
 (3) javaScript:void(0) 是最通用的方式

关于 console.log 和 console.dir 的区别

console.log 打印元素的时候,是以标签的形式进行展示的
console.log 打印元素的时候, 是以对象的形式进行展示的

在DOM 中,页面标签的属性和DOM对象的属性是一一对应的, 因此我们可以通过修改DOM对象的属性来修改标签的属性

例如: img 对象和 img标签 一一对应的
以后想要操作img标签,只需要操作img对象即可

标签属性

普通标签属性

通过DOM 设置普通标签属性,两边都会变化. 如: src title

表单属性

比较特殊的三个表单属性(disabled checked selected )

disabled (是否禁用) => 为 true 禁用 false 不禁用
checked (是否选中) => 为 true 选中 false 不选中

假设成立法

第一步: 假设都选中

第二步: 找打脸的

第三步: 进行判断(是否找到打脸的)

attribute 方法

用于设置 标签的属性

// 设置标签的属性
box.setAttribute( name, value)
// 获取标签的属性
box.getAttribute(name)
// 移除标签的属性
box.removeAttribute(name)

伪数组

伪数组不能直接使用数组的方法

可以遍历或者通过下标来取

伪数组不能直接注册事件

需要遍历后拿到标签再注册事件

获取元素的方法[ 重要 ]

(1) 根据id 获取 (如果id不存在, 返回null)
(2) 根据标签名获取 
(3) 根据类名获取 (这个方法 ie678不支持)
(4) 根据name 获取
(5) 根据css 选择器获取(重点)