《JavaScript操作DOM对象总结》

《JavaScript操作DOM对象总结》
1、Document
每个载入浏览器的 HTML 文档都会成为 Document 对象，Document 对象允许我们通过脚本对页面中的所有元素进行访问和设置

注意：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

（1）集合
all[]：提供对文档中所有 HTML 元素的访问
anchors[]：返回对文档中所有 Anchor 对象的引用
links[]：返回对文档中所有 Area 和 Link 对象引用
forms[]：返回对文档中所有 Form 对象引用
images[] ：返回对文档中所有 Image 对象引用
（2）属性
body：当前文档的 元素
title：当前文档的标题
cookie：与当前文档有关的所有 cookie
domain：当前文档的域名
URL：当前文档的 URL
referrer：载入当前文档的文档的 URL
lastModified：当前文档被最后修改的时间
（3）方法
文档输出

write()：向文档写 HTML 表达式 或 JavaScript 代码
writeln()：向文档写 HTML 表达式 或 JavaScript 代码，并在每个表达式后添加一个换行符
流控制

open()：打开一个流，以收集来自 document.write() 或 document.writeln() 方法的输出
close()：关闭用 document.open() 方法打开的输出流，并显示选定的数据
获取节点

getElementById()：返回带有指定 ID 的节点
getElementsByTagName()：返回带有指定标签名称的节点列表
getElementsByClassName()：返回带有指定类名的节点列表
2、Element
Element 对象表示 HTML 元素

（1）属性
基本属性

nodeName：元素名称
nodeType：元素类型
nodeValue：元素值
元素属性

innerHTML：元素的内容

id：元素的 id 属性
title：元素的 title 属性
style：元素的 style 属性
className：元素的 class 名称
tagName：元素的 tag 名称
attributes：元素属性的 NamedNodeMap（元素属性节点的无序集合）

元素关系

ownerDocument：元素的根元素（文档对象）
parentNode：元素的父元素
firstChild：元素的第一个子元素
lastChild：元素的最后一个子元素
nextSibling：元素的后一个相邻兄弟元素
previousSibling：元素的前一个相邻兄弟元素
childNodes：元素子节点的 NodeList
元素显示

clientHeight：元素的可见高度
clientWidth：元素的可见宽度
offsetHeight：元素的高度
offsetWidth：元素的宽度
offsetLeft：元素的水平偏移位置
offsetTop：元素的垂直偏移位置
offsetParent：元素的偏移容器
tabIndex：元素的 tab 键控制次序
accessKey：元素的快捷键
（2）方法
节点操作

cloneNode()：克隆节点

appendChild()：添加子节点
removeChild()：移除子节点
replaceChild()：替换子节点
insertBefore()：插入新节点
hasChildNodes()：元素是否拥有子节点
normalize()：合并元素中相邻的文本节点，并移除空的文本节点

属性以及属性节点

hasAttribute()：元素是否拥有指定属性
hasAttributes()：元素是否拥有属性

getAttribute()：返回元素的属性值
setAttribute()：设置元素的属性值
removeAttribute()：移除元素的属性
getAttributeNode()：返回指定的属性节点
setAttributeNode()：设置指定的属性节点
removeAttributeNode()：移除指定的属性节点，并返回被移除的节点

检查

isDefaultNamespace()：检查 namespaceURI 是否为默认的
isEqualNode()：检查两个元素是否相等
isSameNode()：检查两个元素是否为相同节点
isSupported()：检查元素是否支持某一特性
其它

toString()：把元素转换为字符串
3、Attribute
Attribute 对象表示 HTML 元素的属性

（1）属性
name：属性名称
value：属性值
length：NamedNodeMap 中的节点数
isId：属性是否为 id 类型
specified：属性是否为 已指定
（2）方法
item()：NamedNodeMap 中位于指定下标的节点

getNamedItem()：获取指定的属性节点
setNamedItem()：设置指定的属性节点
removeNamedItem()：移除指定的属性节点

4、Event
Event 对象表示事件的状态，通常与函数结合使用

（1）事件句柄
鼠标

onclick：鼠标点击
ondblclick：鼠标双击
onmousedown：鼠标按键被按下
onmouseup：鼠标按键被松开
onmousemove：鼠标被移动
onmouseout：鼠标从某元素移开
onmouseover：鼠标移到某元素上
键盘

onkeydown：键盘按键被按下
onkeyup：键盘的键被松开
onkeypress：键盘按键被按下或按住
加载

onload：加载文档或图像
onunload：退出页面
onerror：加载文档或图像时发生错误
onabort：加载图像时被中断
其它

onfocus：获得焦点
onblur：失去焦点
onselect：文本被选定
onsubmit：提交按钮被点击
onchange：用户改变域的内容
onreset：重置按钮被点击
onresize：窗口或框架被调整尺寸
（2）鼠标 / 键盘属性
鼠标属性

button：当事件被触发时，鼠标的哪个按钮被点击
clientX：当事件被触发时，鼠标指针相对于浏览器页面的水平坐标
clientY：当事件被触发时，鼠标指针相对于浏览器页面的垂直坐标
screenX：当事件被触发时，鼠标指针相对于屏幕的水平坐标
screenY：当事件被触发时，鼠标指针相对于屏幕的垂直坐标
键盘属性

ctrlKey：当事件被触发时，“CTRL” 键是否被按下
altKey：当事件被触发时，“ALT” 键是否被按下

shiftKey：当事件被触发时，“SHIFT” 键是否被按下

metaKey：当事件被触发时，“meta” 键是否被按下

（3）标准属性
bubbles：事件是否为起泡事件类型
cancelable：事件是否可取消默认动作
currentTarget：返回其事件监听器触发此事件的元素
target：返回触发此事件的元素
eventPhase：返回事件传播的当前阶段
timeStamp：返回事件生成的时间
type：返回事件的名称
（4）标准方法
initEvent()：初始化属性
preventDefault()：不再执行默认动作
stopPropagation()：不再派发事件

总结：