关于 API

API

Application Programming Interface， 应用程序编程接口，是一些预先定于的函数，目的是提供应用程序与开发人员基于某硬件或软件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

API是给程序员提供的某种工具，以便能更轻松的实现想要完成的功能

WEB API

是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM），MDN API: https://developer.mozilla.org/zh-CN/docs/Web/API

DOM

DOM 简介

什么是 DOM

文档对象模型（Document Object Model，简称 DOM），是W3C组织推荐的处理可拓展标记语言（HTML 或者 XML）的标准编程接口

DOM树

W3C已经定义了一系列的DOM接口，通过这些 DOM 可以改变网页的结构和样式

文档：一个页面就是一个文档，DOM中使用 document 表示

元素：页面中的所有标签都是元素，DOM中使用 element 表示

节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用 node 表示

获取元素

通过 ID 获取

通过 getElementById() 方法可以获取带有id对象

通过标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合

通过 HTML5 新增的方法获取

document.getElementsByClassName('类名') //根据类名获得某些元素集合

document.querySelector("选择器") //返回的是第一个元素对象 选择器需要加符号

document.querySelectorAll() //返回指定选择器的所有元素对象集合

特殊元素获取

获得body元素：document.body

获得html元素：document.documentElement

事件基础

触发-响应机制

三要素

事件源：事件被触发的对象，比如按钮之类的

事件类型：如何触发 什么事件 比如鼠标点击 还是鼠标经过 还是键盘按下

事件处理程序：通过一个函数赋值的方式完成

执行事件的步骤：获取事件源--注册事件（绑定事件）--添加事件处理程序（采取函数赋值形式）

操作元素

改变元素内容

element.innerText //从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML //起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

常用元素的属性操作

innerText、innerHTML 改变元素内容

src、href

id、alt、title

表单元素设置

对于input盒子，需要通过value来进行修改，比如 input.value

想要某个表单被禁用，可以使用 btn.disabled = true; 或是 this.disabled = true，this 指向事件函数的调用者

案例分析

京东的密码可见可不见

样式属性操作

element.style 行内样式操作

element.className 类名样式操作

案例

淘宝小窗口关闭
循环精灵图

​ 首先精灵图图片排列有规律的

​ 核心思路：利用 for 循环，修改精灵图片的背景位置 background-position

​ 数学功底

​ 显示隐藏文本框内容

​ 注册时提示密码应该具有一定的复杂性

排他思想

​ 如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想

​ 所有元素全部清除样式

​ 给当前元素设置样式

案例

百度换肤
表格隔行变色

​ 鼠标经过 onmouseover，鼠标离开 onmouseout

​ 核心思路：鼠标经过 tr 行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色

​ thead里面的行并不需要变颜色

表单全选取消全选案例

​ 全选和取消去选按钮，让下面所有的复选框的checked属性跟随全选按钮即可，下面复选框需要全部选中，上面全选才能选中，设置一个变量，控制是选中了还是没有选中

自定义属性的操作

获取属性值

​ element.属性：获取元素自带的属性

​ element.getAttribute("属性")：主要获取我们自定义的属性

设置属性值

​ element.setAttribute("属性",“值”)，主要针对自定义属性，element.属性 = 值

移除属性

​ removeAttribute("属性")

案例 tab健切换

H5 自定义属性

是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中

设置h5自定义属性

​ H5 规定自定义属性 data- 开头做属性名并且赋值

获取 H5自定义属性

​ getAttribute("属性")

​ element.dataset.index

​ element.dataset["index"]

节点操作

为什么节点操作？

利用DOM提供的方法获取元素，但是繁琐，逻辑性不强

利用节点层级关系获取元素

节点概述

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性

节点层级

常见为父子兄层级关系

父级节点：parentNodes

子节点

​ childNodes：得到所有子节点

​ children：非标准，获取所有的子元素节点

​ firstChild

​ lastChild

​ firstElementChild

​ lastElementChild

兄弟节点

​ nextSibling

​ previousSibling

​ nextElementSibing

​ previousElementSibling

创建节点

document.createElement('tagName')，因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也成为动态创建元素节点

添加节点

node.appendChild(child)：后面追加元素

node.insertBefore(child,指定元素)：前面插入元素

案例

留言发布案例

删除节点

node.removeChild(child)：从 DOM 中删除一个子节点，返回删除的节点

复制节点

node.cloneNode()：参数为空为浅拷贝，只复制节点本身，不复制内容，true 则是复制标签&复制内容

案例

动态生成表格

​ 数据采用对象形式存储，所有的数据放到tbody中，循环创建行

三种动态创建元素区别

document.write()，直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘 element.innerHTML()

document.createElement()

DOM核心重点

创建

document.write，innerHTML，createElement

增

appendChild，insertBefore

删

removeChild

改

修改元素属性：src href title等

修改普通元素属性：innerHTML innerText

修改表单元素：value type disabled

修改元素样式：style className

查

DOM 提供的 API 方法： getElementById、getElemensByTagName

H5提供的新方法：querySelector querySelectorAll （提倡）

利用节点操作获取元素：父（parentNode）子（children） 兄（previousElementSibling、nextELementSibling）（提倡）

属性操作

setAttribute 设置dom的属性值，getAttribute 得到dom的属性值，removeAttribute 移除属性

事件操作

给事件注册元素，采取 事件源.事件类型 = 事件处理程序

鼠标事件

​ onclick：鼠标点击左键触发

​ onmouseover：鼠标经过触发

​ onmouseout：鼠标离开触发

​ onfocus：获取鼠标焦点触发

​ onblur：失去鼠标焦点触发

​ onmousemove：鼠标移动触发

​ onmouseup：鼠标弹起触发

​ onmousedown：鼠标按下触发