目录
WebAPI
DOM:文档对象模型、操作页面上的元素
BOM:浏览器对象模型、操作浏览器的对象
BOM
window:顶级对象、全局对象
location、history、navigator、screen、document
location
地址栏对象:
属性:
href:获取或者设置地址栏地址
方法:
reload:刷新(从新加载当前url)
assign:加载指定的url
replace:替换url
history
历史记录对象:
属性:
length:访问过的页面历史记录的数量
方法:
go:跳转到指定的记录记录(参数是number)
back:返回历史记录的上一个
forward:前进历史记录的下一个
navigator
浏览器对象:
属性:userAgent 这个属性可以识别设备系统等等
screen
屏幕对象
属性:width、height
window
顶级对象:(全局对象)
方法:
alert、confirm、prompt
定时器:1. 等待多久调用一次
window.setInterval(函数, 时间)==>window.clearInterval(定时器标识)2. 多久调用一次这个函数,之后不再执行,利用递归可以实现1
window.setTimeout(函数, 时间)==>window.clearTimeout(定时器标识)
DOM
文档对象模型、操作页面元素
获取节点、添加时间、属性操作、节点操作
获取节点
第一组:
id:document.getElementById('id值');【获取的是某一个元素】
tagName:document.getElementsByTagName('标签名')【获取的是多个,伪数组】
第二组:
选择器获取元素:
document.querySelector('选择器');// 单个
document.querySelectorAll('选择器')// 多个
节点关系
父子关系:
父.children;(父.childNodes)
父.firstElementChild、父.lastElementChild
子.parentNode兄弟关系:
element.nextElementSibling、 // 下一个元素兄弟
element.previousElemetSibling // 前一个元素兄弟
节点属性
nodeType:节点类型,元素 ==> 1、文本 ==> 3
nodeName:节点名称,元素 ==> 大写的标签名、文本节点 ==> #text
nodeValue:节点值:元素==>null、文本:文本内容
添加事件
on:
添加事件:element.onclick = function () {}
移除事件:element.onclick = null;事件监听:
添加事件:element.addEventListener('事件类型', function () {}, 是否捕获);
移除事件:element.removeEventListener('事件类型', 事件处理程序名称( 函数名));
操作节点
元素属性:
获取元素属性:元素.属性(element.id)
设置元素属性:元素.属性 = 值;(element.id = 值);
特殊:class==>className、innerText、innerHTML样式属性:
设置样式属性:元素.style.属性 = 值;(element.style.width = '200px');
注意:设置用的不要去获取、只能获取style行内样式,但是一般情况写在css里面表单元素:
value属性:
获取内容:元素.value;(element.value)
设置内容:元素.value = xxx;(element.value = xxx);
checked属性:(单选多选)
获取:元素.checked;(布尔值)
设置:元素.checked = true/fasle;
disabled属性:
获取:元素.disabled;
设置:元素.disabled = 布尔值;
selected属性:(下拉菜单)
获取:元素.selected;
设置:元素.selected = 布尔值自定义属性:data-*
H5:元素.dataset.xxx
获取:元素.getAttribute(属性名);
设置:元素.setAttribute(属性名, 值);
移除:元素.removeAttribute(属性名);
节点方法
创建元素:
第一种:element.innerHTML = "<div>内容</div>"
第二种:document.createElement('标签名');追加元素:父.appendChild(子);
删除元素:父.removeChild(子);
插入元素:父.inserBefore(新,旧);新的节点插入到旧节点的前面
替换元素:父.replaceChild(新,旧)新的节点替换旧节点
克隆元素:element.cloneNode(布尔值);
事件
事件有很多、不同的触发机制
事件类型
鼠标事件:
click:点击事件、单击事件
dblclick:双击事件
mouseenter:鼠标经过(mouseover)
mouseleave:鼠标离开(mouseout)
mousemove:鼠标移动事件
mousedown:鼠标按下
mouseup:鼠标抬起
drapover:拖拽
drop:松开表单事件:
focus:获得焦点
blur:失去焦点
input:输入事件
change:改变事件
submit:提交事件键盘事件:
keydown:键盘按下
keyup:键盘松开
keypress:键盘输入按下加载事件:
load、scroll、resize、beforeunload、DOMContentload
事件流
事件触发时事件的三个阶段、捕获、目标、冒泡
冒泡:事件触发后,从目标元素开始、事件类型会依次往上冒泡、直到document为止
事件对象
事件触发后产生的对象:
事件源.addEventListener('click', function (e) {e})
鼠标位置:
e.clientX、e.clientY
e.pageX、e.pageY
e.offsetX、e.offsetY键盘信息:
e.keyCode:键码值
e.altKey: alt键事件对象属性:
e.target
事件对象方法:
e.stopPropagation()
e.preventDefault()
事件委托
把子孙元素的事件注册给上级元素、委托给上级元素
1、给子孙元素的上级元素注册事件
2、通过e.target获取最先触发的元素
3、通过e.NodeName查看是否是我们需要的元素
原理:核心原理就是因为事件冒泡、主要点是target
元素大小位置
offset系列:offsetWidth、offsetHeight、offsetLeft、offsetTop
client系列:clientWidth、clientHeight
scroll系列:scrollTop
getBoundingClientRect:获取元素位置大小
函数
函数的定义:
命名函数:function () {}匿名函数:
自调用函数:(function () {})()
表达式函数:let fn = function () {}函数的调用:
函数遇到()就执行函数();递归:
函数内部调用函数自己
function fn () { fn() }fn();
注意:递归要有出口点
时间对象
实例化:
new Date();
new Date('1999-9-9 6:6:6');
new Date(1999, 9, 9, 6, 6, 6);
new Date(12341232532);
方法:
getFullYear()获取年份
getMonth()获取月份
getDate()获取日期
getHours()获取小时
getMinutes()获取分钟
getSeconds()获取秒数
getMilliSeconds()获取毫秒数
getDay()获取星期
getTime()获取时间戳 Data.now()
以上把get改为set、就是设置
注意:getDay不可以set、
类名操作
class:
获取:元素.className
设置:元素.className = 值;
classList:
添加类:元素.classList.add(类名);
删除类:元素.classList.remove(类名);
切换类:元素.classList.toggle(类名);
查找类:元素.classList.contans(类名);
正则
匹配字符串
创建:
let reg = /内容/;测试:
reg.test(str)、reg.exec(str);
元字符:
边界符:^、$
字符集合:[a-z]
量词符:*,+,?,{n},{n,},{n,m}
预定义类:\d,\w,\s
所有字符:.除了\n
转义字符:\.
修饰符:igm