在拉钩学习的笔记（七）Web APIs网页应用编程

1、API的概念
    API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某原件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
    任何开发语言都有自己的API
    API的特征输入和输出（1/0）
        例如：var max = Math.max(2, 3, 4);
    API的使用方法（console.log("abc");
    Web API的概念：浏览器提供了一套操作浏览器功能和页面元素的API（BOM和DOM）；此处的Web API特指浏览器提供的API（一组方法），web API在后面的课程中有其他含义。
    学习目标：掌握常见浏览器提供的API的调用方式
    学习辅助MDN：https://developer.mozilla.org/zh-CN/docs/Web/API
    ECMAScript-JavaScript的核心：定义了JavaScript的语法规范；JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
    BOM-浏览器对象模型
        browser object model，一套操作浏览器功能的API，通过BOM可以操作浏览器窗口，比如，弹出框、控制浏览器跳转，获取分辨率等。
    DOM-文档对象模型
        document object model，一套操作页面元素的API；DOM可以把HTML看作是文档树，通过DOM提供的API可以对树上的节点进行操作。
2、DOM的概念
    文档对象模型（Document Object Model，简称DOM），是W３C组织推荐的处理可拓展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口（API），它可以动态地访问程序和脚本，更新其内容、结构和ｗｗｗ文档的风格（目前，HTML和XML文档是通过说明部分定义的）。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。
    DOM树：DOM又称文档树模型；文档：一个网页可以被成为文档；节点：网页中所以的内容都是节点（标签、属性、文本、注释等）；元素：网页中的标签；属性：标签的属性。
    DOM经常进行的操作：获取元素；对元素进行操作（设置其属性或调用方法）；动态创建元素；事件（什么时机做相应的操作）
3、根据id获取元素
    调用document对象的getElementById方法。
    参数：字符串类型的id属性值
    返回值：对应id名的元素对象。console.dir();打印具体的对象
    注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用；代码执行顺序，如果js在html结构之前，会导致结构未加载，不能获取对应id的元素
4、根据标签名获取元素
    方法：调用document对象的getElementsByTagName方法
    参数：字符串类型的标签名
    返回值：同名的元素对象组成的数组
    注意：操作数据时要按照操作数组的方法进行；getElementsByTagName方法内部获取的元素是动态增加的
5、元素对象内部获取标签元素
    获取的元素对象内部，本身也可以调用根据标签获取元素方法，例如div元素对象也可以调用getElementsByTagName方法。
    目的：缩小选择元素的范围，类似css中的后代选择器
6、根据name获取元素
    方法：调用document对象的getElementByName方法，
    参数：字符串类型的name属性值
    返回值：name属性值相同的元素对象组成的数组
    不建议使用：在IE和Opera中有兼容问题，会多选中id属性值相同的元素
7、根据类名获取元素
    方法：调用document对象的getElementByClassName方法
    参数：字符串类型的class属性值
    返回值：class属性值相同的元素对象组成的数组
    浏览器兼容问题：不支持IE8及以下的浏览器
8、根据选择器获取元素
    方法1：调用document对象的querySelector方法，通过css中的选择器去选取第一个符合条件的标签元素
    方法2：调用document对象的querySelectorAll方法，通过css中的选择器去选取所有符合条件的标签元素
    参数：字符串类型的css中的选择器
    浏览器兼容问题：不支持IE8一下的浏览器
9、事件
    事件：在什么时候做什么事
    执行机制：触发——响应机制
    绑定事件（注册事件）三要素：
        1、事件源：给谁绑定事件
        2、事件类型：绑定什么类型的事件click单击
        3、事件函数：事件发生后执行什么内容，写在函数内部
    常用事件监听方法：1绑定HTML元素属性；2绑定DOM对象属性
    事件监听：JavaScript解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只要触发对应的绑定事件，会立即执行事件函数
    常用的鼠标事件类型
        onclick             鼠标左键单击触发
        ondblclick          鼠标左键双击触发
        onmousedown         鼠标按键按下触发
        onmouseup           鼠标按键放开时触发
        onmousemove         鼠标在元素上移动触发
        onmouseover         鼠标移动到元素上触发
        onmouseout          鼠标移出元素边界触发
        onfocus             聚焦
        onblur              失焦
