DOM笔记

JavaScript的组成

ECMAScript - JavaScript的核心

定义了javascript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

DOM基础名词

• 文档：一个网页可以称为文档
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
• 元素：网页中的标签
• 属性：标签的属性

操作节点

对节点进行增删改查

获取标签节点对象

	<p class="title" id="one">hvaizfhci</p><p class="title">Lorem ipsum dolor, sit amet consectetur a, adipisci ratione at quia, ipsa molestiae facere mollitia iste officiis veniam suscipit laudantium!</p><ul class="des"><li>1</li><li>2</li><li>3</li></ul>

 		//1、getElementById() 通过id进行查找 var oP = document.getElementById('one');console.log(oP);/*2、getElementsByTagName() 通过标签名进行查找查找的是一个集合*/var aP = document.getElementsByTagName('p');console.log(aP);/** 3、getElementsByClassName() 通过类名进行查找 * 查找的是一个集合 */var aTitle = document.getElementsByClassName('title');console.log(aTitle);/*4、querySelector() 通过标签名、类名、id名等HTML写法取标签但是只能取到一个元素*/var oP = document.querySelector('.title');console.log(oP);/*5、querySelectorAll() 通过标签名、类名、id名等HTML写法取标签能取到所有符合条件的元素*/var aP = document.querySelectorAll('.title');console.log(aP);

获取标签属性

element.title //设置或返回元素的title属性
element.textContent //设置或返回一个节点和它的文本内容
element.innerText //设置或返回一个节点和它的文本内容
element.tagName //作为一个字符串返回某个元素的标记名（大写）
element.className //获取标签的class属性值nodelist.length //返回节点列表的节点数目。
nodelist.item(idx) //返回某个元素基于文档树的索引 同 nodelist[idx]

	<p class="title" id="one">hvaizfhci</p><p class="title">Lorem ipsum dolor, sit amet consectetur a, adipisci ratione at quia, ipsa molestiae facere mollitia iste officiis veniam suscipit laudantium!</p><img class="photo" src="./1.png" alt="百度一下" width="100"><div class="des"><p id="desc">cajnhvku</p></div>

		//1、直接点.(对象.属性)//如果只有一个对象//先获取对象var oP = document.querySelector('#one');console.log(oP.id);//oneconsole.log(oP.className);//titlevar oDes = document.querySelector('.des');var oDesP = oDes.querySelector('p');console.log(oDesP.id);//desc/*如果是一个集合可以通过数组的形式选择到对应的标签对象，(对象.属性)*/var aP = document.querySelectorAll('p');console.log(aP[0].id);//one/*直接对象.属性得到的是处理好后的属性值*/var oPhoto = document.querySelector('.photo');console.log(oPhoto.src);//http://127.0.0.1:5500/Day20/1.png//2、使用getAttribute()获得原始的属性值console.log(oPhoto.getAttribute("src"));//./1.png//3、使用setAttribute()设置属性，如果原来标签没有对应的属性，就会添加上去console.log(oPhoto.setAttribute("height",100));//undefined,虽然返回undefined，但是原代码上会添加对应的属性上去//4、hasAttribute()判断是否有对应的属性console.log(oPhoto.hasAttribute('src'));//true

获取样式

	<p class="title" id="one">hvaizfhci</p><p class="title">Lorem ipsum dolor, sit amet consectetur a, adipisci ratione at quia, ipsa molestiae facere mollitia iste officiis veniam suscipit laudantium!</p><img class="photo" src="./1.png" title="百度一下" width="100" style="border:5px solid red">

		//注意：如果不是变量，那么（属性值）就要加上双引号""//获取标签对象var oPhoto = document.querySelector('.photo');console.log(oPhoto.style);//只会获取行内样式oPhoto.style.border = "10px solid green";console.log(oPhoto.style.border);//10px solid greenconsole.log(oPhoto.style.display);//空//oPhoto.style.display = 'none';//display赋值后，可以直接获取到//console.log(oPhoto.style.display);//none//getComputedStyle()获取计算后的样式，也就是实际样式,所有有效的样式都可以获取到console.log(window.getComputedStyle(oPhoto,null)['padding']);//100pxconsole.log(window.getComputedStyle(oPhoto,null)['border']);//10px solid rgb(0, 128, 0)//在style中使用多单词命名的样式时，在js里面要使用驼峰命名法console.log(window.getComputedStyle(oPhoto,null)['fontSize']);//30px

