JS Web APIs (DOM BOM)学习笔记
@[TOC](JS Web APIs (DOM BOM)学习笔记)
1、Web APIs和JS基础关联性
2、DOM
文档对象模型(Document Object Model)，处理HTML或者XML的标准编程接口
1) DOM树
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中所有的标签都是元素，DOM中使用elment表示
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
DOM把以上内容都看作是对象
2) 获取元素
//1、根据ID获取getElementById()
2019-9-9
var element = document.getElementById('time'); //返回的是单个元素
console.log(element)
//console.dir()打印返回的元素对象，dir是目录的意思
//2、根据标签名获取getElementsByTageName()
//返回的是元素对象的集合，以伪数组的形式存储的
var lis = document.getElementsByTageName('li');
console.log(lis[0])
//3、指定父元素再获取子元素element.getElementsByTageName('标签名');
- li1
var ol = document.getElementsByTagName('ol');
console.log(ol[0].getElementsByTageName('li')); //记得是伪数组里的第0个
H5新增获取元素
//1、getElementsByClassName() 根据类名获取
//2、querySelector()返回指定选择器的第一个元素对象
var firstBox = document.querySelector('.box'); //.是类选择器
var firstBox = document.querySelector('#box'); //#是id选择器
var firstBox = document.querySelector('li'); //标签不用加前缀
//3、querySelectorALL() 返回指定选择器的所有元素
//性质同querySelector
3) 获取特殊元素
//1.获取body元素
var bodyEle = document.body;
//2.获取html元素
var htmlEle = document.documentElement;
4) 事件基础
简单理解：触发–响应机制
事件由三部分组成：
- 事件源：事件被出发的对象
- 事件类型：如何触发 什么事件 如鼠标点击(onclick)、鼠标经过
- 事件处理程序：通过一个函数赋值的方式完成
var btn = document.getElementById('btn'); //事件源
//事件类型和事件处理程序
btn.onclick = function(){
alert('hello');
}
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
5) 操作元素
改变元素内容
element.innerText()
div.innerText('今天是 2019')；/不识别html标签，非W3C标准
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML()
div.innerHTML('今天是 2019')；/识别html标签，W3C标准
起始位置到终止位置全部内容，包括html标签，同时保留空格和换行
改变元素属性
zxy.onclick = function(){
img.src = 'images/zxy.jpg';
}
表单属性设置
利用DOM可以操作如下表单元素属性：
type、value、checked、selected、disabled
样式属性设置
可以通过JS修改元素的大小、颜色、位置等样式
//1.element.style 行内样式操作
div.onclick = function(){
this.style.backgroundColor = 'purple';
}
//2.element.className类名样式操作
div.onclick = function(){
this.className = 'change';
}
排他思想
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循坏的排他思想
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式(留下我自己)
获取元素属性
1.element.属性
2.element.getAttribute('属性') //可以获取自定义属性
设置元素属性
1.element.属性 = ‘值’
2.element.settAttribute('属性',‘值’) //可以设置自定义属性
H5自定义属性
- H5规定自定义属性data-开头作为属性名并且赋值
获取H5自定义属性
- 兼容性获取 element.getAttribute(‘data-index’);
- H5新增element.dataset.index 或者 element.dataset[‘index’]
- 如果自定义属性有多个-链接的单词，我们获取的时候采取驼峰命名法
div.dataset.listName
dive.dataset['listName']
6) 节点操作
节点概述
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 元素节点 nodeType为1
- 属性节点 nodeType为2
- 文本节点 nodeType为3(文本节点包含文字、空格、换行等)
实际开发中，节点操作主要操作的是元素节点
节点层级
最常见的是父子兄层级。
- 父节点 parentNode
x
- 子节点 childNodes、children
1)childNodes
获取所有的子节点，包含元素节点、文本节点（换行、空格）等
如果只想获得里面的元素节点，则需要专门处理，所以不提倡使用
var ul = document.querySelector('ul');
for(var i = 0; i < ul.childNodes.length; i++){
if(ul.childNodes[i].nodeType == 1){
console.log(ul.childNodes[i]);
}
}
2)children
parentNode.children是一个只读属性，返回所有的子元素节点，只返回元素节点，其余节点不返回
属性名
说明
firstChild
获取第一个子节点，不管是文本节点还是元素节点
firstElementChild
获取第一个子元素节点
lastChild
获取最后一个子节点，不管是文本节点还是元素节点
lastElementChild
获取最后一个子元素节点
- 兄弟节点 nextSibling
属性名
说明
nextSibling
下一个兄弟节点，不管是文本节点还是元素节点
nextElementSibling
下一个喜兄弟元素节点
previousSibling
上一个兄弟节点，不管是文本节点还是元素节点
previousSibling
上一个兄弟元素节点
创建节点
//1.创建元素节点
var li = document.creatElement('li')
//2.添加元素节点
node.appendChild(child)//追加元素，相当于push
node.insertBefore(child,指定元素)
删除节点
node.removeChild(child)
删除指定子节点，返回值为删除的子节点
复制节点
node.cloneNode()
- 如果括号参数为空或为false，则为浅拷贝，只复制标签不复制内容
- 括号为true则深拷贝，复制内容
三种创建元素方式区别
- document.write() 创建元素，再调用会导致页面重绘(创建一个新页面，只有write里的内容)
- document.innerHTML 创建多个元素时效率更高（使用数组，不要拼接字符串），结构稍微复杂
- document.creatElement() 创建多个元素效率稍微低一点，但是结构更清晰
3、事件高级
1) 注册事件
传统注册事件
- 利用on开头的事件，如onclick
- 特点：注册事件的唯一性（同一个元素同一个事件只能设置一个处理函数）
方法监听注册方式
- w3c标准
- addEventListener()是一个方法
- IE9之前使用attachEvent()代替
- 特点：同一个元素同一个事件可以注册多个事件
eventTarget.addEvenrtListener(type, listener[,useCaptrue])
改方法接受三个参数：
- type：事件类型字符串，比如click、mouseover，注意这里不要带on
- listner：事件处理函数，事件发生时，会调用该监听函数
- userCapture：可选参数，是一个布尔值，默认是false
attachEvent事件监听方式（非标准，不提倡）
eventTraget.attachEvent(eventNameWithOn, callback)
该方法接受两个参数：
- eventNameWithOn：事件类型字符串，比如onclick、onmouseover，这里要带on
- callback：事件处理函数，当目标触发事件时回调函数被调用
2) 删除事件
传统方式解绑
eventTarget.onclick = null;
方法监听解绑方式
eventTarget.removeEventListener('click',fn); //与添加时写法一致
3) DOM事件流
事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
DOM事件流分为3个阶段：
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
比如我们给一个div注册了点击事件：
- dom事件流 三个阶段
- JS代码中只能执行捕获或者冒泡其中的一个阶段
- onclick和attachEvent只能得到冒泡阶段
- 如果addEventListener第三个参数是true，那么则处于捕获阶段 document -> html -> body -> father -> son
- 如果addEventListener第三个参数是false或省略，那么则处于冒泡阶段 son -> father -> body -> html -> document
4) 事件对象
div.onclick = function(event){}
- event就是一个事件对象，写到侦听函数的小括号里，当作形参来看
- 事件对象只有有了对象才会存在，它是系统自动创建的，不需要传参
- 事件对象是事件一系列相关数据的集合，比如鼠标点击里包含了鼠标相关的信息如鼠标坐标，键盘事件里包含键盘事件的信息比如按下了哪个键
- 这个事件对象可以自己命名，比如event、evt、e
事件对象常见的属性和方法
事件对象属性方法
说明
e.target
返回触发事件的对象（标准）
e.srcElement
返回触发事件的对象（非标准）
e.type
返回事件的类型 比如click moueseover 不带on
e.cancelBubble
该属性阻止冒泡（非标准）
e.returnValue
该属性阻止默认事件（默认行为）（非标准） 比如不让链接跳转
e.preventDefault()
该方法阻止默认事件（默认行为）（标准）比如不让链接跳转
e.stopPropagation()
阻止冒泡 标准
e.target和this区别
- e.target返回的是触发事件的对象（元素） this返回的是绑定事件的对象（元素）
- 区别：e.target点击了哪个元素就返回哪个元素，this哪个元素绑定了这个点击事件，那么就返回谁
- currentTarget与this非常相似（区别在于有兼容性问题且不如this短）
5) 事件委托
事件委托也称事件代理，再JQuery里陈伟事件委派
事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置的每个子节点。
6) 常用的鼠标事件
- 禁止鼠标右键菜单contextmenu
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault();
}
2.禁止鼠标选中selectstart
document.addEventListener('selectstart',function(e){
e.preventDefault();
}
鼠标事件对象
鼠标事件对象
说明
e.clientX
返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY
返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX
返回鼠标相对于文档页面的X坐标
e.pageY
返回鼠标相对于文档页面的Y坐标
e.screenX
返回鼠标相对于电脑屏幕的X坐标
e.screenY
返回鼠标相对于电脑屏幕的Y坐标
键盘事件对象
键盘事件
触发条件
keyup
按键弹起的时候触发
keydown
按键按下的时候触发
keypress
按键按下的时候触发 不识别功能键(ctrl shift 箭头等)
键盘事件对象属性
说明
keyCode
返回该键的ASCII值
注意：keydown和keyup不区分字母大小写，keypress区分大小写。
实际开发中更多使用keydown和keyup，它能识别所有的键（包括功能键）
Keypress不识别功能键，但keyCode属性能区分大小写，返回不同的ASCII值
4、BOM
BOM(Browser Object Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一些列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，由厂商定义。
1) BOM的构成
BOM比DOM更高级，BOM包含了DOM
- window对象是浏览器的顶级对象，它具有双重角色
- 它是JS访问浏览器的一个接口
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等
2) window对象常见事件
窗口加载事件
- load事件
window.onload = function(){}
或者
window.addEventListener("load",function(){});
window.onload是窗口（页面）加载事件，当文档内容完成加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。
2.DOMContentLoaded事件
document.addEventListener('DOMContentLoaded',function(){});
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
如果页面的图片很多的话，从用户访问到onload触发可能需要较长时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。
调整窗口大小载事件
window.onresize = function()
或者
window.addEventListener('resize',function(){});
获取窗口宽高：
window.innerWidth和window.innerHeight属性
3) 定时器
1.setTimeout定时器
//写法一，直接写函数
setTimeout(funtion(){
console.log("时间到了")
},2000);
//写法二，写函数名
function callback(){
console.log("爆炸了");
}
setTimeout(callback,3000);
//页面中可能会有很多的定时器，所以一般需要标识符
var timer1 = setTimeout(函数,时间);
setTimeout()这个调用函数我们称为回调函数callback
普通函数是按照代码顺序直接调用
而这个函数需要等待时间，因此称为回调函数
触发事件里的函数也是回调函数
- 停止setTimeout()定时器
window.clearTimeout(timeoutID);
- setInterval定时器
window.setIntervbal(函数,时间);
每隔多少时间就调用一次
- 停止setInterval()定时器
window.clearInterval()
- this指向（谁调用指向谁）
- 全局作用域或者普通函数中的this指向全局对象window（定时器里面的this指向window）
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数的实例
4) JS执行机制
JS是单线程
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们堆某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。
同步和异步
HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步。
同步：
前一个任务结束后执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步：
在做一件事情的同时，可以去处理其他事情。
同步任务：
同步任务都在主线程上执行，形成一个执行栈.
异步任务：
JS的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型：
- 普通事件，如click、resize等
- 资源加载，如load、error等
- 定时器，包括setInterval、setTimeout等
异步任务添加到任务队列（消息队列）里
JS执行机制
- 先执行执行栈中的同步任务
- 异步任务（回调函数）放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
5) localtion对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
URL
统一资源定位符（Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
location对象属性
location对象属性
返回值
location.href
获取或者设置整个URL
location.host
返回主机（域名）
location.port
返回端口号，如果未写返回空字符串
location.pathname
返回路径
location.hash
返回片段 #后面的内容，常见于链接 锚点
location对象方法
location对象方法
返回值
location.assign()
跟href一样，可以跳转页面（也称为重定向页面），能够后退页面
location.replace()
替换当前页面，因为不记录历史，所以不能后退页面
location.reload()
重新加载页面，相当于刷新按钮或者f5，如果参数为true强制刷新（ctrl+f5）
6) navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。
下面前端代码可以判断用户用哪个终端打开页面，实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhong|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOs|Symbian|Windows Phone)/i))){
window.location.href = ""; //手机
}else{
window.location.href = ""'; //电脑
}
7) history对象
history对象方法
作用
back()
可实现后退功能
forward()
可实现前进功能
go(参数)
前进后退功能，参数1是前进1个页面，-1是后退1个页面
5、动画
1) 节流阀
防止轮播图按钮连续点击造成播放过快。
节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
开始设置一个变量var flag = true;
if(flag){flag=false;do something} 关闭水龙头
利用回调函数动画执行完毕，flag = true打开水龙头
可以使用逻辑中断 flag && callback() (等同于于上面if的写法)
6、本地存储
本地存储特性
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大，sessionStorage约5M、localStorage约20M
- 只能存储字符串，可以将对象JSON.stringify()编码后存储
1） window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口（页面）下数据可以共享
- 以键值对的形式存储使用
存储数据
sessionStorage.setItem(key,value);
获取数据
sessionStorage.getItem(key);
删除数据
sessionStorage.removeItem(key);
清空所有数据
session.clear(); //不写参数
2） window.localStorage
- 生命周期永久有效，除非手动删除否则关闭页面也会存在
- 可以多窗口（页面）共享（同一浏览器可以共享）
- 以键值对的形式存储使用
使用方法与sessionStorage一致
localStorage.setItem(key,value);
localStorage.getItem(key);
localStorage.removeItem(key);
localStorage.clear();