DOM

Document Object Model 文档对象模型，通过浏览器提供的document对象获取元素。

事件

​ 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

​ javascript与HTML之间的交互是通过事件实现的。

​ 对于Web应用来说,有下面这些代表性的事件：点击某个元素,将鼠标移动至某个元素上方,按下键盘上的某个案件，等等。

例：给按钮绑定一个事件

var btn=document.getElementById('btn');
btn.onclick=function(){};

​ 事件函数的代码应该写在元素后面，因为所有代码都是逐行执行的，事件函数需要先获取元素,但是写在HTML元素前，元素未被创建，自然无法获取元素。

​ 可以将事件函数代码写进window.onload()方法中，因为onload方法是在页面加载完毕时再执行。

​ 写在最后的效率最高，用户体验最好。

特殊事件

滚轮事件

• onmousewheel 在火狐中不可用
• 元素.addEventListener("DOMMouseScroll",fun,false); 在火狐中必须用这个方法，且事件字符串必须为DOMMouseScroll

获取元素节点的方法

方法	描述
getElementById()	通过ID获取一个元素
getElementsByTagName()	通过标签名获取一组元素
getElementsByName()	通过name属性获取一组元素
getElementsByClassName()	通过class属性获取一组元素，IE9以下不支持,避免使用
querySelector()	通过CSS选择器获取满足的第一个元素，可以在IE8中使用
querySelectorAll()	同上，但是会获取所有满足条件的元素

获取元素子节点和子元素

方法	描述
el.childNodes	该属性会获取包括文本节点的所有节点(HTML代码间的空格),注意,在IE8及以下，不会将空白文本当作子节点
el.children	获取所有子元素，不包括文本节点
el.firstchild	获取元素第一个子节点
el.lastchild	获取元素最后一个子节点
el.firstElemetChild	获取元素第一个子元素，IE8及以下不支持

获取元素的父节点和兄弟节点

方法	描述
el.parentNode	获取元素的父节点
el.previousSibling	表示当前节点的前一个兄弟节点,可能会获取空格
el.nextSibling	表示当前节点的后一个兄弟节点,可能会获取空格

获取元素内容

方法	描述
el.innerHTML	获取元素标签内部的HTML代码(包括子元素标签)
el.innerText	获取元素标签内部的文本内容(不包括子元素标签)

特殊获取方法

方法	描述
document.body	获取body对象，可以用getElementBy等方法获取,但是document中内置了body属性保存body对象
document.documentElement	获取HTML对象
document.all	获取所有元素，类型和值均为undefined，但是它可以被访问,可能是bug
document.getElementByTagName("*")	获取所有元素

添加元素

1. 创建元素

   var ele = document.createElement('标签名')

2. 创建位文本节点并追加

   var txt = document.createTextNode()

   ele.appendChild(txt)

添加位置

父节点对象.appendChild()
//将新创建的元素返回值作为参数
父节点对象.insertBefore(新对象,指定子节点)
//在指定子节点前插入新子节点
父节点对象.replaceChild(新,旧)
//替换子节点

删除元素

父元素节点.removeChild(子节点)
//需要提前获取父子点,不常用
子节点.parentNode.removeChild(子节点)
//不需要提前获取父节点,常用此方法

修改元素样式

语法

元素.style.样式名=样式值;
//若样式值为像素,则最后需要加"px"
//若样式名为border-top-width，则需要以驼峰命名法修改，改为,borderTopWidth

被修改的样式为内联样式,优先级最高,会直接生效,但是若CSS中写了!important,那么JS也无法覆盖此样式,所以尽量不要使用!important

通过style读取的样式也是内联样式,所以CSS写的样式不会被读取到

获取元素样式

• 获取内联样式

  • 元素.style.样式名

• 获取当前显示的样式(只读)

  • 元素.currentStyle.样式名

    ​ 仅支持IE浏览器

    ​ 有些样式值默认为auto则会返回auto，不会返回真正的值

  • getComputedStyle(元素,伪元素)

    ​ 其他浏览器和IE9及以上支持，伪元素一般传null值

    ​ 返回一个对象，通过对象访问

    ​ 会真正返回样式的值

整合兼容性问题

function getStyle(obj,name){
	if(window.getComputedStyle)
		return getComputedStyle(obj,null)[name];
	else
		return obj.currentStyle[name];
	//或将上述内容整合为三元表达式?:
}

其他样式属性

• clientWidth/clientHeight

  • 获取元素可见宽度/高度，返回值不带px，可直接计算，只读
  • 包括内容区和内边距，不包括边框