创建添加内容

	<div class="item"><h3 class="title">龙牌洗发水</h3><p class="des">龙的传人真正的洗发水</p><p class="price">¥999999</p></div>

	//创建一个标签节点divvar oDiv = document.createElement("div");//创建一个文本节点var content = document.createTextNode("你好！");//添加节点oDiv.appendChild(content);console.log(document.body);document.body.appendChild(oDiv);//parent.insertBefore(B,A),在父级内的子节点，B放到A的前面var oItem = document.querySelector(".item");console.log(oItem.children[2]);console.log(oItem.insertBefore(oItem.children[2], oItem.children[1]));//创建一个标签节点p,也可以进行添加var oP = document.createElement("P");oP.innerText = "bviawvkz";//把p标签添加到oItem下标为1的前面console.log(oItem.insertBefore(oP, oItem.children[1]));

获取标签里的内容

		//获取标签var oP = document.querySelector('p');var oDes = document.querySelector('.des');//1、只获取文本内容console.log(oP.innerText);console.log(oDes.innerText);//2、既获取文本内容，又获取Html标签,还会保留格式console.log(oP.innerHTML);console.log(oDes.innerHTML);

获取节点的节点

节点（父节点，子节点，兄弟节点）

 	  <div class="item"><h3 class="title">龙牌洗发水</h3><p class="des">龙的传人真正的洗发水 </p><p class="price">¥999999</p></div><div class="item"><h3 class="title">龙牌洗发水</h3><p class="des">龙的传人真正的洗发水 </p><p class="price">¥999999</p></div>

//获取第一个类名为item的标签var oItem = document.querySelector('.item');//获取所有的孩子console.log(oItem.children);//3个//获取下标从0开始的第几个孩子console.log(oItem.children[1]);//<p class="des">龙的传人真正的洗发水 </p>//获取所有的孩子节点,包括标签、文字(#text(回车符))console.log(oItem.childNodes);//7个//获取第一个孩子节点console.log(oItem.firstChild);//#text(回车符)//获取第一个标签节点，包括标签、文字console.log(oItem.firstElementChild);//<h3 class="title">龙牌洗发水</h3>//获取最后一个孩子console.log(oItem.lastChild);//#text(回车符)//获取最后一个孩子节点，包括标签、文字console.log(oItem.lastElementChild);//<p class="price">¥999999</p>//获取对应的孩子var oP = oItem.querySelector('p:nth-of-type(1)');console.log(oP);//<p class="des">龙的传人真正的洗发水 </p>//获取父标签（父元素）console.log(oItem.parentElement);//返回bodyconsole.log(oP.parentElement);//返回第一个item//获取父标签（父元素）节点，包括标签、文字console.log(oItem.parentNode);//返回body//获得下一个紧跟着的兄弟标签（元素）console.log(oItem.nextElementSibling);//获得下一个紧跟着的兄弟节点console.log(oItem.nextSibling);//#text(回车符)//获得上一个紧跟着的兄弟标签（元素）console.log(oItem.previousElementSibling);//nullconsole.log(oP.previousElementSibling);//h3.title//获得上一个紧跟着的兄弟节点console.log(oItem.previousSibling);//#text(回车符)

检查节点

	<input type="text" /><div class="item"><h3 class="title">龙牌洗发水</h3><p class="des">龙的传人真正的洗发水</p><p class="price">¥999999</p></div>

		/*document.hasFocus(); //返回布尔值，检测文档或元素是否获取焦点element.hasChildNodes(); //返回布尔值,检测节点对象是否包含任何子节点element.isEqualNode(element2); //返回布尔值,判断element与element2是否是同一个节点element.hasAttributes(); //返回布尔值,判断当前节点对象是否包含属性element.hasAttribute(property); //返回布尔值, 判断该节点是否拥有指定的 property 属性*/var oItem = document.querySelector(".item");console.log(oItem.hasChildNodes()); //trueconsole.log(oItem.hasAttributes()); //trueconsole.log(oItem.hasAttribute("src")); //falseconsole.log(oItem.hasAttribute(".title")); //falseconsole.log(oItem.hasAttribute("class")); //true