10、非表单元素的属性
    例如：href、title、id、src等
    调用方式：元素对象打点调用属性名，例如obj.href
    注意：部分的属性名跟关键字和保留字冲突，会更换写法，class——className；for——htmlFor；rowspan——rowSpan
    属性赋值：给元素属性赋值，等号右侧的赋值都是字符串格式
    不同函数内部 有一个this，指向事件源
        普通函数            window对象
        构造函数            指向的是生成的实例对象
        对象的方法          指向的是对象的本身
        事件函数            指向的是事件源
    取消a标签的默认跳转效果：return false;
    
案例：点击按钮切换图片；点击按钮切换隐藏div；美女画廊（1-3）

13、自定义属性操作
11、获取标签内部内容的属性
    获取标签内部内容的属性有两个：innerHTML和innerText；
    innerHTML属性，在获取标签内容时，如果包含标签，获取的内容会包含标签，获取的内容包含空白换行等。
    innerText属性，在获取标签内容时，如果包含标签，获取的内容会过滤标签，获取的内容会去掉换行和缩进等空白
    更改标签内容：还可以通过两个属性给双标签内部去更改内容
        innerHTML设置属性值，有标签的字符串，会按照HTML语法的标签加载   在设置内部有子标签结构时使用
        innerText设置属性值，有标签的字符串，会按照普通的字符加载       在设置纯字符从时使用
12、表单元素属性
    value 用于大部分表单元素的内容获取（option除外）
    type 可以获取input标签的类型（输入框或复选框）
    disabled 禁用属性
    checked 复选框选中属性
    selected 下拉菜单选中属性
    注意：在DOM中元素对象的属性值只有一个时，会被转成布尔值显示；例如：txt.disabled = true;
    getAttribute(name) 获取标签行内属性
    setAttribute(name, value) 设置标签行内属性
    removeAttribute(name) 移出标签行内属性
    与element.属性的区别：上述三个方法用于获取任意的行内属性，包括自定义的属性

案例：检测用户名和密码；随机下拉菜单；搜索文本框；反选全选（4-7）

14、style样式属性操作
    使用style属性方法设置的样式显示在标签内
    element.style属性的值，是所有行内样式组成的一个样式对象
    样式对象可以继续点语法调用或更改css的行内样式属性，例如width、height等属性
    注意：类似background-color这种复合属性的单一写法，是由多个单词组成的，要修改为驼峰命名方式书写backgroundColor；通过样式属性设置宽高、位置的属性类型是字符串，需要加上px等单位
    className类名属性操作：修改元素的className属性，相当于直接修改标签的类名；如需修改多条css样式，可以提前将修改后的样式设置到一个类选择器中，后续通过修改类名的方式，批量修改css样式

案例：开关灯；图片切换二维码案例；当前输入的文本框高亮；点击按钮改变div大小和位置；列表隔行变色，高亮显示；tab选项卡切换（8-12）
    spr.replace("原来的内容","新内容"); ==> 字符串在不改变其他内容的情况下，用新内容替换原来的内容

15、节点属性
    nodeType 节点的类型，属性值为数字，表示不同的节点类型，共12种，只读  1 元素节点，2 属性节点，3 文本节点
    nodeName 节点的名称（标签名称）,只读
    nodeValue 节点值，返回或设置当前节点的值，元素节点的nodeValue始终时null
16、父节点常用属性
    childNodes  只读属性，获取一个节点所有子节点的实时集合，集合是动态变化的 (包括换行)
    children    只读属性，返回一个节点所有的子元素节点的集合，是一个动态更新的HTML元素 集合
    firstChild  只读属性，返回该节点的第一个子节点，如果该节点没有子节点则返回null
    lastChild   只读属性，返回该节点的最后一个子节点，如果该节点没有子节点则返回null
    parentNode  返回一个当前节点的父节点，如果没有这样的节点，比如说像这个节点是树结构的顶端或者没有插入一颗树中，这个属性返回null
    parentElement返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个DOM元素，则返回null
