Javascript——DOM详细

DOM简介：

文档对象(Document Object Model，简称DOM)，是WC组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口，W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树：

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中所有的标签都是元素，DOM中使用element表示
节点：网页中所有的内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示
在DOM中上面的内容都看做是对象。

目录

获取元素

事件基础

操作元素

节点操作

DOM事件流

事件对象

事件委托(代理、委派)

常用鼠标事件

常用键盘事件

---

获取元素

获取页面元素的方式：
1、根据ID获取

var element = document.getElementById(id);

element是一个Element对象，如果当前文档中拥有特定ID的元素不存在则返回null
id是区分大小写的字符串，代表所要查找的元素的唯一ID
返回第一个匹配到 ID 的 DOM Element对象，如果当前 Document 下没有找到则返回null

2、根据标签名获取

var element = document.getElementsByTagName('标签名');

他所返回的是带有指定标签名的对象集合
注意：因为得到的是一个对象的集合，所以我们要想操作里面的元素就需要遍历对象(for循环)，得到的元素对象是动态的

3、通过HTML5新增的方法获取

var element = document.getElementsByClassName('类名');

根据类名返回元素对象集合

var element = document.querySelector('选择器');

根据指定选择器返回第一个元素对象

var element = document.querySelectorAll('选择器');

根据指定选择器返回所有元素对象

获取特殊元素(body，html)
获取body元素

document.body
//返回body元素对象

获取html元素

document.documentElement
//返回html元素对象

事件基础

事件是一些可以通过脚本响应的页面动作，当用户按下鼠标、键盘，或者在页面上移动鼠标时，事件就会出现。简单来说就是触发…响应机制。

执行事件的步骤：
1、获取事件源
2、注册事件(绑定事件)
3、添加事件处理程序(采取函数赋值的形式)

Javascript中常用的事件：

	事件	说明
鼠标 键盘 事件	onclick	鼠标单击时触发此事件
	ondblclick	鼠标双击时触发此事件
	onmousedown	按下鼠标时触发此事件
	onmouseup	鼠标按下后松开鼠标时触发此事件
	onmouseover	当鼠标移动到某对象范围的上方时触发此事件
	onmousemove	鼠标移动时触发此事件
	onmouseout	当鼠标离开某对象范围时触发此事件
	onkeypress	当键盘上的某个键被按下并且释放时触发此事件
	onkeydown	当键盘上的某个按键被按下时触发此事件
	onkeyup	当键盘上的某个按键被按下后松开时触发此事件
页面 相关 事件	onabort	图片在下载时被用户中断时触发此事件
	onbeforeunload	当前页面的内容将要被改变时触发此事件
	onerror	出现错误时触发此事件
	onload	页面内容完成时触发此事件(页面加载事件)
	onresize	当浏览器的窗口大小被改变时触发此事件
	onunload	当前页面将被改变时触发此事件
表单 相关 事件	onblur	当前元素失去焦点时触发此事件
	onchange	当前元素失去焦点并且元素内容发生改变时触发此事件
	onfocus	当某个元素获得焦点时触发此事件
	onreset	当表单中RESET的属性被激活时触发此事件
	onsubmit	一个表单被提交时触发此事件
滚动 字幕 事件	onbounce	在Marquee内的内容移动至Marquee显示范围之外时触发此事件
	onfinish	当Marquee元素完成需要显示的内容后触发此事件
	onstart	当Marquee元素开始显示内容时触发此事件
编辑 事件	onbeforecopy	当页面当前被选择内容将要复制到浏览者系统的剪贴板前触发此事件
	onbeforecut	当页面中的一部分或全部内容将要被剪切到浏览者系统剪贴板时触发此事件
	onbeforeeditfocus	当前元素将要进入编辑状态时触发此事件
	onbeforepaste	将内容要从浏览者的系统剪贴板中粘贴到页面上时触发此事件
	onbeforeupdate	当浏览者粘贴系统剪贴板中的内容时通知目标对象
	oncontextmenu	当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发此事件
	oncopy	当页面当前的被选择内容被复制后触发此事件
	oncut	当页面当前的被选择内容被剪贴时触发此事件
	ondrag	当某个对象被拖动时触发此事件(活动事件)
	ondragend	当鼠标拖动结束时触发此事件，即鼠标的按钮被释放时
	ondragenter	当对象被鼠标拖动进入其容器范围内时触发此事件
	ondragleave	当对象被鼠标拖动的对象离开其容器范围内时触发此事件
	ondragover	当被拖动的对象在另一对象容器范围内拖动时触发此事件
	ondragstart	当某对象被拖动时触发此事件
	ondrop	在一个拖动过程中，释放鼠标键时触发此事件
	onlosecapture	当元素失去鼠标移动所形成的选择焦点时触发此事件
	onpaste	当内容粘贴时触发此事件
	onselect	当文本内容被选择时触发此事件
	onselectstart	当文本内容的选择将开始发生时触发此事件
数据 绑定 事件	onafterupdate	当数据完成由数据源到对象的传送时触发此事件
	oncellchange	当数据来源发生变化时触发此事件
	ondataavai