@[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()
<div id='time'>2019-9-9</div>
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('标签名');
<ol>
<li>li1</lis>
</ol>
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)、鼠标经过
- 事件处理程序：通过一个函数赋值的方式完成
<button id="btn">button</button>
var btn = document.getElementById('btn'); //事件源
//事件类型和事件处理程序
btn.onclick = function(){
alert('hello');
}
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
5) 操作元素
改变元素内容
element.innerText()
div.innerText('<strong>今天是</strong> 2019')；/不识别html标签，非W3C标准
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML()
div.innerHTML('<strong>今天是</strong> 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 data-list-name='1'></div>
div.dataset.listName
dive.dataset['listName']
6) 节点操作
节点概述
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 元素节点 nodeType为1
- 属性节点 nodeType为2
- 文本节点 nodeType为3(文本节点包含文字、空格、换行等)
实际开发中，节点操作主要操作的是元素节点
节点层级
最常见的是父子兄层级。
- 父节点 parentNode
<div class="box">
<span class="code">x</span>
<script>
var code = document.querySelector('.code');
//得到的是最近的父级节点，找不到则返回null
var box = code.parentNode;
</script>
- 子节点 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();
507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
