HTML DOM对象

HTML DOM对象

Document对象
每个载入浏览器的HTML文档都会成为Document对象
Document对象让我们可以从javascript中操作文档中的所有元素
Document对象是window对象的一部分，可以通过window.document 对其进行访问

Document对象集合
all[]                提供对文档中所有html元素的访问，返回数组
anchors[]            返回文档中所有Anchor对象(锚点)的引用，返回数组
applets             返回文档中所有applet对象的引用
forms[]                返回文档中所有form对象的引用
images[]            返回文档中所有image对象引用
links[]                返回文档中所有 Area 和 Link对象引用

Document对象属性
body                 对body元素的直接访问，对于定义了框架集的文档，该属性引用最外层的 frameset
cookie                设置或返回当前文档有关的所有cookie，可读可写
domain                 返回当前文档的域名
lastModified         返回文档被最后修改的时间和日期
referrer             返回载入当前文档的文档的URL
title                 返回当前文档的标题
URL                 返回当前文档的URL，当前实际显示的URL

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

Element对象
Element对象 表示 HTML元素
NodeList 对象表示节点列表，比如HTML元素的子节点集合
所有浏览器都支持 Element对象 和 NodeList对象
属性和方法
element.accessKey                        设置或返回元素的快捷键
element.appendChild()                     向元素添加最后一个子节点，作为最后一个子节点
element.attributes                         返回元素属性的集合
element.childNodes                         返回元素子节点的节点列表
element.className                         设置或返回元素的class属性

element.clientHeight                     返回元素的可见高度(不包括padding以外的，包括padding)
element.clientWidth                     返回元素的可见宽度

element.cloneNode()                     创建节点的拷贝，并返回该副本，如需要克隆所有后代，需要参数true，如果只需要克隆节点以及后代（不包括属性值），设置为false。
element.compareDocumentPosition()         比较两个元素的文档位置
element.contentEditable                 设置或返回元素内容是否可编辑，true 是可编辑
element.dir                             设置或返回元素的文本方向
element.firstChild                         返回指定节点的首个子节点
element.getAttribute()                    返回元素节点的指定属性值
element.getAttributeNode()                 返回指定的属性节点（和getAttribute类似）
element.getElementsByTagName()            返回指定标签名的集合，return 数组
element.getFeature()                     返回实现了指定特性的API的某个对象
element.getUserData()                     返回关联元素上键的对象
element.hasAttribute()                    如果元素拥有指定属性，则返回true，否则返回false
element.hasAttributes()                    如果元素拥有属性，则返回true，否则返回false，检测元素是否拥有属性
element.hasChildNodes()                 如果元素有子节点，则返回true，否则false，检测元素是否有子节点
element.id                                 设置或返回元素的id

element.innerHTML                        设置或返回元素的内容
element.insertBefore()                     在指定的已有的子节点前插入新节点
element.isContentEditable                 返回元素的内容是否可编辑
element.isDefaultNamespace()             如果指定的namespaceURL是默认的，则返回true，否则返回false
element.isEqualNode()                     检查两个元素是否相等
element.isSameNode()                     检查两个元素是否是相同的节点
element.isSupported()                     如果元素支持指定特性，则返回true
element.lang                             设置或返回元素的语言代码
element.lastChild                         返回元素的最后一个子元素
element.namespaceURI                     返回元素的namespace URI
element.nextSibling                        返回位于相同节点树层级的下一个节点，返回列表项的下一个同胞
element.nodeName                         返回元素的名称
element.nodeType                         返回元素的节点类型
element.nodeValue                         设置或返回元素值
element.normalize()                     合并元素中相邻的文本节点，并移除空的文本节点，个人理解恢复原文本节点数（这个很有意思哦）

element.offsetHeight                    返回元素的高度(包括border)
element.offsetWidth                     返回元素的宽度
element.offsetLeft                         返回元素的水平偏移位置(根据body来计算这个偏移)
element.offsetTop                         返回元素的垂直偏移位置
element.offsetParent                     返回元素的偏移容器（偏移容器是body）

element.ownerDocument                     返回元素的根元素（文档对象）
element.parentNode                         返回元素的父节点，如果没有父节点，则返回null
element.previousSibling                 返回位于相同节点树层级的前一个元素，返回列表项的上一个同胞
element.removeAttribute()                 从元素中移除指定属性
element.removeAttributeNode()             移除指定的属性节点，并返回被移除的节点
element.removeChild()                     从元素中移除子节点
element.replaceChild()                     替换元素中的子节点
element.scrollHeight                     返回元素的整体高度（不包括border，包括padding）
element.scrollLeft                         返回元素左边缘与视图之间的距离
element.scrollTop                         返回元素上边缘与视图之间的距离（子元素超过当前元素的高度）一定是超过本元素的哦
element.scrollWidth                     返回元素的整体宽度

element.setAttribute()                     把指定属性设置或更改为指定值
element.setAttributeNode()                 设置或更改指定属性节点
element.setIdAttribute()                 
element.setIdAttributeNode()
element.setUserData()                     把对象关联到元素的键
element.style                             设置或返回元素的style属性
element.tabIndex                        设置或返回元素的tab键控制次序
element.tagName                         返回元素的标签名
element.textContent                     设置或返回节点以及其后代的文本内容
element.title                             设置或返回元素的title属性
element.toString()                         把元素转换为字符串
nodelist.item()                         返回NodeList中位于指定下标的节点
nodelist.length                            返回NodeList中的节点数