17、兄弟节点常用属性
    nextSibling         只读属性，返回与该节点同级的下一个节点，如果没有返回null
    previousSibling     只读属性，返回与该节点同级的上一个节点，如果没有返回null
    nextElementSibling  只读属性，返回与该节点同级的下一个元素节点，如果没有返回null
    preiousElementSibling只读属性，返回与该节点同级的上一个元素节点，如果没有返回null
    注意：nextElementSibling和previousElementSibling有兼容问题，IE9后才支持
18、创建节点的方法
    document.createElement("div")           创建元素节点
    document.createAttribute("id")          创建属性节点
    document.createTextNode("hello")        创建文本节点
    一般将创建的新节点存在变量中，方便使用
19、节点常用操作方法
    parentNode.appendChild(child)：将一个节点添加到指定父节点的子节点列表末尾
    parentNode.replaceChild(newChild, oldChild)：用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点
    parentNode.insertBefor(newNode, referenceNode)：在参考节点之前插入一个拥有指定父节点的子节点，referenceNode必须设置,如果referenceElement为null则newNode将被插入到子节点的末尾
    parentNode.removeChild(child)：移除当前节点的一个子节点。这个节点必须存在于当前节点中。
    Node.cloneNode()：克隆一个节点，并且可以选择是否克隆这个节点下的所有内容。参数为Boolean布尔值，表示是否采用深度克隆，如果为true，则该节点的所有后代节点都会被克隆，如果为false，则只克隆该节点本身，默认值为true，节点下的内容会被克隆
    注意：克隆时，标签上的属性和属性值也会被复制，写在标签行内的绑定事件可以被复制，但是通过JavaScript动态绑定的事件不会被复制。
    Node.hasChildNodes()：没有参数，返回一个Boolean布尔值，来表示该元素是否包含有子节点
    Node.contains(child)：返回一个Boolean布尔值，来表示传入的节点是否为该节点的后代节点
    判断元素内部是否有子节点：
        node.firstChild !== null;
        node.childNodes.length > 0;
        node.hasChildNodes();

案例：动态创建列表；动态创建表格；选择水果（13-15）
    取消a跳转：a.href = "javascript:void(0)";
20、注册事件的其他方法1
    element.addElementListener()方法
        参数：第一个参数 事件类型的字符串（直接书写“click”，不需要加on）；第二个参数 事件函数
        同一个元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数
        兼容问题，不支持IE9以下的浏览器
    element.attachEvent()方法
        参数：第一个参数 事件类型的字符串（需要加on）；第二个参数 事件函数
        同一个元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数
        兼容问题：只支持IE10及以下的浏览器
21、注册事件的兼容写法
    自定义一个注册事件函数
    参数：事件源，事件类型（不加on），事件函数
    IE9及以上的浏览器，使用addElementListener方法
    IE9以下的浏览器使用attachEvent方法
    判断浏览器时，不需要判断它的版本，可以检测浏览器能力
    浏览器能力检测：将某个方法的调用作为if语句的判断条件，如果浏览器认识该方法返回true，否则返回false
     function addEvent(ele, type, fn) {
        // IE9及以上的浏览器和其他浏览器，使用addEventListener方法
        // IE9以下的浏览器使用attachEvent方法
        if (ele.addElementListener) {
            els.addElementListener(type, fn);
        } else if (ele.attachEvent) {
            ele.attachEvent("on" + type, fn)
        }
     }
22、移除事件的其他方法
    element.removeEventListener();
        参数：第一个参数 事件类型的字符串（不加on）； 第二个参数 事件函数引用名
        注意：没有办法移除一个匿名函数，所以再注册事件时需要单独声明一个有函数名的事件函数
        兼容问题：不支持IE9以下的浏览器
    element.detachEvent()方法
        参数：第一个参数 事件类型的字符串；第二个参数 事件函数
        注意：没有办法移除一个匿名函数，所以再注册事件的时候需要单独声明一个有函数名的事件函数
        兼容问题：只支持IE10及以下的浏览器
23、移除事件的兼容方法
    自定义一个移除事件函数
    参数：事件源，事件类型（不加on），事件函数
    IE9及以上的浏览器，使用removeEventListener方法
    IE9及以下的浏览器，使用detachEvent方法
    建议：将自己封装的一些常用函数和方法，放到一个单独的.js文件中
    function removeEvent(ele, type, fn) {
        // 浏览器能力检测
        if (ele.removeEventListener) {
            ele.removeEventListener(type, fn);
        } else if {
            ele.detachEvent("on" + type, fn);
        }
    }
