《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:加载图像时被中断