Attribute 对象（属性对象）
NamedNodeMap 对象表示元素属性节点的无序集合，可以通过名称和索引来访问
属性/方法
attr.isId                                 查明属性是否是元素的id属性，是则返回true，否则返回false
attr.name                                 返回属性的名称
attr.value                                 设置或返回属性的值
attr.specified                            是否制定某个属性，如果指定返回true，否则返回false

nodemap.getNameItem()                     从 NameNodeMap 返回指定的属性节点
nodemap.item()                             从 NameNodeMap 中位于指定下标的节点
nodemap.length                             返回 NamedNodeMap 中的节点数
nodemap.removeNamedItem()                 移除指定的属性节点，和返回指定的属性节点相对应
nodemap.setNamedItem()                     设置指定的属性节点(通过名称)，如果此节点已存在，则将特换该节点，并返回被替换的节点，否则返回null

event 对象（事件）
事件通常与函数结合使用，函数通常在事件后执行
********事件发生在何时。。时间句柄 ***********
onabort                            图像的加载被中断时发生
onblur                            元素失去焦点时
onchange                        域的内容被改变时
onclick                         当用户点击某个对象时调用的事件句柄
ondblclick                        当用户双击某个对象时调动的事件句柄
onerror                            在加载文档或图像时发生错误(例如引入的图片不存在)
onfocus                         对象获得焦点
onkeydown                         某个键盘键被按下
onkeypress                        某个键盘按键被按下并松开
onkeyup                         某个键盘按键被松开
onload                             一张页面或一副图像完成加载
onmousedown                     鼠标按钮被按下
onmousemove                     鼠标被移动(在元素上就一直有效)
onmouseout                         鼠标从某元素移开
onmouseover                     鼠标移到某元素之上
onmouseup                         鼠标按键被松开
onreset                         重置按钮被点击
onresize                         窗口或框架被重新调整大小时发生，window对象
onselect                        文本被选中
onsubmit                         表单的确认按钮被点击时发生
onunload                         用户退出页面时发生 （无法使用）

鼠标/键盘属性
altKey                            返回当事件被触发时，alt是否被按住，返回布尔值
button                            返回当事件被触发时，哪个鼠标按钮被点击（0 是鼠标左键，1 是鼠标中键，2是鼠标右键）
IE 下 （1是鼠标左键， 4是鼠标中键， 2是鼠标右键）， 火狐的 ctrl + click 参数是2（等价于右键）
clientX                            返回当前事件触发时，鼠标指针的水平坐标(相对于浏览器边缘来说的)
clientY                            返回当前事件触发时，鼠标指针的垂直坐标
metaKey                            返回当前事件触发时，meta 键是否被按下，不支持 IE
relatedTarget                    返回与事件的目标节点相关的节点
screenX                            返回当某个事件触发时，鼠标指针的水平坐标(相对于视口的：例如浏览器)
screenY                            返回当某个事件触发时，鼠标指针的垂直坐标
shiftKey                        返回当事件被触发时， shift 键是否被按下

IE属性
除了上面的鼠标/事件属性，IE还支持下面的属性
cancelBubble                    如果事件句柄想阻止事件传播到包容对象，必须将该属性设置为true
fromElement                        对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode                            对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY                    发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue                        如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement                        对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement                        对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y                                事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

标准 Event属性（2级DOM事件标准定义的属性）
bubbles                            指定事件是否是起泡事件类型，返回布尔值。IE不支持
cancelable                        指定事件是否拥有可取消的默认动作，返回布尔值。IE不支持
currentTarget                    返回其事件监听器触发该事件的元素，个人理解：就是返回当前触发事件的元素
eventPhase                        返回事件传播的当前阶段，分别为捕获阶段、正常事件派发和起泡阶段
Event.CAPTURING_PHASE            1
Event.AT_TARGET                    2
Event.BUBBLING_PHASE            3
target                             返回触发此事件的元素（事件的目标节点）
timeStamp                         返回事件生成的日期和事件、返回系统启动至今的分钟数(IE不支持)，并非所有系统都提供该信息
type                             返回当前event事件表示的事件名称（IE不支持）

标准Event方法（2级DOM事件标准定义的方法，IE的时间模型不支持这些方法）
initEvent()                        初始化新创建的Event对象的属性
preventDefault()                 取消事件的默认动作
stopPropagation()                 不再派发事件，终止事件在传播过程的捕获，目标处理或起泡阶段进一步传播

事件传播：
在2级DOM中，事件传播分为三个阶段
第一，捕获阶段。事件从Document对象沿着文档树向下传递给目标节点，如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。
第二个阶段发生在目标节点自身，直接注册砸目标上的适合的事件句柄将运行。这与0级事件模型提供的事件处理方法相似
第三，起泡阶段，在此阶段，事件将从目标元素向上传播回或起泡回Document对象的文档层次