web API、DOM、事件

API：应用程序编程接口，应用程序或开发人员可以调用的第三方应用程序或硬件提供的函数，不需要关注具体资源的源代码；

web API:面向网页开发，需要调用的api;

web API分类：

一种时浏览器厂家提供的API BOM；

一种时按ES的设计，由浏览器厂家提供的操作页面元素的API  DOM；

 

BOM常用的API

Alert()   没有返回值

Prompt() 返回值为字符串

Confirm() 返回值为布尔型

Onload 这是个属性，取值是函数，作用页面全部加载完执行函数

Onunload 这是个属性，取值是函数，作用完全退出页面执行函数

Onbeforeunload 这是个属性，取值是函数，作用退出页面执行函数

定时器：

1、setimeout() window.setTimeout（函数，毫秒时间）；在指定的时间之后，执行一次函数

     cleraTimeout（存储任务变量名)  清除任务

2、setInterval() window.setInterval(函数，毫秒时间);按照给定的时间，周期性的调用函数；

    cleraInterval(存储任务变量名） 清除任务

location

1、assgin(URL)  跳转到URL指定的页面

2、reload(布尔值默认false)  重新加载当前页面，false从浏览器缓存加载，true从服务器重新请求并加载

3、replace(URL)  替换当前URL，并更新历史记录

4、hash  获取URL锚点信息

5、 host  主机

6、hostname 主机名

7、search  查询字符串信息

8、href  获取整个URL(统一资源定位符）

存储的是当前页面的URL(统一资源定位符）

URL格式：scheme://host:port/path?query#fragment

Scheme:协议

Host：主机IP

Port:端口，提供网页服务的端口默认8080

Path:要访问文件的路径

Query：携带信息

Fragment:信息片段

History

back() 后退一步

Forward 前进一步

Go(正负整数） 按指定的数值前进或后退

Navigator

userAgent 浏览器信息

Platform 操作系统信息

 

DOM概念

是W3C组织推荐可扩展标记语言编程接口

文档：就是单个网页文件

节点：就是网页中所有的内容(标签，内容，注释，属性）

元素：标签

属性：标签行内属性，样式属性

DOM操作：增，删，改，查

Window.document

查：

id  document.getElementById("id取值")

标签  document.getElementsByTagName("标签名”），返回值是个对象

Name  document.getElementsByName(“name取值")

Class  document.getElementByClassName("class取值")

选择器  document.querySelector("选择名称”），找到符合选择器名称的第一个元素

             document.querySelectorAll("选择名称")，找到符合选择器所有元素，返回值是个对象

       操作属性：非表单属性：herf ,scr,id,name,classname

       表单属性：value type checked disabled selecred

       自定义操作属性：setAttribute("属性名"，"属性值");---添加属性

                                    removeAttribute("属性名");---移出属性

                                    getAttribute("属性名")；---获取属性

       样式操作：元素对象style样式属性

       类名操作：元素对象className=”类名";

       增：元素(标签）节点

       创建元素三种方法：

       1.document.write("html");

       2.元素对象.innerHTML="html"

       3.document.createElement("标签名"); 创建元素对象，返回值

                        元素对象appendChild(子元素对象）；添加

                        给body添加document.body.appendChild(子元素对象）;

      注：建议使用第三章方法，性能最好

     元素对象.inserBefore(要插入的元素，已有元素);  ---在某元素之前

     元素对象.removeChild(元素对象)----移出元素

     元素对象.replaceChild(新元素对象，已有元素）---替换元素

节点层级操作

       当前元素.parentNode---当前节点的父节点

        当前元素.childNodes--当前节点的子节点

        当前元素.children--当前节点的子元素

        当前元素.nextSibling--当前节点的后一个兄弟节点

        当前元素.nextElementSibling--当前节点的后一个元素

        当前元素.previousSibling--当前节点的前一个兄弟节点

        当前元素.previousElementSibling--当前节点的前一元素

        当前元素.firstChild--当前节点的第一个孩子节点

        当前元素.lastChild--当前节点的最后一个孩子节点

事件： 

事件三要素：1、事件源      2、事件类型     3、事件处理程序

事件的使用：

1、在标签内能过属性使用事件

2、通过js注册事件：

       事件源.事件类型=function(){}

       事件源.addEventlistener("事件类型",处理程序，布尔值);

                  事件类型：字符串，不加on

                   处理程序：匿名函数或调用函数

                   布尔值

         事件源.attachEvent();------//ie浏览器

//有兼容性的注册事件函数；

function addEvent(element,eventType,funName,broad){

      if(element.addEventListener){

            element.addEventListener(eventType,funName,broad);

     }else if(element.attachEvent){

             element.attachEvent("on"+eventType,funName);

      }else{

             element["on"+eventType]=funName;

       }

}

3.移出事件

                 事件源.事件类型=null;

                 事件源.removeEventListener("事件类型”);

                  事件源.detachEvent("事件类型“);

//有兼容性的移出事件函数

function removeEvent(element,eventType,funName,broad){

        if(element.removeEventListener){

              element.removeEventListener(eventType,funName,broad);

         }else if(element.detachEvent){

                     element.detachEvent("on"+eventType,funName);

         }else{

                  element["on"+eventType]=null;

           }

}

事件三个阶段：

     1、捕获

      2、当前

      3、冒泡

      注：event.eventPhase

阻止冒泡：event.stopPropagation(); //那一层需要阻止冒泡，写到哪一层，也就是要写到当前阶段。

 

注：不能阻止捕获+

event常见属性

event.type获取事件类型

event.clientX/clienY 获取当前事件源在浏览器窗口中的位置

event.screenX/screenY 获取当前事件源在页面中的位置

event.screenX/screenY 获取当前事件源在屏幕中的位置

event.target || event.srcElement 当前事件源

event.preventDefaulte() 取消默认行为，例如：提交按钮，超链接

事件委托：把子元素要注册的事件，委托给父元素注册，通过冒泡或捕获的方式，在子元素当前阶段，触发，获取当前阶段事件源的方式event.target || event.srcElement

常见事件：

鼠标事件：onclick , onmouseover , onmousedown , onmouseup , onmouseout , ondblcick

【注】：event.button = 0(左键）|1（滚轮）| 2（右键）

键盘事件：onkeydown , onkeyup , onkeypress 按下并松开 

【注】:event.keycode 获得按键ASCLL码 [0  48] ,[a  97],[A  65] , [cr(回车） 13], [左方向键  37],[上方向键 38] ,[右方向键 39] , [下方向键   40]

其他事件：

Onchange 内容改变         Onblur 失去焦点        Onfocus 失去焦点

偏移量：offset

Offsetleft 取正值从左向右偏移，取负值从右向左偏移

Offsettop 取正值从上向下偏移，取负值从下向上偏移

OffsetWidth 获取元素高度

OffsetHeight 获取元素的高度

OffsetParent 获取定位过的父元素，即有可能不是离的最近的父级元素

客户区大小：

clientLeft 离已定位的父级元素的左边距，包括自身左边框宽度。

clientTop 离已定位的父级元素的上边距，包括自身上边框宽度。

clientWidth 已定位的父级元素的子元素内边距和内容的宽度之和

clientHeight 已定位的父级元素的子元素内边距和内容的高度之和

流动偏移量：

scrollHeight:隐藏部分和可见部分之和。

scrollWidth:隐藏部分和可见部分之和。

scrollLeft:隐藏部分与可见部分左边的距离。

scrollTop:隐藏部分与可见部分上边的距离。

 

 

补充与扩展

Array.isArray()  判断一个对象是否为数组

Instdanceof    表达式  Instdanceof   类型  切记这个是运算符号  

伪数组  类型是对象，以对象方式保存数据，但以数组方式即加中括号访问属性

 

属性选择器

标签选择[属性=属性值]精确匹配

标签选择[属性^=属性值]开始位置部分匹配

标签选择[属性$=属性值]结束位置部分匹配

标签选择[属性*=属性值]任意位置部分匹配

 

快捷键：div>ol>li{第$$个}*任意整数。