• offsetWidth/offsetHeight

  • 获取元素整个宽度/高度，返回值不带px，可直接计算，只读
  • 包括内容区和内边距，包括边框

• offsetParent

  • 获取离当前元素最近的开启定位的祖先元素

• offsetLeft/offsetTop

  • 获取当前元素相对于其定位父元素的水平/垂直偏移量

• scrollWidth/scrollHeight

  • 获取整个元素滚动区域的宽度/高度

• scrollLeft/scrollTop

  • 获取水平/垂直滚动条的滚动距离
  • 若满足scrollHeight/scrollWidth-scrollTop/scrollLeft == clientHeight/clientWidth，则表示该方向的滚动条已经到底

事件

事件对象

​ 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数(IE8及以下不会传递)

​ 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动方向

​ 在IE8及以下浏览器中，是将事件对象作为window对象的属性保存的

通用写法

形参=event||window.event;

​ 元素的setCapture()会将鼠标下一次点击强行转移到自己身上，仅一次，IE8无效

​ 元素的releaseCapture()释放捕获，IE8无效

事件的冒泡

​ 触发子孙元素的事件时，其祖先元素的同类事件也会被触发。

​ 例：点击div中的span，不仅会触发span的点击事件，也会触发div的点击事件(如果存在该事件的话)

​ 在开发中，事件的冒泡是有用的。

​ 如果不希望发生冒泡，可以通过事件对象取消冒泡。

event.cancelBubble=true;
event.stopPropagation()；
//所有浏览器都支持

事件的委派

​ 指将事件统一绑定给元素的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

​ 事件的委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的效率。

​ 由于事件绑定给祖先元素，可能会给不必要的子孙元素绑定事件，所以可以在事件内通过事件对象的target属性判断触发事件的是哪个元素。

祖先元素.onclick=function(e){
    e=event||window.event;
    if(e.target.className=='你所需要触发的类'){
        /*事件执行代码*/
    }
}

多重事件的添加

​ 普通绑定事件的方法的弊端

元素.onclick=function(){};
//这种方法只能给该元素绑定一种事件的一个函数
//若需要绑定多重事件，使用，addEventListener()

addEventListener()

​ 通过这个方法也可以为元素绑定响应函数。

参数

1. 事件的字符串，不要on
2. 回调函数，当事件触发时被触发的函数
3. 是否在捕获阶段触发事件，需要一个布尔值，一般为false

元素.addEventListener("click",function(){
/*事件执行代码*/
},false);
/*其中的this为绑定元素*/

​ 执行顺序与添加顺序相同

​ 以上在IE8中不支持，IE8中使用attachEvent()

attachEvent() 支持IE5-10

参数

1. 事件的字符串，要on
2. 回调函数

元素.attachEvent("onclick",function(){
/*事件执行代码*/
});
/*其中的this为

​ 执行顺序与添加顺序相反

​ 上述两者如果一定纠结于执行顺序，就把代码都写在一个事件中

兼容两者方式

function bind(obj,eventStr,callBack){
	//参数：绑定元素对象，事件字符串(不用on)，回调函数
	if(obj.addEventListener){
		obj.addEventListener(evenStr,callBack,false);
	}
	else{
		obj.attachEvent("on"+evenStr,function(){
		callBack.call(obj);
	}
}

事件的传播

微软认为事件的传播是由内向外，先触发当前元素的事件，再向上向外触发祖先元素的事件，也就是冒泡阶段触发事件。

网景公司认为是由外到内，先触发祖先元素的事件，再向下向内触发当前元素的事件，也就是事件的捕获阶段。

W3C综合了两个公司的方案，将事件传播分为三个阶段

1. 捕获阶段

   在该阶段时，从最外层的祖先元素，向目标进行事件的捕获，但是默认此时不会触发事件

2. 目标阶段

   在事件捕获到目标元素时，捕获结束，开始在目标元素上触发事件

3. 冒泡阶段

   事件从目标元素向外祖先元素传播，依次触发事件

如果希望在捕获阶段执行事件，则将addListener的第三个参数改为true，一般我们不希望捕获阶段触发，所以一般为false。

在IE8及以下浏览器中没有捕获阶段。

BOM

Browser Object Model 浏览器对象模型

BOM可以使我们提供一组对象，用来完成对浏览器的操作

BOM对象

window

代表的是整个浏览器的窗口，同时window也是网页的全局对象。

Navigator

代表的是当前浏览器的信息，通过该对象可以识别不同的浏览器。

由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了。

一般我们只是用userAgent属性来判断浏览器的信息，该属性是一个字符串，该字符串中包含有用来描述浏览器信息的内容，不同的浏览器有不同的userAgent。

识别浏览器方式

var ua=navigator.userAgent;
if(/firefox/i.test(ua)){
	alert("这是火狐");
}else if(/chrome/i.test(ua)){
	alert("这是Chrome");
}else if(/msie/i.test(ua)){//IE11去除了和IE相关的标识信息
	alert("这是IE10及以下");
}else if("ActiveXObject" in window){
	alert("你是IE11，还往哪里躲！");
}
/*如果通过userAgent无法判断，可以通过一些浏览器特有的对象进行判断*/
/*比如：ActiveXObject*/ 
/*狡诈的IE11将该属性的布尔值转化为false,所以使用in来判断是否存在该属性*/