拷贝与替换节点

	<div class="item"><h3 class="title">龙牌洗发水</h3><p class="des">龙的传人真正的洗发水 </p><p class="price">¥999999</p></div>

		/*拷贝cloneNode()参数默认为false，只拷贝第一层的节点，且没有文本内容要加上true参数，把节点进行完整的拷贝*/var oItem = document.querySelector('.item');var oItem1 =  oItem.cloneNode(true);console.log(oItem1);document.body.append(oItem1);/*替换parent.replaceChild(A,B)父级里A进行剪切，复制粘贴到B上*///oItem里下标为2的节点被剪贴掉后复制粘贴到下标为1上oItem.replaceChild(oItem.children[2],oItem.children[1]);//创建一个标签节点p,也可以进行替换var oH1 = document.createElement('h1');oH1.innerText = 'vhsuizhlgiuh';//新创建的标签节点p被剪贴掉后复制粘贴到下标为0上oItem.replaceChild(oH1,oItem.children[0]);

删除节点

		/*removeChild()父亲杀掉孩子参数：需要删除的对应的孩子*/oItem.removeChild(oItem.children[1]); //oItem里下标为1的节点被删除/*remove()孩子自杀，没有参数*/oItem.children[1].remove();

事件

事件三要素

• 事件源:触发(被)事件的元素
• 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
• 事件处理程序:事件触发后要执行的代码(函数形式)

事件阶段

事件有三个阶段:

event.eventPhase属性可以查看事件触发时所处的阶段 :

1. 捕获阶段

2. 当前目标阶段

3. 冒泡阶段

1、事件捕获
捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)

2、事件冒泡
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

绑定的事件默认的执行时间是在冒泡阶段执行，而非在捕获阶段（重要）。这也是为什么当父类和子类都绑定了某个事件，会先调用子类绑定的事件，后调用父类的事件

事件对象的属性和方法

• event.type 获取事件类型
• clientX/clientY 所有浏览器都支持，窗口位置
• pageX/pageY IE8以前不支持，页面位置
• event.target || event.srcElement 用于获取触发事件的元素
• event.preventDefault() 取消默认行为

event对象属性

属性	描述
altKey	返回当事件被触发时，“ALT” 是否被按下。
shiftKey	返回当事件被触发时，“SHIFT” 键是否被按下。
ctrlKey	返回当事件被触发时，“CTRL” 键是否被按下。
metaKey	返回当事件被触发时，“meta” 键是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
keyCode	表示非字符按键的unicode值。
isChar	布尔值，表示当前按下的键是否表示一个字符
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
pageX	事件发生时相对于页面（如viewport区域）的水平坐标。
pageY	事件发生时相对于页面（如viewport区域）的垂直坐标。
currentTarget	事件冒泡阶段所在的当前DOM元素
target	返回触发此事件的元素（事件的目标节点）。
eventPhase	返回事件传播的当前阶段。
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。
type	返回当前 Event 对象表示的事件的名称。
timeStamp	返回事件生成的日期和时间。

事件行为

阻止默认事件行为

很多标签拥有默认的事件行为 比如a标签 点击会执行跳转页面行为 , 我们可以通过代码阻止这些行为

var oLink = document.querySelector('a');oLink.onclick = function(e){e.preventDefault(); //preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为
}oLink.onclick = function(e){//代码return false; //回调函数最后返回false可以阻止默认行为
}

阻止事件传递(阻止冒泡)

所有的事件类型都会经历事件捕获但是只有部分事件会经历事件冒泡阶段,例如submit事件就不会被冒泡。

事件的传播是可以阻止的：
w3c规范下，使用stopPropagation（）方法
在IE版本下设置eve.cancelBubble = true； 废弃
在捕获的过程中stopPropagation（）；后，后面的冒泡过程就不会发生了。var oLink = document.querySelector('a');oLink.onclick = function(e){e.stopPropagation(); }

事件解绑

事件绑定之后 如果需要解绑 可以销毁

var oBtn = document.querySelector('#btn');
var oClean = document.querySelector('#clean');oBtn.onclick = function(){console.log('btn成功绑定点击事件');
}
oClean.onclick = function(){oBtn.onclick = null;console.log('btn已解绑点击事件');
}

事件委托

当需要对多个子元素进行循环事件绑定的时候，可以将事件委托与他们的共同父级，通过event对象属性来进行筛选和操作，节省开销。

