标签：
Chapter 9 文档对象模型
1、DOM树
DOM是HTML和XML文档提供的一系列API的集合。
DOM将HTML和XML文档描绘成一个由多层次节点构成的树结构，文档中所有的元素都是一个节点。
树结构的根节点（又称文档元素）有且只有一个。
HTML文档的根节点始终是<html>，XML文档则可以是任何元素。
1.1 使用nodeType检测节点类型
节点（node）一共有12种类型，每种类型用一个1~12之中的数字表示。
|
数字 |
表达式 |
说明 |
|
1 |
Node.ELEMENT_NODE |
元素类型 |
|
2 |
Node.ATTRIBUTE_NODE |
属性类型 |
|
3 |
Node.TEXT_NODE |
文本类型 |
|
4 |
Node.CDATA_SECTION_NODE |
XML文档的CDATA区域 |
|
5 |
Node.ENTITY_REFERENCE_NODE |
|
|
6 |
Node.ENTITY_NODE |
|
|
7 |
Node.PROCESSING_INSTRUCTION_NODE |
|
|
8 |
Node.COMMENT_NODE |
注释类型 |
|
9 |
Node.DOCUMENT_NODE |
文档类型 |
|
10 |
Node.DUCUMENT_TYPE_NODE |
文档属性类型 |
|
11 |
Node.DUCUMENT_FRAGMENT_NODE |
文档片段类型 |
|
12 |
Node.NOTATION_NODE |
|
操作节点前通常需要检测节点类型，原因是我们获取的子节点集合常常混合多类节点。
例如：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul有七个子节点，包括三个<li>和四个空白文本节点（但在IE看来只有三个<li>）。
1.2 节点通用的属性及方法
|
节点信息 |
标签名 |
.nodeName |
或者tagName |
|
属性值或文本 |
.nodeValue |
某些种类的节点内容，如文本节点、注释节点等 |
|
|
节点关系 |
父子关系 |
.childNodes |
由直接子元素构成的NodeList动态类数组对象。 将NodeList转换为数组： Array.prototype.slice.call(nodelist, 0) //IE8-无效 |
|
.firstChild |
相当于.childNodes[0]或.childNodes.item(0) |
||
|
.firstElementChild |
不包含文本节点 |
||
|
.lastChild |
相当于.childNodes[node.childNodes.length-1] |
||
|
.lastElementChild |
不包含文本节点 |
||
|
.parentNode |
父节点只有一个 |
||
|
.childElementCount |
返回子元素个数 |
||
|
同级关系 |
.nextSibling |
下一个相邻的同级节点 |
|
|
.nextElementSibling |
下一个相邻的元素类同级节点 |
||
|
.previousSibling |
上一个相邻的同级节点 |
||
|
.previousElementSbling |
上一个相邻的元素类同级节点 |
||
|
根元素 |
.ownerDocument |
指向根节点（文档元素） |
|
|
检测子节点 |
.hasChildNodes() |
有，则返回true；无，则返回false |
|
|
.contains() |
检测是否包含子节点。返回布尔值。 |
||
|
操作节点 |
添加子节点 |
.appendChild() |
参数是待插入的子节点 如果传入已存在的子节点，则该子节点的位置会被调到子节点序列的末尾 |
|
.insertBefore() |
两个参数，一是待插入的子节点，二是参照子节点。如果参照子节点是null，则插入到末尾 |
||
|
.replaceChild() |
两个参数：待添加子节点和被替换子节点 |
||
|
删除子节点 |
.removeChild() |
参数是待删除子节点 |
|
|
复制节点 |
.cloneNode() |
参数为布尔值 true表示深复制，复制节点本身及其全部子节点；false表示浅复制，只复制节点本身 复制后的节点必须插入文档中才有用 一般不会复制事件处理程序，然而IE除外。 |
1.3 document的属性和方法（省略了一些不常用的、浏览器支持差异大的属性)
|
属性 |
.documentElement |
得到html元素，和.childNodes[0]一样 |
|
.body |
得到body元素 |
|
|
.title |
返回或设置title内容 |
|
|
.URL |
返回完整的url地址 |
|
|
.domain |
返回域名 |
|
|
.anchors |
返回所有带name特性的<a>元素 |
|
|
.links |
返回所有带href热性的<a>元素 |
|
|
.forms |
返回所有<form>元素 |
|
|
.images |
返回所有<img>元素 |
|
|
.readyState |
返回两个值loading、complete |
|
|
.charset |
用于获取与修改字符集 |
|
|
方法 |
.getElementById() |
返回指定元素 |
|
.getElementByTagName() |
返回指定元素 |
|
|
.getElementByName() |
返回所有带name特性的元素 |
|
|
.querySelector() |
参数为CSS选择符，返回匹配模式的第一个元素 |
|
|
.querySelectorAll() |
参数同上，返回一个元素集合 |
|
|
.matchesSelector() |
参数同上，用于检测。返回布尔值 |
|
|
.getElementsByClassName() |
|
|
|
.write() |
通常用于在文档加载过程中 |
|
|
.createElement() |
参数为待创建的标签名 |
|
|
.createTextNode() |
参数为文本节点字符串 |
|
|
.scrollIntoView() |
滚动页面，让调用该方法的元素出现的视区 |
1.4 Element元素节点的属性和方法
|
可直接访问与修改的属性，是元素的标准属性，自定义属性不可直接访问（IE除外） |
.id |
|
|
.className |
|
|
|
…… |
其它标准属性 |
|
|
.style |
返回一个对象，css属性均为该对象的属性。该对象还有其它的属性及方法。 |
|
|
.onclick（事件属性） |
返回一个函数 |
|
|
属性的集合 |
.attributes |
返回包含所有特性的动态的数组 |
|
.classList 这是H5新增的用于操作类名的属性 |
.add(value) |
|
|
.contains(value) |
||
|
.remove(value) |
||
|
.toggle(value) |
||
|
获取与设置内容 |
.textContent .innerText |
获取内部所有文本并拼接成一个字符串。 设置文本时会替换掉所有子节点。 firefox不支持innerText |
|
.innerHTML |
返回或设置子节点，（包括所有子节点及其后代） |
|
|
.outerHTML |
包含本身，一般不用 |
|
|
操作属性的方法 |
.getAttribute() |
参数为特性的名称（字符串） |
|
.setAttribute() |
参数有两个：一、特性名；二、值 |
|
|
.removeAttribute() |
参数为特性的名称 |
|
|
位置与大小 |
.offsetHeight/.offsetWidth |
border-box的宽与高 |
|
.offsetTop/.offsetLeft |
相对于offsetParent的坐标 |
|
|
.clientHeight/.clientWidth |
padding-box的宽与高 |
|
|
.scrollWidth/.scrollHeight |
滚动内容的宽高 |
|
|
.scrollLeft/.scrollTop |
滚动的位置 |
1.5 Text文本节点的属性和方法
|
访问、设置与修改文本 |
.nodeValue .data |
注：空白也是文本 |
|
文本的字符数 |
.length |
|
|
操作文本的方法 |
.appendData(text) |
|
|
.deleteData(offset,count) |
从offset处开始删除count个字符 |
|
|
.insertData(offset,text) |
在指定offset处插入指定文本 |
|
|
.replaceData(offset,count,text) |
替换文本 |
|
|
.splitText(offset) |
分割文本 |
|
|
.substringData(offset,count) |
提取某段文本 |
|
|
.normalize() |
用在文本节点父元素上。合并相邻文本子节点，删除空文本节点。 |
2、事件
2.1 事件类型
|
UI事件 |
load |
所有资源加载完毕时触发 |
window |
|
DomContentLoaded |
形成DOM树后即触发 |
document |
|
|
unload |
从一个页面切换到另一个页面时触发 |
window |
|
|
beforeunload |
用户跳转页面前触发 |
window |
|
|
resize |
窗口大小变化时触发 |
window |
|
|
scroll |
页面滚动时触发 |
window |
|
|
haschange |
URL中#号后的字符串发生变化时触发 |
window |
|
|
表单事件 |
focus |
|
不冒泡 |
|
blur |
|
不冒泡 |
|
|
focusin |
|
冒泡 |
|
|
focusout |
|
冒泡 |
|
|
change |
对于文本字段，当失去焦点且value值变化时触发；对于select字段，当选项变化时触发 |
|
|
|
submit |
只有包含提交按钮的情况下，才可能触发submit事件。该事件在提交数据之前触发，可用于表单验证 |
form |
|
|
鼠标与滚轮事件 |
click |
|
冒泡 |
|
dblclick |
|
冒泡 |
|
|
mousedown |
|
冒泡 |
|
|
mouseup |
|
冒泡 |
|
|
mouseenter |
|
不冒泡 |
|
|
mouseleave |
|
不冒泡 |
|
|
mouseover |
从一个元素移入到目标元素内时触发 |
冒泡 |
|
|
mouseout |
从当前元素移出到另一个元素时触发，包括子元素 |
冒泡 |
|
|
mousemove |
在指定元素内部移动时重复性触发 |
冒泡 |
|
|
mousewheel |
鼠标滚轮事件 |
|
|
|
contextmenu |
鼠标右键点击时触发。可用于自定义右键菜单。 |
|
|
|
键盘与文本事件 |
keydown |
|
先 |
|
keypress |
|
中 |
|
|
keyup |
|
后 |
|
|
textInput |
在可编辑区输入字符时触发 |
|
|
|
触摸事件 |
touchstart |
|
冒泡 |
|
touchmove |
用preventDefault阻止滚动 |
冒泡 |
|
|
touchend |
|
冒泡 |
|
|
gesturestart |
两根手指触摸时触发 |
冒泡 |
|
|
gesturechange |
|
冒泡 |
|
|
gestureend |
|
冒泡 |
|
|
设备事件 |
例如屏幕的方向、设备的空间运动状态 |
||
|
其它事件 |
DomNodeRemoved |
删除节点时，相继触发DomNodeRemoved、DomNodeRemovedFromDocument和DomSubtreeModified |
|
|
DomNodeInserted |
插入节点时，相继触发DomNodeInserted、DomNodeInsertedIntoDocument和DomSubtreeModified |
|
|
2.2 事件对象 Event Object
每一种事件都存在一个事件对象，该对象的属性中保存了与该事件相关的一些数据，同时还保存着一些方法。不同的事件其事件对象的属性值有所不同，主要有这么几类：
|
公共 |
bubbles |
是否冒泡。布尔值 |
|
cancelable |
可否阻止默认行为。布尔值 |
|
|
target |
触发事件的实际目标元素 |
|
|
currentTarget |
注册事件的元素 |
|
|
type |
事件类型 |
|
|
preventDefault() |
阻止默认行为 |
|
|
stopPropagation() |
停止冒泡 |
|
|
stopImmediatePropagation() |
停止冒泡及事件处理程序 |
|
|
鼠标事件 |
clientX，clientY |
浏览器可视区内的坐标 |
|
pageX，pageY |
页面坐标 |
|
|
screenX，screenY |
电脑屏幕下的坐标 |
|
|
shiftKey，ctrlKey，altKey，metaKey |
布尔值 |
|
|
button |
鼠标按钮。只有mousedown和mouseup有这个属性值 |
|
|
键盘事件 |
keyCode |
键码。keydown和keyup |
|
charCode |
字符编码。keypress |
2.3 事件流 Event Flow
由于html中存在大量嵌套、层叠关系，因此必须规定某种顺序去查询究竟是谁绑定了这个事件，从而才能触发相应的事件处理程序。这个顺序（事件传播机制）被称为“事件流”。
事件流有三种类型：
事件冒泡。从事件发生的最具体的节点开始，沿着DOM树向上依次查询，直到body => html => document。
事件捕获。与事件冒泡刚好相反。
DOM事件流。DOM事件流规定了三个阶段：捕获，目标和冒泡。为啥要这样设计一个看似多余的“捕获”阶段，《JavaScript权威指南》中的解释是：捕获阶段提供了在事件传播到目标之前将其拦截（捕获）的机会。
2.5 事件处理程序 Event Handler
事件处理程序就是对事件的响应动作，用on+事件名称表示，如onclick，onload等。
事件绑定Event Register
方式一：直接在HTML标签中添加事件属性。
如：<input onclick=＂submit()＂>，引号里是js代码。
这里可以在函数中直接访问自身的属性。
如：<div id=＂hello＂ onclick=＂alert(id)＂></div> // hello
方式二：DOM0级事件处理程序，给元素绑定事件方法。
var el = document.getElementById(＂ID＂);
el.onclick = fucntion(){}
方式三：DOM2级事件处理程序，addEventListener()和removeEventListener()
接受三个参数：事件名称，事件处理程序，布尔值(true表示捕获阶段调用，false表示冒泡阶段调用)
如果要用removeEventListener()删除某个事件处理程序，必须保证其参数与addEventListener()完全一致，而且如果事件处理程序使用的是匿名函数，是无法删除的。
方式四：自定义
因为IE定义了自己的注册事件处理程序的函数，为了实现兼容，就只好自定义方法。
见《高级》P360
方式五：事件委托Event Delegation
利用事件冒泡，将事件绑定在父元素上，由父元素统一监听事件，在事件传播的路上恭候事件的到来。这样所有子元素都可以利用父元素的事件来触发js代码的执行，这就是事件委托（或称为事件代理）。相比于给每个元素单独绑定同样的事件类型，这么做的好处是：第一DOM查询量更少，因而事件就绪的时间就更块；第二内存消耗更小，因为事件处理程序更少。
3、表单
3.1 基本操作
|
操作表单 |
获取表单 |
document.getElementById() document.forms[index]或document.forms[name] |
|
提交表单 |
使用提交按钮（有三种） form.submit() |
|
|
重置表单 |
使用重置按钮 form.reset() |
|
|
操作字段 |
获取表单元素（又称表单字段） |
document.getElementById() form.elements[index]或form.elements[name] 如果有多个name相同的元素，则返回一个nodelist 注：form指获取的表单，下同 |
|
disabled |
el.disabled = true; // 禁用字段 |
|
|
value、type、name |
可直接访问与修改 |
|
|
公共方法 |
focus() |
|
|
blur() |
|
3.2 文本框
|
选择所有文本 |
.select() |
|
|
操作剪贴板 |
|
有相关事件可用于操作剪贴板，还可以通过clipboardData对象操作剪贴板内容 浏览器实现差异较大，在此略 |
|
H5验证API |
必填项 |
<input type=＂text＂ required> |
|
新增type |
如email、url，其它还有一些，但支持情况不好 |
|
|
数值范围 |
<input type=＂text＂ min=＂0＂ max=＂10＂> |
|
|
输入模式 |
pattern属性，用正则表达式 |
|
|
有效性检测 |
以上方法并不能阻止用户输入不符合规定的值，只能用表单字段的有效性验证方法checkValidity()来处理，该方法返回布尔值 |
3.3 选择框
|
select选择框的属性和方法 |
add(newOption, relOption) |
在relOption之前插入新的option元素 |
|
remove(index) |
删除指定option，index从0计算 |
|
|
options |
option节点集合，可通过options[index]访问 |
|
|
selectedIndex |
选中项的索引，若无，返回-1 |
|
|
option的属性 |
index |
当前项的索引 |
|
selected |
返回布尔值。当前项是否选中 |
|
|
text |
当前项的文本 |
|
|
value |
当前项的value |
Kidney日拱一卒JavaScript系列Chapter9 DOM
标签：
原文地址：http://www.cnblogs.com/kidney/p/5703667.html
