webAPI基础笔记

dom 树包含 文档、元素、节点 获取过来的DOM元素是一个对象（object）

创建：

document.write
innerHTML
createElement

增:

appendChild
insertBefore

删:

removeChild

改:

修改元素属性:src、href、title等
修改普通元素内容:innerHTML、innerText
修改表单元素:value、type、disabled等
修改元素样式:style、className

查:

主要获取查询dom元素--------⬇

H5提供的新方法:querySelector、querySelectorAll
利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)

属性操作:

setAttribute:设置dom的属性值
getAttribute:得到dom的属性值
reomveAttribute:移除属性
cloneNode(true)克隆节点，true为深克隆，不写或false浅克隆

事件操作(传统注册，特点：唯一性):

onclick 鼠标点击左键触发
onmouseover 鼠标经过触发(经过子盒子还会触发)
onmouseenter 鼠标经过触发(只会经过自身盒子触发，会不冒泡)
onmouseout 鼠标离开触发(经过子盒子还会触发)
onmouseleave 鼠标离开触发(只会经过自身盒子触发，会不冒泡)
onfocus 获取焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发

方法监听注册方式(特点:同一个元素同一个事件可以注册多个事件)

type:事件类型(不要加on)    listener:事件处理,会调用监听函数  useCapture:可选参数，布尔值
useCapture是true表示在事件 捕获阶段 调用事件处理程序
useCapture是false表示事件 冒泡阶段 调用事件处理程序
addEventListener(type,listener,useCapture)    ------------IE9之后支持
removeEventListener(type,listener)

eventNameWithOn:事件类型(需要加on)   callbak:事件处理,会调用监听函数
attachEvent(eventNameWithOn,callbak)    ------------IE9之前支持
detachEvent(eventNameWithOn,callbak)

常用鼠标事件( function(e) { })

返回触发事件的对象: e.target;
返回事件类型: e.type;
阻止默认事件(如:禁止链接跳转): e.preventDefault();
取消冒泡: e.stopPropagation();
禁止右键点击: 事件-contextmenu   e.preventDefault();
禁止鼠标选中: 事件-selectstart   e.preventDefault();

鼠标事件对象

返回鼠标相对于浏览器窗口可视化的X坐标：e.clientX
返回鼠标相对于浏览器窗口可视化的Y坐标：e.clientY
返回鼠标相对于文档页面的X坐标：e.pageX
返回鼠标相对于文档页面的Y坐标：e.pageY
返回鼠标相对于电脑屏幕的X坐标：e.screenX
返回鼠标相对于电脑屏幕的Y坐标：e.screenY

常用键盘事件

某个键盘按键被松开时触发:onkeyup
某个键盘按键被按下时触发:onkeydown
某个键盘按键被按下时触发(不识别功能键 如：ctrl shift等):onkeypress
返回该键的ASCLL值: e.keyCode

window对象的常见事件

文档加载完时触发：window.onload = function() { }   或者  window.addEventListener("load",function () { })
仅DOM加载完成时(不包含样式，图片等，仅ie9以上支持)：document.addEventListener("DOMContentLoaded",function() { })
调整窗口大小事件：window.onresize = function() { }  或者  window.addEventListener("resize",function () { })

定时器

到期后执行函数：window.setTimeout(调用函数，[延迟的毫秒数])
清除定时器：window.setTimeout(定时器名称)
重复调用函数：window.setInterval(调用函数，[间隔的毫秒数])
停止setInterval()定时器：window.clearInterval(intervalID)

location对象的属性

location.href----------获取或者设置整个URL
location.host----------返回主机(域名)
location.port----------返回端口号,如果未写返回空字符串
location.pathname----------返回路径
location.search----------返回参数
location.hash----------返回片段 #后面内容 常见于链接 锚点
----------------------------------------------------------------------
location.assign()----------与href一样(也成为重定向页面)
location.replace()----------替换当前页面,不记录历史,不能后退页面
location.reload()----------重新加载页面,相当于刷新或者f5,如果传参为true 强制刷新 ctrl+f5
navigator.userAgent.match----------判断用户时哪个终端打开页面实现跳转(电脑/手机)

history对象(一般用于OA办公系统)

history.back()----------可以后退功能
history.forward()----------前进功能
history.go()----------前进后退功能,参数如果是1前进1个页面,如果-1后退一个页面

循环方法

