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()-------清除所有数据