var oUl = document.querySelector('list');//监听在oUl上发生的点击事件 利用事件的传递性 获取e.target判断触发事件的实际DOM是否为li 
oUl.onclick = function(e){if(e.target.toLowerCase() === 'li'){e.target.style.backgroundColor = '#368';}
}

事件分派

当一个容器有多个元素需要绑定同一个事件, 而点击不同元素所需要执行的操作不同时可以进行分派映射

 var oBox = document.querySelector('#box');var eventMap = {'stretch': function (ele) {ele.style.width = '400px';ele.style.height = '400px';},'discolor': function (ele) {ele.style.backgroundColor = '#368';},'rotate': function (ele) {ele.style.transform = 'rotate(10deg)';}
}document.onclick = function (e) {if (eventMap[e.target.id.toLowerCase()]) {eventMap[e.target.id.toLowerCase()](oBox);}
}

监听器

DOM 事件监听器 addEventListener() 方法 与 attachEvent()

addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。

事件监听

/*on 绑定事件写法 DOM.on+'事件类型' = 事件处理函数(匿名函数 or 函数名)on 绑定写法 同一个DOM 同一个事件只能绑定一个处理函数 后面的会覆盖前面的addEventListener 监听 addEventListenter可以对同一个DOM 的同一个事件进行多次监听*/

addEventListener(事件类型,事件函数,事件触发阶段)

  eventType: 事件类型 click mouseenter keyDown keyUpcallback: 事件监听函数句柄 当监听到这个DOM的click事件发生的时候 执行，有函数名的函数、匿名函数都可以，但是只有有函数名的函数才能进行解除监听，写有名函数的时候，直接写函数名即可，后面不用加括号status: 事件捕获(true) 事件目标阶段 事件冒泡 (false 默认值)

/* on绑定都是冒泡阶段调用callback解绑 1.对象.on事件名字=事件处理函数--->绑定事件对象.on事件名字=null;2.对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件对象.removeEventListener("没有on的事件类型",函数名字,false);兼容处理 IE9 以前 不支持 w3c addEventListener removeEventListenerattachEvent  detachEvent对象.attachEvent("on事件类型",命名函数);---绑定事件对象.detachEvent("on事件类型",函数名字);*/

事件监听与on绑定区别

on事件会被后面的on的事件覆盖, addEventListener 则不会覆盖;

addEventListener可以指定事件回调触发时机 (捕获 or 冒泡) on事件只有 冒泡时刻触发

addEventListener本质是*函数定义与具体调用事件的解耦，实现了同一事件可以调用多个函数，同一函数可以被多个事件调用，推荐使用*。

注意事项1. 绑定方式和解绑方式一一对应on => null addEventListener removeEventListenerattachEvent detachEvent2. addEventListener attachEvent 如果需要解绑必须用有名函数3.on 和 addEventListener 回调函数内部this指向调用他们的DOM对象4. addEventListener 对同一个事件同一个函数进行多次监听不会发生重复

定时器

setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数，只执行一次

// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {console.log('Hello World');
}, 1000);// 取消定时器的执行
clearTimeout(timerId);

setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数

// 创建一个定时器，每隔1秒调用一次
var timerId = setInterval(function () {var date = new Date();console.log(date.toLocaleTimeString());
}, 1000);// 取消定时器的执行
clearInterval(timerId);

注意事项

1. HTML5规范规定了最小延迟时间不得小于4ms，即如果x小于4，会被当做4来处理
2. 由于javascript单线程 执行队列需要进行插入调整 所以setInterval会出现下述问题（1）某些间隔会被跳过了（2）多个定时器的代码执行间隔可能会比预期的要小。
3. 定时器调用传入函数名称+() 会导致回调函数直接执行 
4. 通过setTimeout递归自调可以替代setInterval
5. 当前页面处于hide(不可见 离开)状态时 定时器会休眠 但是队列会持续添加 会导致失序

递归setTimeout实现有序的定时序列

//参数： 毫秒  需要执行的方法
function setInter(s,fn){function timeOut(s,fn){setTimeout(function(){fn();timeOut(s,fn);},s)}timeOut(s,fn);
}

视窗位置与尺寸

视窗的宽高（包括滚动条）

​ window.innerWidth

​ window.innerHeight

整个窗口的宽高

​ window.outerWidth

​ window.outerHeight

页面移动的位置

