文档对象模型速览

什么是文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。
它可以动态的访问程序和脚本，更新其内容、结构和www文档的风格。文档可以进一步被处理，处理的结果可以加入到当前页面
DOM是一种基于树的API文档，他要求在处理过程中整个文档都表示在储存器中。

DOM树

通过可编程的对象模型，javascript获得了足够的能力来创建动态的HTML
javascript能够改变页面中的所有HTML元素
javascript能够改变页面中的所有HTML属性
javascript能够改变页面中的所有css样式
javascript能够对页面中的所有事件作出反应

document对象

每个载入浏览器的HTML文档都会成为Document对象
Document对象是我们可以从脚本中对HTML页面中的所有元素进行访问

dom对象属性

属性	描述
domain	返回当前文档的域名
lastModified	返回文档被最后修改的日期和时间
referrer	返回载入当前文档的文档的URL
title	返回当前文档的标题
URL	返回当前文档的URL
cookie	设置或返回与当前文档有关的所有 cookie。
body	提供对 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 frameset。

dom对象方法

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式 或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

不得不承认，这个帖子我是按照当时学习前端的笔记重构的，当时的笔记也都是看的w3c，有些方法例如常用的querySelector()w3c上dom篇章，仍没有更新；而后又参看了mdn,试验阶段或已经加入标准的比这两个表中列举的多得多；我认为哪怕业务中不会用的到还是需要知道一下，多了解一些对开阔思路还是很有帮助的；

Element对象

在HTML DOM中，Element对象表示HTML元素。
Element对象可以拥有类型为元素节点，文本节点、注释节点的子节点。
NodeList对象表示节点列表，比如HTML元素的子节点集合。

element对象属性

获取元素相关

属性/方法	描述
element.firstChild	返回元素的首个子元素
element.lastChild	返回元素的最后一个子元素
element.nextSibling	返回位于相同节点树层级的下一个节点
element.previousSibling	返回位于相同节点树层级的前一个元素
element.parentNode	返回元素的父节点
element,childNodes	返回元素子节点的NodeList
nodelist.length	返回NodeList中的节点数

属性相关的

属性/方法	描述
element.id	设置或返回元素的id
element.className	设置或返回元素的class属性
element.title	设置或返回元素的title属性
element.style	设置或返回元素的style属性
element.tagName	返回元素的标签名
element,nodeType	返回元素的节点类型
element.nodeValue	设置或返回元素值
element.innerHTML	设置或返回元素的内容

位置相关的

属性/方法	描述
element.clientHeight	返回元素的可见高度。
element.clientWidth	返回元素的可见宽度。
element.offsetHeight	返回元素的高度
element.offsetWidth	返回元素的宽度
element.offsetLeft	返回元素左边缘与视图之间的距离
element.offsetTop	返回元素上边缘与视图之间的距离

属性相关的

属性/方法	描述
element.hasAttribute()	如果元素拥有指定属性，则返回true，否则返回false
element.getAttribute()	返回元素节点的指定属性值
element.setAttribute()	把指定属性设置或更改为指定值
element.removeAttribute()	从元素中移除制定属性
element.hasAttributes()	如果元素拥有属性，则返回true,否则返回false

节点相关的

属性/方法	描述
element.getElementsByTagName（）	返回拥有指定标签名的所有子元素的集合
element.hasChildNodes()	如果元素拥有子节点，则返回true，否则false
nodelist.item()	返回NodeList中位于指定下表的节点
element.cloneNode()	克隆元素
element.appendChild()	向元素添加新的子节点，作为最后一个节点
element.insertBefore()	在指定的已有的子节点之前插入新节点
element.removeChild()	从元素中移除子节点
element.replaceChild()	替换元素中的子节点

节点类型

Node Types

节点类型	描述/子节点
Element	代表元素/Element，Text，Comment，ProcessingIstruction，CDATASection，EntityReference
Attr	代表属性/Text，EntityReference
Text	代表元素或属性中的文本内容/None
CDATASection	代表文档中的CDATA部分（不会由解析器解析的文本）/None
EntityReference	代表实体引用/Element，ProcessingIstruction，Comment，Text，CDATASection，EntityReference
Entity	代表实体/Element，ProcessingIstruction，Comment，Text，CDATASection，EntityReference
ProcessingIstruction	代表处理指令/None
Comment	代表注释/None
Document	代表整个文档（DOM树的根节点）/Element，ProcessingIstruction，Comment，DocumentType
DocumentType	向为文档定义的实体提供接口/None
DocumentFragment	代表轻量级的Document对象能够容纳文档的某个部分/Element，ProcessingIstruction，Comment，Text，CDATASection，EntityReference
Notation	代表DTD中声明的符号/None

Event对象

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！

表单相关的事件

属性	此事件发生在何时
onfocus	元素获得焦点
Onblur	元素失去焦点
onchange	元素内容被改变
onsubmit	表单提交事件

onfocus（）

定义和用法
onfocus事件在对象获得焦点时发生
语法

	node.onfocus=function(){}

支持该事件的javascript对象
button\checkbox\password\radio\reset\select\submit\text\textarea\window

onblur()