查询位置：（参数1、要查找的项  参数2、表示查找起点的位置索引）
indexOf-----从数组的起始位置开始查找,返回字符串中匹配子串的第一个字符的下标,没有返回 -1
lastIndexOf-----从数组的结束位置开始查找,返回字符串索引值
迭代方法：
every-----函数对每一项都返回true，则返回true
filter-----返回值为true的所有数组成员
forEach-----无返回值（遍历循环）
map-----返回每次函数调用的结果数组
some-----有任意一项返回true，则返回true
（累加）方法：
reduce-----数组中的每个值（从左到右）开始缩减，最终计算为一个值
reduceRight-----从数组的末尾向前将数组中的数组项做累加

数组方法

添加：
push（）-----在数组末尾添加数组
unshift（）（）-----在数组头部添加数组
删除：
pop（）（）-----删除并返回数值的最后一个元素
shift（）-----删除并返回数值的第一个元素
splice（index,howmany,item1）-----index:规定添加/删除项目的位置  howmany:要删除的项目数量  item1:向数组添加的新项目（改变原数组）
查询：
slice（n，m）-----从索引n开始，找到索引m处，把找到的内容作为新的数组返回，原有数组不变
修改：
Arr.concat(Arr2)-----合并数组Arr与Arr2
join（","）-----用指定分隔符分割数组并转换为字符串
toString（）-----转换为字符串并返回
toLoacleString（）-----转换为本地格式字符串并返回
排序：
reverse（）-----颠倒数组中的元素的顺序（1,2,3,4）->（4,3,2,1）
sort（）-----对字符串数组或数字数组进行排序
循环截取：
substr(start,[length])-----start:要抽取的子串的起始下标  length:从start开始的个数
substring(start,[end])-----start:开始位置下标   end:结束位置下标(不包括)
split(",")-----使用一个指定的分隔符把一个字符串分割存储到数组 
slice(start,[end])-----start:开始位置下标   end:结束位置下标(不包括)

元素偏移量offset系列(常用于获取元素位置)

element.offsetParent-----返回作为该元素带有定位的父级元素,如果父级都没有定位则返回body
element.offsetTop-----返回元素相对带有父元素上方的偏移
element.offsetLeft-----返回元素相对带有父元素左边框的偏移
element.offsetWidth-----返回自身包括padding、边框、内容区的宽度,返回数值不带单位
element.offsetHeight-----返回自身包括padding、边框、内容区的高度,返回数值不带单位

元素可视区client系列(常用于获取元素大小)

 element.clientTop-----返回元素上边框大小
element.clientLeft-----返回元素左边框大小
element.clientWidth-----返回自身包括padding、内容区的宽度，不含边框，返回值不带单位
element.clientHeight-----返回自身包括padding、内容区的高度，不含边框，返回值不带单位

元素滚动scroll系列(常用于获取滚动距离)

element.scrollTop-----返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft-----返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth-----返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight-----返回自身实际的高度，不含边框，返回数值不带单位
页面被卷去的头部兼容性解决方案：
function getScroll() {
	return {
		left: window.pageXoffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
		top: window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0
	}
}
使用时：getScroll().left

页面头部pageoffset系列(常用于获取页面滚动的距离)

window.pageXoffset-----返回页面被卷去的左侧距离，返回数值不带单位
window.pageYoffset-----返回页面被卷去的上侧距离，返回数值不带单位

移动端thouch触摸事件

touchstart-----点击触摸
touchmove-------触摸移动
thouchend--------触摸离开

移动端thouchEvent触屏事件

touches-------正在触摸屏幕的所有手指的一个列表
targetTouches------正在触摸前DOM元素上的手指的一个列表
changedThouches-----手指状态发生了改变的列表，从无到有，从有到无的变化

window.sessionStorage存储事件

1.生命周期：关闭游览器窗口
2.在同一个窗口(页面)下数据可以共享
3.以键值对的形式存储使用
sessionStorage.setItem(key,value)-------存储数据
sessionStorage.getItem(key)-------获取数据
sessionStorage.removeItem()-------删除数据
sessionStorage.clear()-------清除所有数据

window.localStorage存储事件

1.生命周期：永久生效，除非手动删除
2.可以多个窗口(页面)共享(同一浏览器可以共享)
3.以键值对的形式存储使用
localStorage.setItem(key,value)-------存储数据
localStorage.getItem(key)-------获取数据
localStorage.removeItem()-------删除数据
localStorage.clear()-------清除所有数据