Location

代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或操作浏览器跳转。

直接打印location，则可以直接获取到地址栏的信息(当前页面的完整路径)。

如果直接将location属性改为一个完整的路径或相对地址，则页面会跳转到该路径，并且会生成相应的历史记录。

Location的对象属性是将当前地址栏的完整路径分割成一个个属性保存，具体内容查看W3C参考手册。

• assign( string )
  • 用来跳转到其他页面，和直接修改location作用一样
• reload( [bool] )
  • 相当于刷新作用，页面的缓存依旧存在，参数传递true，则会强制清空缓存刷新界面
• replace()
  • 可以使用一个新的页面替换当前的页面，调用完毕也会跳转页面，区别于assign()方法，该方法不会生成相应历史记录，也就不能前进后退

History

代表浏览器的历史记录，可以通过该对象操作浏览器的历史记录

由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，并且该操作仅当次访问有效

• length
  • 可以获取当次访问的链接数量
• back()
  • 相当于浏览器的后退按钮，回退到上一个页面
• forward()
  • 相当于浏览器的前进按钮，前进到下一个页面
• go(number)
  • 综合back和forward方法，以一个整数作为参数，正数表示向前，负数表示后退，数值表示跳转页数

Screen

代表用户的屏幕的信息，通过该对象可以获取用户的显示器的相关的信息

除了window本身是全局变量，其他BOM对象都是作为window的属性保存的，可以通过window使用，也可以直接使用

定时器

开启定时器

setInterval()方法，定时器方法都是window对象的方法，可以直接写。

var timer = setInterval(回调函数,执行间隔,[回调函数参数....]);

​ 其中执行间隔为正整数，表示毫秒。

​ 返回值为一个Number类型的数据，这个数字用来作为定时器的唯一标识，用于关闭定时器。

关闭定时器

clearInterval()方法，用于关闭定时器

cleartInterval(定时器标识);

​ 定时器标识就是开启定时器时的返回值。

​ 可以接受任何参数，如果参数是有效的定时器标识，则会关闭对应计时器。

​ 若参数是无效的任意参数，则不会报错，也不会有任何反应。

开启延迟器

setTimeout()方法，开启延时调用

setTimeout(回调函数,延时时间,[回调函数参数....])

其中延时时间为正整数，表示毫秒。

返回值为一个Number类型的数据，这个数字用来作为延时器的唯一标识，用于延时器。

JSON

在JS中的对象只有JS自己认识，其他的语言都不认识。

JSON就一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言的对象，JSON在开发中主要用来数据的交互。

JavaScript Object Notation JS对象表示法。

JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须要加双引号，其他的和JS语法一致。

JSON分类

1. 对象{}
2. 数组[]

JSON中允许的值

1. 字符串
2. 数值
3. 布尔值
4. null
5. 对象(除了函数)
6. 数组

JSON——>JS对象

在JS中，为我们提供了一个工具类，就叫JSON。

这个对象可以帮助我们将一个JSON转换为JS对象，反之也可以。

var json='{"name":"孙悟空","age":18,"gender":"男"}';
var o=JSON.parse(json);
console.log(o);

​ 只要是将JSON字符串转换为JS对象就用parse()方法。

JS对象——>JSON

var o={"name":"孙悟空","age":18,"gender":"男"};
var json=JSON.stringify(o);
console.log(typeof json);

​ 只要是将JS对象转换为JSON字符串就用stringify()方法

兼容性

JSON在IE7中不支持。

在IE7中可以使用eval()函数。

这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回。

如果使用eval()执行的字符串中含有{},它会将{}当成是代码块，不希望将其当成代码块解析，则需要在用小括号将该字符串包裹。

注意事项

在开发中，不推荐使用eval()函数。

该函数执行效率比较差，且具有安全隐患。

如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理(json2.js)。

cookie