24、事件流的三个阶段
    第一个阶段：事件捕获
    第二个阶段：事件执行过程
    第三个阶段：事件冒泡
    addEventListener() 第三个参数为false时，事件冒泡
    addEventListener()第三个参数为true时，事件捕获
    onclick类型：只能进行事件冒泡过程，没有捕获阶段
    attachEvent()方法：只能进行事件冒泡过程，没有捕获阶段
25、事件委托
    利用事件冒泡，将子级的事件委托给父级加载
    同时，需要利用事件函数的一个e参数，内部存储的是事件对象。e.target表示实际点击的子级元素
26、事件对象
    只要触发事件，就会有一个对象，内部存储了与事件相关的数据
    e 在低版本浏览器中有兼容问题，低版本浏览器使用的是 windows.event
    事件对象常用的属性：
        e.eventPhase            查看事件触发时所处的阶段
        e.target                用于获取触发事件的元素
        e.srcElemetn            用于获取触发事件的元素，低版本浏览器也能使用
        e.currentTarget         用于获取绑定事件的事件源元素
        e.type                  获取事件类型
        e.clientX/e.clientY     所有浏览器都支持，鼠标距离浏览器窗口左上角的距离
        e.pageX/e.pageY         Ie8以前不支持，鼠标距离整个HTML页面左上顶点的距离
    e = e || windows.event  解决兼容问题 

案例：图片跟随鼠标移动

27、取消默认行为和阻止事件传播的方式
    e.preventDefault()              取消默认行为
    e.returnValue                   取消默认行为，低版本浏览器使用
    e.stopProgagation()             阻止冒泡，标准方式
    e.cancelBubble = true;          阻止冒泡，IE 低版本，标准中废弃
    其他事件类型：MDN web 事件参考：https://developer.mozilla.org/zh-CN/docs/Web/Events
28、DOM提供了一套与元素自身有关的位置和大小的属性
    偏移量属性
        offsetParent偏移参考父级，距离自己最近的有定位的父级，如果没有定位参考body（html）
        offsetLeft/offsetTop        偏移量      边框外的距离参考父级边框以内
        offsetWidth/offsetHeight    偏移大小    加边框的自身大小
    客户端大小
        client系列没有参考父级元素
        clientLeft/clientTop        边框区域尺寸，不常用
        clientWidth/clientHeight    边框内部大小        边框以内的大小
    滚动偏移
        scrollLeft/scrollTop        盒子内部滚动出去的尺寸
        scrollWidth/scrollHeight    盒子内容的宽度和高度

案例：拖拽案例；弹出登录窗口(18-19)
 

BOM浏览器对象模型
1、BOM的概念
    BOM（Browser Object Model）是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象机构。BOM由多个对象组成，其中代表浏览器窗口window对象是BOM的顶层对象，其他对象都是该对象的子对象
    我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器、后退、前进、在浏览器中输入URL等
    window对象
        window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window
    注意：window下的两个特殊属性：window.name    window.top(只读，指向window)
2、BOM对话框
    alert()         警示框
    prompt()        提示框；两个参数：一个提示，一个输入框默认值；返回输入内容字符串
    confirm()         让用户进行确认或者取消选择的对话框；返回值，根据按钮返回情况，点击确定返回true，点击取消返回false
3、加载事件
    onload事件：我们可以给window对象或<img>等元素添加onload加载事件，表示只有绑定事件的元素加载完毕后才能触发事件，才能执行函数
    其中window对象加载完毕：指的是所有HTNL结构加载完，并且外部引入资源（js、css、img、视频）也加载完毕
    应用：利用window.onload事件，可以将js代码提前到html结构之前
    注意：一个页面中只能有一个window.onload事件
4、延时器     异步语句
    延时器是window对象的一个方法，类似于定时炸弹
    语法：window.setTimeout(func, time);
    第一个参数：延时执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要加()。
    第二个参数：延时的时间，以毫秒计数，1000毫秒等于1秒
    功能：在指定的时间后，延迟执行一个函数
    清除延时器：
        window对象的一个方法
        语法：window.clearTimeout(timeout);
        参数：指定的延时器变量名引用
        功能：清除指定的延时器
        注意：清除的延时器需要存储到一个变量中，便于后边清除调用