document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight

鼠标位置

/*clientX  以浏览器左上顶角为原点，定位 x 轴坐标 clientY  以浏览器左上顶角为原点，定位y轴坐标                    offsetX  以当前事件的目标对象content左上角为原点，定位x轴坐标    offsetY  以当前事件的目标对象content左上角为原点，定位y轴坐标    pageX    以Document 对象（即文本窗口）左上角为原点，定位x轴坐标  pageY    以Document 对象（即文本窗口）左上角为原点，定位y轴坐标 */

元素尺寸及其所在位置

/*
元素尺寸:clientWidth/clientHeight返回不包括边框和滚动条的元素大小offsetWidth/offsetHeight返回包括边框和滚动条的元素大小（实际元素大小）clientLeft/clientTop相当于左边框/上边框的宽度
所在位置:offsetLeft/offsetTop相当于position: absolute/ relative;的偏移量相对于父级的left/right值（不包括父级的边框）offsetParent寻找定位的父级*/

/*需求：获取元素到视窗的left、right求子级到父级的left\right值，一层一层进行叠加，直到没有父级*/console.log(getPosition(oChild));function getPosition(element) {var pos = {left: 0,top: 0}while(element.offsetParent){//获取子元素到父级的left\right值pos.left += element.offsetLeft;pos.top += element.offsetTop;  //对象向外剥一层，到父级element = element.offsetParent;//如果父级有边框，加上父级的边框pos.left += element.clientLeft;pos.top += element.clientLeft;}return pos;}

汇总

offset系列:获取元素的宽,高,left,top, offsetParent
offsetWidth:元素的宽,有边框
offsetHeight:元素的高,有边框
offsetLeft:元素距离左边位置的值
offsetTop:元素距离上面位置的值scroll系列:卷曲出去的值
scrollLeft:向左卷曲出去的距离
scrollTop:向上卷曲出去的距离
scrollWidth:元素中内容的实际的宽(如果内容很少或者没有内容, 元素自身的宽),没有边框
scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框client系列:可视区域
clientWidth:可视区域的宽(没有边框),边框内部的宽度
clientHeight:可视区域的高(没有边框),边框内部的高度
clientLeft:左边边框的宽度
clientTop :上面的边框的宽度

防抖 节流

防抖 降频

​ 等待普攻，周期到了只有才会进行普攻释放

节流：

​ 稀释事件监听触发的频率

​ 定时器版本：

​ 等CD

​ 倒计时结束再触发事件，添加定时器，倒计时结束后打开开关，没到时间，开关关闭

BOM

Browser Object Mode， 浏览器对象模型。没有标准，浏览器厂家约定俗成。

BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。

/*BOM的核心对象是 windowwindow作为 BOM对象时的方法window.alert()window.setInterval()window.prompt();window作为 全局对象全局变量都是window的属性in 表达式a in b判断 a属性是否存在于 b对象之中b是否包含adocument对象属于 全局window对象的属性分支*/

BOM对象包括

• Window对象：浏览器中打开的窗口， 顶层对象
• Navigator对象：浏览器的相关信息
• Screen对象：客户端显示屏幕的信息
• History对象：用户在浏览器窗口中访问过的URL
• Location对象：当前URL的信息

其中，window对象中包含对BOM其他四个对象的只读引用以及Document对象的只读引用

document对象

document对象：实际上是window对象的属性

document == window.document为true，是唯一 一个既属于BOM又属于DOM的对象

document.lastModified

获取最后一次修改页面的日期的字符串表示

document.referrer

用于跟踪用户从哪里链接过来的

document.title

获取当前页面的标题，可读写

document.URL

获取当前页面的URL，可读写

document.anchors[0] / document.anchors[“anchName”]

访问页面中所有的锚

document.forms[0] / document.forms[“formName”]

访问页面中所有的表单

document.images[0] / document.images[“imgName”]

访问页面中所有的图像

document.links [0] / document.links[“linkName”]

访问页面中所有的链接

document.applets [0] / document.applets[“appletName”]

访问页面中所有的Applet

document.embeds [0] / document.embeds[“embedName”]

访问页面中所有的嵌入式对象

document.write(); / document.writeln();

将字符串插入到调用它们的位置

location对象

表示载入窗口的URL，也可用window.location引用它

location.href

当前载入页面的完整URL，如http://www.somewhere.com/pictures/index.htm

location.protocol

URL中使用的协议，即双斜杠之前的部分，如http

location.host

服务器的名字，如www.wrox.com location.hostname //通常等于host，有时会省略前面的www

location.port

URL声明的请求的端口，默认情况下，大多数URL没有端口信息，如8080

location.pathname

URL中主机名后的部分，如/pictures/index.htm location.search //执行GET请求的URL中的问号后的部分，又称查询字符串，如?param=xxxx location.hash //如果URL包含#，返回该符号之后的内容，如#anchor1

location.assign(“http:www.baidu.com”);

同location.href，新地址都会被加到浏览器的历史栈中

location.replace(“http:www.baidu.com”);

同assign()，但新地址不会被加到浏览器的历史栈中，不能通过back和forward访问

location.reload(true | false);

重新载入当前页面，为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false

navigator对象

navigator对象：

包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用，也可用window.navigator引用它

navigator.appCodeName

浏览器代码名的字符串表示 (一般都是Mozilla)

navigator.appName

官方浏览器名的字符串表示 一般都是 Netscape(网景)

navigator.appVersion

浏览器版本信息的字符串表示

navigator.cookieEnabled

如果启用cookie返回true，否则返回false

navigator.javaEnabled

如果启用java返回true，否则返回false

navigator.platform

浏览器所在计算机平台的字符串表示

navigator.plugins

安装在浏览器中的插件数组

navigator.taintEnabled

如果启用了数据污点返回true，否则返回false

navigator.userAgent

用户代理头的字符串表示

screen对象

screen对象：用于获取某些关于用户屏幕的信息，也可用window.screen引用它

screen.width/height

屏幕的宽度与高度，以像素计

screen.availWidth/availHeight

窗口可以使用的屏幕的宽度和高度，以像素计

screen.colorDepth

用户表示颜色的位数，大多数系统采用32位

window.moveTo(0, 0); window.resizeTo(screen.availWidth, screen.availHeight);

填充用户的屏幕 (失效 : 用户安全和隐私协议)

history 历史记录

History 对象包含用户（在浏览器窗口中）访问过的 URL。

length 返回浏览器历史列表中的 URL 数量。

方法
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。
下面一行代码执行的操作与单击两次后退按钮执行的操作一样：

history.go(-2)

BOM 浏览器方法图表

BOM和DOM的结构关系示意图

cookie

cookie : 存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来向访问者电脑上存储数据

1.不同的浏览器存放的cookie位置不一样，也是不能通用的
2.cookie的存储是以域名形式进行区分的
3.cookie的数据可以设置名字的
4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样

访问cookie

要在服务器环境下

我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来

consol.log( document.cookie );

存储cookie

document.cookie = '数据名=值';

设置cookie过期时间

cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁 ,如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间

• 过期时间必须是一个日期对象转换成的字符串（时间戳.toGMTString()）

document.cookie = ‘数据名=值; expires=过期时间’;

var oDate = new Date();
oDate.setDate( oDate.getDate() + 5);oDate.toGMTString();//转换为日期字符串
document.cookie='age=20; expires='+oDate;/*-- document.cookie='sex=man\n你好'; */
//转码
var content= encodeURI('man\n你好');
document.cookie='sex='+content+';expires='+oDate;

要找到对应的数据值，可以使用多种方式

cookie封装

• 设置cookie封装

function setCookie(obj,time){for(key in obj){var d = new Date();d.setDate( d.getDate()+time );document.cookie = key+'='+obj[key]+'; expires='+d.toUTCString();}
}setCookie({name:'hello',sex:'man',love:'逛街',work:'future'
},5);

• 获取cookie封装

 function getCookie() {var cookie = document.cookie;var cookieArr = cookie.match(/[^=;\s]+=([^=;]+)(?:;?)/g);var argData = {}for (var key of arguments) {argData[key] = 1;}return cookieArr.reduce(function (acc, curr) {var tempStr = curr.replace(';', '');var tempArr = tempStr.split('=');if (tempArr[0] && argData[tempArr[0]]) {acc[tempArr[0]] = tempArr[1]}return acc;}, {});
getCookie('name','age')

• 移除cookie

function removeCookie(){for(key in arguments){var json ={};json[arguments[key]]=null;setCookie(json,-1);}}removeCookie('name');