//cookie 会话跟踪技术 客户端(前端)
//session 会话跟踪技术 服务端(后端)

//cookie作用：将网页中的数据保存到浏览器中
//cookie注意点：cookie默认不保存任何数据
//cookie类型为字符串，字符串按照键值对格式，不能一次性保存多条数据
//保存多条数据需要一条一条设置
//个数限制 20-50  大小限制 4KB左右  取决于浏览器
document.cookie="key=value;";
//cookie生命周期：默认一次会话完毕(关闭浏览器)清空。
//设定cookie过期时间  expires=
var date=new Date();
date.setDate(date.getDate()+1);//设置为明天
document.cookie="key=value;expires="+date.toGTMString()+";";
//设定过期时间后，cookie保存时间只受时间影响，不会被浏览器关闭影响
//cookie只能在同一个浏览器并且同一个文件夹(的子目录)的网页才能访问
//要想cookie可以被所有服务端网页访问
document.cookie="key=value;path=/;";
//例如在www.it666.com中保存了一个cookie，
//那么我们在edu.it666.com中无法访问这个cookie
document.cookie="key=value;domain=it666.com;";

cookie方法封装

function addCookie(key,value,day,path,domain){
//1.处理默认保存的路径
    var index=window.location.pathname.lastIndexOf('/');
    var currentPath=window.location.pathname.slice(0,index);
    path=path||currentPath;
//2.处理默认保存的domain
    domain=domain||document.domain;
//3.处理默认过期时间
    if(!day){
        document.cookie=key+"="+value+";path="+path+";domain="+domain+";";
    }else{
        var date = new Date();
        date.setDate(date.getDate()+day);
        document.cookie="";
        document.cookie=key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";";
        }
    }
function getCookie(key){
    var res=document.cookie.split(";");
    for(var i = 0;i <res.length;i++){
        var temp=res[i].split("=");
        if(temp[0].trim()==key){
            return temp[1];
        }
    }
}
//只能删除默认路径下的cookie,删除指定路径cookie 制定paht
function delCookie(key,path){
    console.log(key,getCookie(key));
    addCookie(key,getCookie(key),-1,path);
}
    delCookie("asd");
};

WebStorage

HTML5 提供了两种在客户端存储数据的新方法：localStorage和sessionStorage，挂载在window对象下。

webStorage是本地存储，数据不是由服务器请求传递的。从而它可以存储大量的数据，而不影响网站的性能。

Web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。比如客户端需要保存的一些用户行为或数据，或从接口获取的一些短期内不会更新的数据，我们就可以利用Web Storage来存储。

localStorage

​ localStorage的生命周期是永久性的。localStorage存储的数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。如果 想设置失效时间，需自行封装。

sessionStorage

​ sessionStorage 的生命周期是在浏览器关闭前。

特性：

• 关闭浏览器sessionStorage 失效；
• 页面刷新不会消除数据；
• 只有在当前页面打开的链接，才可以访sessionStorage的数据，使用window.open打开页面和改变localtion.href方式都可以获 取到sessionStorage内部的数据;

存储方式	作用与特性	存储数量及大小	api
cookie	存储用户信息，获取数据需要与服务器建立连接。 可存储的数据有限，且依赖于服务器，无需请求服务器的数据尽量不要存放在cookie中，以免影响页面性能。 可设置过期时间。	最好将cookie控制在4095B以内，超出的数据会被忽略。 IE6或更低版本最多存20个cookie； IE7及以上版本最多可以有50个；Firefox最多50个；chrome和Safari没有做硬性限制。	原生、$.cookie
localStorage	存储客户端信息，无需请求服务器。 数据永久保存，除非用户手动清理客户端缓存。 开发者可自行封装一个方法，设置失效时间。	5M左右，各浏览器的存储空间有差异。（感兴趣的同学可以自己试一下）。	localStorage.setItem('key', 'value'); let data = localStorage.getItem('key'); localStorage.removeItem('key'); localStorage.clear();
sessionStorage	存储客户端信息，无需请求服务器。 数据保存在当前会话，刷新页面数据不会被清除，结束会话（关闭浏览器、关闭页面、跳转页面）数据失效。	同localStorage	同localStorage

补充

真伪数组转换(兼容)

//真数组-->伪数组
var zhen=[1,2,3];//真数组
var wei={};//伪数组
[].push.apply(wei,zhen);
//伪数组-->真数组
var zhen=[];//真数组
var wei={'0':'wc','1':'20',length:2};//伪数组
[].slice.call(zhen,wei);

垃圾回收机制

简写：GC

无法访问的对象就是垃圾

垃圾自动会被清理掉