Web API
概念
API(Applocation Programming Interface 应用程序编程接口) 是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节
任何开发语言都有自己的API
API 的特征输入和输出(I/O)
eg: var max = Math.max(2, 3, 4);API 的使用方法(console.log("abc"))
浏览器提供了一套操作浏览器功能和页面元素的API (BOM 和 DOM)
此处的Web API 特指浏览器提供的API(一组方法), Web API 在后面的课程中有其它含义
DOM
简介
- 文档对象模型(Document Object Model) ，是W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在储存器中
DOM 树
- DOM 又称为文档树模型
- 文档：一个网页可以称为文档
- 节点：网页中的所有内容都是节点
- 元素：网页中的标签
- 属性：标签的属性
DOM 经常进行的操作
- 获取元素
- 对元素进行操作
- 动态创建元素
- 事件（什么时机做相应的操作）
获取页面元素 - 根据 id 获取元素
- 方法：调用 document 对象的 getElementById 方法
- 参数：字符串类型 id 的属性值
- 注意1：由于 id 名具有唯一性，部分浏览器支持直接使用 id 名访问元素，但不是标准方式，不推荐使用
- 注意2：代码执行顺序，如果 js 在 html 结构之前，会导致结构未加载，不能获取对应 id 的元素
获取页面元素 - 根据标签名获取元素
- 方法：调用 document 对象的 getElementsByTagName 方法
- 参数：字符串类型的标签名
- 返回值：同名的元素对象组成的数组（HTMLCollection）
- 注意1：操作数据时需要按照操作数组的方法进行
- 注意2：getElementsByTagName 方法内部获取的元素时动态增加的
获取页面元素 - 根据 name 获取元素
- 方法：调用 document 对象的 getElementsByName 方法
- 参数：字符串类型的 name 属性值
- 返回值：name 属性值相同的元素对象组成的数组
- 不建议使用：在 IE 和 Opera 中有兼容问题，会多选中 id 属性值相同的元素
获取页面元素 - 根据 class 属性获取元素
- 方法：调用 document 对象的 getElementsByClassName 方法
- 参数：字符串类型的 class 属性
- 返回值：class 属性值相同的元素对象组成的数组
- 浏览器兼容问题：不支持 IE8 及以下的浏览器
获取页面元素 - 根据选择器获取元素
- 方法1：调用 document 对象的 querySelector 方法。通过 css 中的选择器去选取一个符合条件的标签元素。
- 方法2：调用 document 对象的 querySelectorAll 方法。通过 css 中的选择器去选取所有符合条件的标签元素。
- 参数：字符串类型的 css 中的选择器
-
浏览器兼容问题：不支持 IE8 以下的浏览器
image.png
事件
事件：在什么时候做什么事
执行机制：触发--响应机制
绑定事件(注册事件)三要素：
1 事件源：给谁绑定事件
2 事件类型：绑定什么类型的事件click单击
3 事件函数：事件发生后执行什么内容，写在函数内部方法1：绑定html元素属性
<input type="button" name="hello" id="aaa" onclick="alert('aaaa')" value="hello">
- 方法2：绑定DOM对象属性
var button1 = document.getElementById("aaa");
button1.onclick = function() {
alert('aaaaaaaaa')
}
事件监听：
JavaScript 解析器会给有绑定事件的元素添加一个监听，解析器会一直监听这个元素，只要触发对应的绑定事件，会立刻执行事件函数
常用鼠标事件类型.png
DOM元素属性操作
非表单元素的属性
- 例如：href、title、id、src等 注：id属性是只读的
- 调用方式：元素对象打点调用属性名，例如obj.href
- 注意：部分的属性名跟关键字和保留字冲突，会更换写法
class --》 className
rowspan --》 rowSpan - 属性赋值：给元素属性赋值，等号右侧的赋值都是字符串格式
事件函数中的 this 关键字
- 在事件函数内部，有一个 this ，指向事件源
不同函数内部 this 的指向
- 普通函数 - 》 window 对象
- 构造函数 - 》 生成的实例对象
- 对象的方法 - 》 对象本身
- 事件函数 - 》 事件源
获取标签内部内容的属性
- 获取标签内部内容的属性有两个：innerHTML 和 innerText
- innerHTML 属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取内容包括空白换行等
- innerText 属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的内容会去掉换行和缩紧等空白
更改标签内容
- innerHTML 设置属性值，有标签的字符串，会按照 HTML 语法中的标签加载
- innerText 设置属性值，有标签的字符串，会按照普通的字符加载
对比使用场景
- innerText：在设置纯字符串时使用
- innerHTML：在设置内部子标签结构时使用
表单元素的属性
- value 用于大部分表单元素的内容获取（option 除外）
- type 可以获取 input 标签的类型（输入框或复选框等）
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
- 注意：在 DOM 中元素对象的属性值只有一个时，会被转成布尔值显示
eg: txt.disabled = true;
自定义属性操作
- getAttribute(name) 获取标签行内属性
- setAttribute(name, value) 设置标签行内属性
- removeAttribute(name) 移除标签行内属性
- 与 element 属性的区别：上述三个方法用于获取任意的行内属性，包括自定义的属性
style 样式属性操作
- 使用 style 属性方式设置的样式显示在标签行内
- element. style 属性的值，是所有行内样式组合组成的一个样式对象
- 样式对象可以继续点语法调用或更改 css 的行内样式属性，例如 width、height 等属性
- 注意1：类似 background-color 这种复合属性的单一属性写法，是由多个单词组成的，要修改为驼峰命名法书写 backgroundColor
- 注意2：通过样式属性设置宽高、位置得属性类型是字符串，需要加上 px 等单位。
节点属性
- nodeType 节点的类型，属性值为数字，表示不同的节点类型，共 12 种，只读
1 元素节点
2 属性节点
3 文本节点 - nodeName 节点的名称（标签名称），只读
- nodeValue 节点值，返回或设置当前节点的值
元素节点的nodeValue 始终是null
父子节点常用属性
- childNodes 只读属性，获取一个节点所有子节点的实时的集合，集合是动态变化的
- children 只读属性，返回一个节点所有的子元素节点集合，是一个动态更新的 HTML 元素集合
- firstChild 只读属性，返回该节点的第一个子节点，如果该节点没有子节点则返回
null - lastChild 只读属性，返回该节点的最后一个子节点，如果该节点没有子节点则返回 null
- parentNode 返回一个当前节点的父节点，如果没有这样的节点，比如说像这个节点是树结构的顶端或者没有插入一颗树中，这个属性返回 null
- parentElement 返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 null
兄弟节点常用属性
- nextSibling 只读属性，返回与该节点同级的下一节点，如果没有返回null
- previousSibling 只读属性，返回与该节点同级的上一节点，如果没有返回null
- nextElementSibling 只读属性，返回与该节点同级的下一个元素节点，如果没有返回 null
- previousElementSibling 只读属性，返回与该节点同级的上一个元素节点，如果没有返回 null
- 注意：nextElementSibling 和 previousElementSibling 有兼容性问题，IE9以后才支持
创建新节点的方法
- document.createElement("div") 创建元素节点
- document.createAttribute("id") 创建属性节点
- document.createTextNode("hello") 创建文本节点
- 一般将创建的新节点存在变量中，方便使用
节点常用操作方法 1
- parentNode.appendChild(child)：将一个节点添加到指定父节点的子节点列表末尾。（增加或剪切）
- parentNode.replaceChild(newChild, oldChild)：用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点
- parentNode.insertBefore(newNode, referenceNode)：在参考节点之前插入一个拥有指定父节点的子节点，referenceNode 必须设置，如果 referenceElement 为 null 则 newNode 将被插入到子节点的末尾
- parentNode.removeChild(child)：移除当前节点的一个子节点。这个子节点必须存在于当前节点当中。
节点常用操作方法 2
- Node.cloneNode()：克隆一个节点，并且可以选择是否克隆这个节点下的所有内容。参数为Boolean 布尔值，表示是否采用深度克隆，如果为 true，则该节点的所有后代也都会被克隆，如果为false，则只克隆该节点本身，默认值为 true，节点下的内容会被克隆。
- 注意：克隆时，标签上的属性值也会被复制，写在标签行内的绑定事件可以被复制，但是通过 JavaScript 动态绑定的事件不会被复制。
节点常用操作方法 3
Node.hasChildNode()：没有参数，返回一个 Boolean 布尔值，来表示该元素是否包含有子节点。
Node.contains(child)：返回一个Boolean 布尔值，来表示传入的节点是否为该节点的后代节点。
有三种方法可以判断当前节点是否有子节点
node.firstChild !== null
node.childNodes.length > 0
node.hasChildNodes()
注册事件的其他方法1
- element.addEventListener() 方法
- 参数：
第一个参数：事件类型的字符串（直接书写“click”，不需要加 on）
第二个参数：事件函数 - 同一个元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数
- 兼容性问题：不支持 IE9 一下的浏览器
注册事件的其他方法2
- element.attachEvent() 方法。
- 参数：
第一个参数：事件类型的字符串（需要加 on）
第一个参数：事件函数 - 同一个元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数
- 兼容性问题：只支持 IE10 及以下的浏览器 (并且事件队列会顺序错乱)
注册事件的兼容写法
- 自定义一个注册事件函数
- 参数：事件源，事件类型（不加 on），事件函数
- IE9 及以上的浏览器，使用 addEventListener 方法
- IE9 以下的浏览器，使用 attachEvent 方法
- 判断浏览器时，不需要判断它的版本，可以检测浏览器能力
- 浏览器能力检测：将某个方法的调用作为 if 语句的判断条件，如果浏览器认识该方法返回 true，否则返回 false
<body>
<input type="button" value="点击" id="btn">
</body>
<script>
var btn = document.getElementById("btn");
//调用函数
addEvent(btn,"click",function(){
alert(1);
});
//DOM 2级 事件绑定方式
// 自己制作一个兼容所有浏览器的绑定事件的函数
// 参数：事件源，事件类型，事件函数
function addEvent(ele,type,fn) {
// IE9 及以下的浏览器和其它浏览器，使用 addEventListener 方法
// IE9 以下的浏览器，使用 attachEvent 方法
// 浏览器能力检测
if(ele.addEventListener) {
ele.addEventListener(type,fn);
} else if(ele.attachEvent) {
ele.attachEvent("on" + type,fn);
}
}
</script>
移除事件的其他方法
- element.removeEventListener() 方法
- 参数：
第一个参数：事件类型的字符串（直接书写“click”，不需要加 on）
第二个参数：事件函数引用名 - 注意：没有办法移除一个匿名函数，所以在注册事件时需要单独声明一个有函数名的事件函数
- 兼容性问题：不支持 IE9 以下的浏览器
移除事件的其他方法 2
- element.detachEvent() 方法
- 参数：
第一个参数：事件类型的字符串 （需要加 on）
第二个参数：事件函数 - 注意：没有办法移除一个匿名函数，所以在注册事件时需要单独声明一个有函数名的事件函数
兼容性问题：只支持 IE10 及以下的浏览器
移除事件的兼容写法
自定义一个移除事件函数
参数：事件源，事件类型（不加 on），事件函数
IE9 及以上的浏览器，使用 removeEventListener 方法
IE9 以上的浏览器，使用 detachEvent 方法
建议：将自己封装的一些常用函数和方法，放到一个单独的 js 文件中
DOM 事件6流.png
事件流的三个阶段
- 第一个阶段：事件捕获
- 第二个阶段：事件执行过程
- 第三个阶段：事件冒泡
- addEventListener() 第三个参数为 false 时，事件冒泡
- addEventListener() 第三个参数为 true 时，事件捕获
- onclick 类型：只能进行事件冒泡过程，没有捕获阶段
- attachEvent() 方法：只能进行事件冒泡过程，没有捕获阶段
事件委托
- 利用事件冒泡，将子级的事件委托给父级加载
- 同时，需要利用事件函数的一个 e 参数，内部存储的是事件对象