定义和用法
onblur事件会在对象失去焦点是发生
语法

	node.onblur()=function(){}

支持该事件的JavaScript对象：
button,checkbox,fileUpload,layer,frame,password,radio,reset,submit,text,textarea,window

onchange（）

定义和用法
onchange事件会在域的内容改变时发生
语法

	node.onchange=function(){}

支持该事件的HTML标签：
input type=“text”;select;textarea

onsubmit()

定义和用法
onsubmit事件会在表单中的确认按钮被点击时发生
语法

	formnode.onsubmit=function(){}

支持该事件的HTML标签：
form

鼠标相关事件

属性	此事件发生在何时
onclick（）	当用户点击某个对象时调用的事件句柄
ondblclick（）	当用户双击某个对象时调用的时间句柄
onmousedown()	鼠标按钮按下
onmouseup()	鼠标按键被松开
onmouseover()	鼠标移到某元素之上
onmousemove()	鼠标移动
onmouseout()	鼠标从某元素移开

键盘相关的事件

属性	此事件发生在何时
onkeypress	某个键盘按键被按下并松开
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开
str.charCodeAt(i)>255	判断中文符

其他事件

属性	此事件发生在何时
Onload	一张页面或一副图像完成加载
onresize	窗口或框架被重新调整大小
Onabort	图像的加载被中断
Onerror	在加载文档或图像时发生错误
Onselect	文本被选中
Onunload	用户退出页面
onload	是页面样式js等全部加载完成才会触发事件
document.ready	页面的结构DOM树加载完成执行

鼠标或键盘事件发生时产生的相关属性

属性	描述
clientX	返回当事件被触发时，鼠标指针的水平坐标
clientY	返回当事件被触发时，鼠标指针的垂直坐标
altKey	返回当事件被触发时，“ALT”是否被按下
ctrlKey	返回当事件被触发时，“CTRL”键是否被按下
shiftKey	返回当事件被触发时，“SHIFT”键是否被按下

Event事件属性

属性	描述
currentTarget	返回其事件监听器触发该事件的元素
eventPhase	返回事件传播的当前阶段
target	返回触发此事件的元素（事件的目标节点）
type	返回当前Event对象表示的事件的名称

Event事件相关方法

属性	描述
preventDefault（）	通知浏览器不要执行与事件关联的默认动作
stopPropation（）	不再派发事件。

事件流-Event事件处理的三个阶段

1.DOM0级事件

	var div = document.getElementById('div');
	div.onclick = function(){
		console.log('这是一个DOM0级事件');
	}
	function myfun(){
		console.log('这是一个DOM0级事件');		
	}

优点：极好的跨浏览器优势，会以最快的速度绑定
缺点：只能绑定一次，多次绑定只有最后一次生效，之前定义的会被覆盖

1.5.DOM1级事件

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的2级DOM事件模型

2.DOM2级事件

DOM2级事件规定事件包括三个阶段
①事件捕获阶段
②处于目标阶段
③事件冒泡阶段
ie8之前没dom事件流啥事

DOM2级事件 注册事件的方法

ele.addEventListener(eventType,eventHandler,eventPhase)；

参数	描述	例
eventType	事件类型	click,mousedown
eventHandler	事件的处理函数	function
eventPhase	事件在哪个阶段执行	true：在捕获阶段执行；false：在冒泡阶段执行

	var el = document.getElementById('div');
	el.addEventListener('click',function(){
		console.log('这是一个dom2级事件');
	},true);

阻止事件冒泡

方法	描述
stopPropagation()	不再派发事件

事件代理

	render:()=>{
		return `<ul id='ul'>
					<li>111</li>
					<li>222</li>
					<li>333</li>
				</ul>`
	}
	var el = document.getElementById('ul');
	el.onclick = function (e) {
		if (e.target.nodeName == 'LI') { console.log(e.target.innerHTML) }
	}

Event事件属性

属性	描述
currentTargget	返回其事件监听器触发该事件的元素
eventPhase	返回事件传播的当前阶段
target	返回触发此事件的元素（事件的目标节点）
type	返回当前Event对象表示的事件的名称

DOM2级事件

优点
1可以大量节省内存占用，减少事件注册
2可以方便的动态添加和修改元素，不需要因为元素的改动而修改事件绑定
3javascript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生概率
4可以给同一元素绑定多个事件，解决了多人协作的问题
缺点
不是所有的时间都能冒泡的。blur、focus、load和unload不能像其他事件一样冒泡
DOM2级事件IE兼容性

	btn.attachEvent('onclick',handler)；
	function handler(e){
		alert(this);
	}
	function addHandler(element,type,handler){
		if(element.addEventListener){
			elent.addEventListener(type,handler,false);
		}else if(element.attachEvent){
			element.attachEvent('on'+type,handler);
		}
	}

DOM2级删除事件绑定

	function removeHandler(element,type,handler){
		if(element.removeEventListener){
			element.removeEventListener(type,handler,false);
		}else if(element.detachEvent){
			element.detachEvent('on'+type,handler);
	}}

DOM2级事件阻止冒泡

	function stopPropagation(event){
		if(event.stopPropagation){
			event.stopPropagation();
		}else{
			event.cancelBubble=true;
		}
	}