Web APIs总结

Web API：浏览器提供的一套操作浏览器功能和页面元素的API，一般由输入和输出（函数的传参和返回值）

一、DOM

1.概念

文档对象模型，处理可扩展标记语言，html、xml的标准编程接口,可改变网页的内容、结构、样式。

2.DOM树

文档：一个页面就是一个文档
元素：页面中所有标签都是元素 element
节点：页面中所有内容都是节点（标签、属性、文本、注释）

3.获取元素

①id获取：document.getElementById(‘time’);
②标签名：document.getElementsByTagName(‘li’); 返回的是元素对象的集合，以伪数组的形式存储，操作里面的元素需要遍历，元素对象是动态的
③H5新方法：document.getElementsByClassName(‘box’);
document.querySelector(’.box’);
document.querySelectorAll(’#nav’);
④body：document.body
⑤html：document.documentElement

4.事件概述

①时间三要素
事件源、事件类型、事件处理程序
②执行事件步骤
获取事件源、注册事件（绑定事件）、添加事件处理程序（函数赋值）

5.鼠标事件

6.操作元素

操作元素	具体
元素内容	element.innerText element.innerHTML
元素属性	src href title alt
表单元素属性	type value checked selected disabled
样式属性	element.style element.className

7.自定义属性

保存并使用数据，有些数据可保存到页面中，不用保存在数据库中
H5规定自定义属性data-开头作为属性名并且赋值 或者 JS设置

①获取属性值
element.属性 ——获取内置属性
element.getAttribute(‘属性’) ——获取自定义属性
②设置属性值
element.属性=‘值’ ——设置内置属性
element.setAttribute(‘属性’, ‘值’) ——设置自定义属性
③移除属性
element.removeAttribute(‘属性’)

8.节点

节点类型（node Type）、节点名称（nodeName）、节点值（nodeValue）

节点层级：父子兄

操作：
①创建：document.createElement(‘li’);
②添加：ul.appendChild(li); ul.insertBefore(lili, ul.children[0]);
③删除： ul.removeChild(ul.children[0]);
④赋值（克隆）： ul.appendChild(lili);

9.事件操作

①注册

btns[0].onclick = function() {}
btns[1].addEventListener(‘click’, function() {alert(22);})

②删除

divs[0].onclick = null
divs[1].removeEventListener(‘click’, fn)

③DOM事件流

捕获阶段、当前目标阶段、冒泡阶段

④事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放在这个对象里面 e

⑤事件委托

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，之后利用冒泡原理影响每个子节点

⑥鼠标事件对象

⑦键盘事件

注意：

• 使用addEvebtListener不需要加on
• onkeypress和前面2个的区别是，不识别功能键，如左右箭头，shift键
• 三个事件的执行顺序：keydown-keypress-keyup

⑧键盘事件对象

键盘事件对象属性：keyCode
用于返回该键的ASCII值

二、BOM

1.概念

BOM：浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window(顶级对象)。
DOM和BOM的区别：

2.window对象

①窗口加载事件

• load:等页面内容全部加载完毕，包含页面dom元素、图片、flash、css等：
  window.οnlοad=function(){ }
  window.addEventListener(“load”,function(){ })
• DOMContentloaded：DOM加载完毕，不包含图片、flash、css等 ：
  document.addEventListener(“DOMContentloaded”,function(){ })

②调整窗口大小事件

• window.onreesize=function(){ }
• window.addEventListener(“resize”,function(){})

3.定时器

①只调用一次

window.setTimeout(调用函数，[延迟的毫秒数])
停止：window.clearTimeout(timeout)

②重复调用

window.setInterval(回调函数，[间隔的毫秒数])
停止：clearInterval(intervalID)

4.location对象

window对象给我们提供的一个location属性用于获取或设置窗体的url，并且可以用于解析url，这个属性返回的是location对象
URL：统一资源定位符

location对象属性：

location对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机（域名）
location.port	返回端口号，若未写，返回空字符串
location.pathname	返回路径
location.search	返回参数
location.search	返回参数
location.hash	返回片段

location对象方法：

location对象方法	返回值
location.assign()	可重定向页面
location.replace()	替换当前页面，不记录历史，不可后退
location.reload()	重新加载页面，相当于刷新按钮

5.navigator对象

包含有关浏览器版本的信息
属性userAgent:返回由客户机发送服务器的user-agent头部的值

6.history对象

history对象方法	作用
back()	后退
forward()	前进
go(参数)	前进后退功能

7.offset元素偏移量

• 获得元素距离带有定位父元素的位置
• 获得自身元素的大小（宽度高度）

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素，父级都没有定位返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度、返回值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度、返回值不带单位

8.client元素可视区

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度、不含边框、返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度、不含边框、返回数值不带单位

9.scroll元素滚动

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身自己的宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身自己的高度，不含边框，返回数值不带单位