5、定时器     异步语句
    定时器是window对象的一个方法，类似于定闹钟，每隔固定的时间响一次
    语法：window.setInterval(func, interval);
    第一个参数：每次执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要加()
    第二个参数：时间间隔，以毫秒计数，1000毫秒等于1秒
    功能：每隔一个指定的时间，周期性的执行一个函数
    第一次执行时，是在第一个间隔时间之后
    清除定时器：
        window对象的一个方法
        语法：window.clearInterval(timer);
        参数：指定的定时器变量引用名
        功能：清除指定的定时器
        注意：清除的定时器需要存储到一个变量中，便于后期清除调用
6、简单运动
    简单运动：是一种视觉暂留效果，只要元素变化过程时间够短，给人眼造成的效果就是一个运动的效果，人眼的视觉残留时间0.1-0.4秒之间
    制作方法：通过定时器实现每隔一个极短的时间（50-100毫秒左右），执行函数，函数内部让运动的属性值发生变化
    提高运动速度的方法：缩短时间间隔，增加了每秒移动的次数；加大步长，让每一次走的步长增长
7、清除定时器的问题
    问题1：将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户错误点击现象
        1.多次点击开始，会造成加速；2.多次点击开始，不能够再停止
        解决方法 设表先关：每次开启新定时器之前，都清除一次前面的定时器
    问题2：要求元素走到指定位置停止，例如让元素停止在500px的位置；如果步长设置的不合理，停止的位置可能不是正好在500px处
        解决方法：拉终停表：在定时器内部每次都要判断是否走到了终点，要不要停止定时器；如果走到或者超过了终点，强行拉到终点，并停止定时器
    问题3：在规定时间内让元素走到规定的结束位置，时间间隔可更改；例如让元素2秒中内，left属性从0走到500px
        解决方法：步标整除；总距离 = 步长 * 次数；时间间隔自定义，总时长固定；求出总次数 = 总时间 / 时间间隔；定义计数器变量，每执行一次定时器函数增加计数1，直到执行达到总次数，停止定时器
8、封装动画函数
    window.getComputedStyle()     获取计算后样式的方法（只读）

案例：简单无缝滚动；高级无缝滚动；点击切换轮播图；返回顶部
     获取页面卷动距离：document.documentElement.scrollTop || document.body.scrollTop
     window.onscroll 滚动事件

9、location对象
    location对象是window对象下的一个属性，使用的时候可以省略window对象
    location可以获取或者设置浏览器地址栏的URL   location.href = "";
    location对象的成员，使用chrome的控制台查看；
    查MDN：https://developer.mozilla.org/zh-CN/；
    成员：assign()  委派  与href属性一样，可以设置页面跳转的地址
        reload()    重新加载   键盘中的f5功能类似false效果，ctral+f5强制刷新类似true；
                    参数：true 强制从服务器中获取页面；false 如果浏览器有缓存网页的话，会直接从缓存中获取页面
        replace()   替换  替换掉地址栏中当前的网址，但是不记录历史
        hash/host/hostname/search/href...
10、URL
    统一资源定位符（Uniform Resource Location，URL）
    URL的组成：scheme://host:port/path?query#fragment
    例如：http://www.lagou.com:80/a/b/index.html?name=zs&age=18#bottom
    scheme:通信协议，常用的http，ftp，maito等
    host：主机，服务器（计算机）域名系统（DNS）主机名或IP地址
    port：端口号，整数，可选，省略时使用方案的默认端口，如http的默认端口为80
    path：路径，由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
    query：查询，可选，用于给动态网页传递参数，可有多个参数，用‘&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs
    fragment：信息片断，字符串，锚点
11、history对象
    history对象是window对象下的一个属性，使用的时候可以省略window对象
    history对象可以与浏览器历史记录进行交互，浏览器历史记录是对用户所访问的页面按时间顺序进行的记录和保存
    back()  回退历史记录访问
    forward()   前进历史记录访问
    go()    指定跳转到某个界面；参数为数字：1前进一个；-1回退1次