Web API
Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
API 和 Web API 总结:
- API是为程序员提供的一个接口,帮助我们实现某种功能,不必纠结内部如何实现,会使用即可
- Web API主要针对于浏览器提供的接口,主要是对浏览器做交互效果
- Web API一般有输入和输出(函数的传参和返回值),Web API很多都是方法(函数)
DOM
文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式
文档:document
元素:element
节点:node
获取元素的方法:
- 根据ID获取(getElementById)
- 根据标签名获取(getElementsByTagName)(返回的是伪数组)
- 根据类名获取(getElementsByClassName)
- 根据选择器获取(querySelector)(返回指定选择器的第一个元素对象)
(querySelectorAll)(返回指定选择器的所有元素对象集合) - 获取特殊元素:
(1)body元素:document.body
(2)html元素:document.documentElement
操作元素
- 改变元素内容
(1)element.innerText:从起始位置到终止位置的内容,但它去除 html标签,同时空格和换行也会去掉
(2)element.innerHTML:起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行 - 常见元素属性
src、href、title、alt等 - 操作表单元素属性
type、value、disabled等 - 修改元素样式属性
(1)element.style:行内样式操作
(2)element.className:类名样式操作 - 自定义属性的操作
(1)获取属性
element.属性 : 获取内置属性(元素本身自带的属性)
element.getAttribute(‘属性’) : 获取自定义属性
(2)设置属性值
element.属性=‘值’
element.setAttributr(‘属性’,‘值’) :主要用于设置自定义属性
(3)移除属性 removeAttribute(属性)
(4)H5获取自定义属性的方法(dataset 是一个集合里面存放了所有以data开头的自定义属性)
<div data-index="1"></div>
console.log(div.dataset.index);//1
<div data-list-name="Aa"></div>
console.log(div.dataset.listName);//Aa 获取时采用驼峰命名法
节点操作
一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性。
元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3(文本节点包括文字、空格、换行等)
主要操作 元素节点
(1)父节点
node.parentNode 返回的是最近的一个父节点
(2)子节点
①parentNode.childNodes 得到所有的子节点 包含 元素节点、文本节点等等
可以配合nodeType获取元素节点 一般不建议使用childNodes
②children 获取所有的子元素节点 实际开发常用的
③firstChild 获取第一个子节点,不管是文本节点还是元素节点
lastChild 获取最后一个子节点,不管是文本节点还是元素节点
④firstElementChild 返回第一个子元素节点
lastElementChild 返回最后一个子元素节点
(3)兄弟节点
①nextSibling 下一个兄弟节点,包含元素节点或者文本节点等等
previousSibling
②nextElementSibling 得到下一个兄弟元素节点
previousElementSibling
(4)创建节点
<ul></ul>
<script>
//1.创建节点元素节点
var li=document.createElement('li');
//2.添加节点 node.appendChild(child) node 父级 child 子级 后面追加元素
var ul=document.querySelector('ul');
ul.appendChild(li);
//3.添加节点 node.insertBefore 在参考节点之前插入
var li2=document.createElement('li');
ul.insertBefore(li2,ul.children[0]);
</script>
(5)删除节点
node.removeChild(child) 删除一个节点,返回被删除的节点
(6)复制节点(克隆节点)
node.cloneNode() 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
node.cloneNode(true) 括号为true 深拷贝 复制标签复制里面的内容
(7)三种动态创建元素区别
①document.write():是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
②document.innerHTML:是将内容写入某个DOM节点,不会导致页面全部重绘(创建多个元素时采取数组拼接的方式)
③document.createElement():创建多个元素效率稍低一点,但结构更加清晰
事件高级
- 注册事件
给元素添加事件,称为注册事件或者绑定事件
注册事件有两种方式:传统方式和方法监听注册方式
(1)传统注册方式:使用on开头的事件onclick
同一元素同一事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
(2)方法监听注册方式:addEventListener()
w3c标准推荐方法
同一元素同一事件可以添加多个侦听器
- 删除事件
(1)传统注册方法:eventTarget.οnclick=null
(2)方法监听注册方式:eventTarget.removeEventListener()
- DOM事件流
事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播的过程即DOM事件流
DOM事件流分为3个阶段:
①捕获阶段(从上往下)
②当前目标阶段
③冒泡阶段(从下往上)
- 事件对象
event就是一个事件对象,写到我们侦听函数的小括号中,当形参来看
事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
事件对象是我们事件的一系列相关数据的集合
事件对象可以自己命名,比如event、e等等
事件对象也有兼容性问题,在ie678通过window.event
常见事件对象的属性和方法
e.target | 返回的是触发事件的对象(元素) 标准 |
e.srcElement | 返回的是触发事件的对象(元素) 非标准 ie6-8使用 |
e.type | 返回事件的类型 |
e.cancelBubble | 该属性阻止冒泡 非标准 ie6-8使用 |
e.returnValue | 该属性阻止默认事件(默认行为) 非标准 ie6-8使用 |
e.preventDefault() | 该方法阻止默认事件(默认行为) 标准 |
e.stopPropagation() | 阻止冒泡 标准 |
- 事件委托
事件委托也称事件代理,在JQuery中称为事件委派
事件委托原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点
作用:只操作一次DOM,提高了程序的性能
- 常用的鼠标事件
<script>
//1.contextmenu 禁用右键菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault();
})
//2.selectstart 禁止选中文字
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
</script>
BOM
BOM即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分
window对象是浏览器的顶级对象,它具有双重角色:
①它是js访问浏览器窗口的一个接口
②它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法
- window 对象的常见事件
1.1. 窗口加载事件 window.onload | DOMContentLoaded
load 等页面内容全部加载完毕,包括页面dom元素 图片 flash css等等
DOMContentLoaded 是DOM加载完毕,不包含图片 flash css等就可以执行
1.2. 调整窗口大小事件 window.onresize
1.3. 定时器
setTimeout(调用函数,延时时间) 设置定时器,延时时间单位是毫秒
clearTimeout(定时器名字) 停止定时器
setInterval(调用函数,间隔时间) 可以重复调用一个函数,每隔这个时间就调用一次回调函数
clearInterval(定时器名字) 停止定时器 - JS执行机制
2.1. 同步任务:在主线程上执行,形成一个执行栈
2.2. 异步任务:JS的异步是通过回调函数实现的,被放在任务队列中
2.3. 先执行执行栈中的同步任务,异步任务放在任务队列中,把同步任务都执行完再执行异步任务
2.4. 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环 - location 对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL
URL 统一资源定位符是互联网上标准资源的地址
location.href | 获取或者设置整个URL |
location.host | 返回主机(域名) |
location.port | 返回端口号 如果未写返回空字符串 |
location.pathname | 返回路径 |
location.search | 返回参数 |
location.hash | 返回片段 #后面内容 |
location.assign() | 跟href一样,可以跳转页面(也称为重定向页面) |
location.replace() | 替换当前页面,因为不记录历史,所以不能后退页面 |
location.reload() | 重新加载页面,相当于刷新按钮或者f5 如果参数为true则强制刷新 |
- navigator 对象
navigator对象包含关闭浏览器的信息,他有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值
- history 对象
window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能 参数如果是1 前进1个页面,如果是-1 后退1个页面
本地存储
本地存储特性:
数据存储在用户浏览器中
设置、读取方便、甚至页面刷新不丢失数据
容量较大,sessionStorage约5M,localStorage约20M
只能存储字符串,可以将对象JSON.stringify()编码后存储
- window.sessionStorage(key,value)
生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
存储数据:sessionStorage.setltem(key,value)
获取数据:sessionStorage.getltem(key)
删除数据:sessionStorage.removeltem(key)
删除所有数据:sessionStorage.clear() - window.localStorage
生命周期永久生效,除非手动删除,否则关闭页面也会存在
可以多窗口(页面)共享(同一浏览器可以共享)
以键值对的形式存储使用
存储数据:localStorage.setltem(key,value)
获取数据:localStorage.getltem(key)
删除数据:localStorage.removeltem(key)
删除所有数据:localStorage.clear()