文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。
DOM——Document对象
名称 |
说明 |
返回 |
activeElement |
返回代表文档中当前获得焦点元素的对象 |
HTMLElement |
body |
返回代表文档中body元素的对象 |
HTMLElement |
characterSet |
返回文档的字符集编码,只读属性。 |
字符串 |
charset |
获取或设置文档的字符集编码,自读 |
字符串 |
childNodes |
返回子元素的集合 |
HTMLElement[ ] |
compatMode |
返回文档的兼容性模式 |
字符串 |
cookie |
获取或设置当前文档的cookie |
字符串 |
defaultCharset |
获取浏览器所使用的默认字符编码 |
字符串 |
defaultView |
返回当前文档的Window对象 |
Window |
dir |
获取或设置文档的文本方向 |
字符串 |
domain |
获取或设置当前文档的域名 |
字符串 |
embeds |
返回所有代表文档中embed元素的对象 |
HTMLCollection |
plugins |
返回对文档中所有嵌入式对象的引用 |
plugins[ ] |
firstChild |
返回某个元素的第一个子元素 |
HTMLElement |
forms |
返回所有代表文档中form元素的对象 |
HTMLCollection |
getElementById(<id>) |
返回带有指定id值得元素 |
HTMLElement |
getElementByClassName(<class>) |
返回带有指定class值得元素 |
HTMLElement[ ] |
getElementByName(<name>) |
返回带有指定name值得元素 |
HTMLElement[ ] |
getElementByTagName(<tag>) |
返回带有指定类型的元素 |
HTMLElement[ ] |
hasChildNodes() |
如果当前元素有子元素则返回true |
布尔值 |
head |
返回代表head元素的对象 |
HTMLHeadElement |
images |
返回所有代表img元素的对象 |
HTMLCollection |
implementation |
提供关于DOM可用功能的信息 |
DOMImplementation |
lastChild |
返回最后一个子元素 |
HTMLElement |
lastModified |
返回文档的最后修改时间 |
字符串 |
links |
返回所有代表文档中具备href属性的a和area元素的对象 |
HTMLCollection |
location |
提供关于当前文档URL的信息 |
Location |
nextSibling |
返回位于当前元素之后的兄弟元素 |
HTMLElement |
parentNode |
返回父元素 |
HTMLElement |
previousSibling |
返回位于当前元素之前的兄弟元素 |
HTMLElement |
querySelector(<selector>) |
返回匹配特定CSS选择器的第一个元素 |
HTMLElement |
querySelectorAll(<selector>) |
返回匹配特定CSS选择器的所有元素 |
HTMLElement[ ] |
readyState |
返回当前文档的状态 |
字符串 |
referrer |
返回链接到当前文档的文档URL,对应HTTP标头的值 |
字符串 |
scripts |
返回所有代表script元素的对象 |
HTMLCollection |
title |
获取或设置当前文档的标题 |
字符串 |
DOM——Location对象
名称 |
说明 |
返回 |
assign(<URL>) |
导航到指定的URL上 |
void |
hash |
获取或设置文档URL的锚(井号串)部分 |
字符串 |
host |
获取或设置文档URL的主机名和端口号 |
字符串 |
hostname |
获取或设置文档URL的主机名部分 |
字符串 |
href |
获取或设置当前文档的地址 |
字符串 |
pathname |
获取或设置文档URL的路径部分 |
字符串 |
port |
获取或设置文档URL的端口号部分 |
字符串 |
protocol |
获取或设置文档URL的协议部分 |
字符串 |
reload() |
重新加载当前文档 |
void |
replace(<URL>) |
清除当前文档并导航至URL所指定的新文档 |
void |
resolveURL(<URL>) |
将指定的相对URL解析为绝对URL |
字符串 |
search |
获取或设置文档URL的查询(问号串)部分 |
字符串 |
DOM——Window对象
名称 |
说明 |
返回 |
alert(<msg>) |
向用户显示一个对话框窗口并等候其被关闭 |
void |
blur() |
让窗口失去键盘焦点 |
void |
clearInterval(<id>) |
撤销某个时间间隔计时器 |
void |
clearTimeout(<id>) |
撤销某个超时计时器 |
void |
close() |
关闭窗口 |
void |
confirm(<msg>) |
显示一个带有确认和取消提示的对话框窗口 |
布尔值 |
defaultView |
返回活动文档的Window |
Window |
document |
返回与此窗口关联的Document对象 |
Document |
focus() |
让窗口获得键盘焦点 |
void |
frames |
返回文档内嵌iframe元素的Window对象数组 |
Window[ ] |
history |
提供对浏览器历史的访问 |
History |
innerHeight |
获取窗口内容区域的高度 |
数值 |
innerWidth |
获取窗口内容区域的宽度 |
数值 |
length |
返回文档内嵌的iframe元素数量 |
数值 |
location |
提供当前文档地址的详细信息 |
Location |
opener |
返回打开当前浏览器上下文环境Window |
Window |
outerHeight |
获取窗口的高度,包括边框和菜单栏等 |
数值 |
outerWidth |
获取窗口的宽度,包括边框和菜单栏等 |
数值 |
pageXOffset |
获取窗口从左上角算起水平滚动过的像素数 |
数值 |
pageYOffset |
获取窗口从左上角算起垂直滚动过的像素数 |
数值 |
parent |
返回当前Window的父Window |
Window |
postMessage(<msg>,<origin>) |
给另一个文档发送消息 |
void |
print() |
提示用户打印页面 |
void |
prompt(<msg>,<val>) |
显示对话框,提示用户输入一个值 |
字符串 |
screen |
返回一个描述屏幕的Screen对象 |
Screen |
screenLeft |
获取从窗口左边缘到屏幕左边缘的像素数 |
数值 |
screenTop |
获取从窗口上边缘到屏幕上边缘的像素数 |
数值 |
scrollBy(<x>,<y>) |
让文档相对其当前位置进行滚动 |
void |
scrollTo(<x>,<y>) |
滚动到指定的位置 |
void |
self |
返回当前文档的Window |
Window |
setInterval(<function>,<time>) |
创建一个计时器,每隔time毫秒调用指定的函数 |
整数 |
setTimeout(<function>,<time>) |
创建一个计时器,等待time毫秒调用指定的函数 |
整数 |
showModalDialog(<url>) |
弹出一个窗口,显示指定的URL |
void |
stop() |
停止载入文档 |
void |
top |
返回最上层的Window |
Window |
DOM——History对象
名称 |
说明 |
返回 |
back() |
在浏览器历史里后退一步 |
void |
forward() |
在浏览器历史里前进一部 |
void |
go(<index>) |
转到相对于当前文档的某个浏览历史位置。正值是前进,负值是后退。 |
void |
length |
返回浏览器历史里的项目数量 |
数值 |
pushState(<state>,<title>,<url>) |
向浏览器历史添加一个条目 |
void |
replaceState(<state>,<title>,<url>) |
替换浏览器历史中的当前条目 |
void |
state |
返回浏览器历史里关联当前文档的状态数据 |
对象 |
DOM——Screen对象
名称 |
说明 |
返回 |
availHeight |
返回屏幕上可供显示窗口部分的高度(排除工具栏之类) |
数值 |
availWidth |
返回屏幕上可供显示窗口部分的宽度(排除工具栏之类) |
数值 |
colorDepth |
返回屏幕的颜色深度 |
数值 |
height |
返回屏幕的高度 |
数值 |
width |
返回屏幕的宽度 |
数值 |
DOM——HTMElement对象
名称 |
说明 |
返回 |
checked |
获取或设置checked属性的存在状态 |
布尔值 |
classList |
获取或设置元素所属类的列表 |
DOMTokenList |
className |
获取或设置元素所属类的列表 |
字符串 |
dir |
获取或设置dir属性的值 |
字符串 |
disabled |
获取或设置disabled属性的存在状态 |
字符串 |
hidden |
获取或设置hidden属性的存在状态 |
字符串 |
id |
获取或设置id属性的值 |
字符串 |
lang |
获取或设置lang属性的值 |
字符串 |
spellcheck |
获取或设置spellcheck属性的存在状态 |
布尔值 |
tabIndex |
获取或设置tabindex属性的值 |
数值 |
tagName |
返回标签名(象征元素的类型) |
字符串 |
title |
获取或设置title属性的值 |
字符串 |
add(<class>) |
给元素添加指定的类 |
void |
contains(<class>) |
如果元素属于指定的类则返回true |
布尔值 |
length |
返回元素所属类的数量 |
数值 |
remove(<class>) |
从元素上移除指定的类 |
void |
toggle(<class>) |
如果类不存在就添加它,如果存在就移除它 |
布尔值 |
attributes |
返回应用到元素上的属性 |
Attr[ ] |
dataset |
返回以data-开头的属性 |
字符串数组[<name>] |
getAttribute(<name>) |
返回指定属性的值 |
字符串 |
hasAttribute(<name>) |
如果元素带有指定属性则返回true |
布尔值 |
removeAttribute(<name>) |
从元素上移除指定属性 |
void |
setAttribute(<name>,<value>) |
应用一个指定名称和值得属性 |
void |
appendChild(HTMLElement) |
将指定元素附加为当前元素的子元素 |
HTMLElement |
cloneNode(boolean) |
复制某个元素 |
HTMLElement |
compareDocumentPosition(HTMLElement) |
判定某个元素的相对位置 |
数值 |
innerHTML |
获取或设置元素的内容 |
字符串 |
insertAdjacentHTML(<pos>,<text>) |
相对于元素的位置插入HTML |
void |
insertBefore(<newelem>,<childElem>) |
将第一个元素插入到第二个(子)元素之前 |
HTMLElement |
isEqualNode(HTMLElement) |
判断指定元素是否与当前元素等同 |
布尔值 |
isSameNode(HTMLElement) |
判断指定元素是否就是当前元素 |
布尔值 |
outerHTML |
获取或设置某个元素的HTML和内容 |
字符串 |
removeChild(HTMLElement) |
从当前元素上移除指定的子元素 |
HTMLElement |
replaceChild(HTMLElement,HTMLElement) |
替换当前元素的某个子元素 |
HTMLElement |
creatElement(<tag>) |
用指定标签类型创建一个新的HTMLElement对象 |
HTMLElement |
creatTextNode(<text>) |
用指定内容创建一个新的Text对象 |
Text |
appendData(<string>) |
在文本块的末尾附加指定字符串 |
void |
data |
获取或设置文本 |
字符串 |
deleteData(<offset>,<count>) |
移除字符串中的文本。 |
void |
insertData(<offset>,<string>) |
在指定的偏移量位置插入指定字符串 |
void |
length |
返回字符串数量 |
数值 |
replaceData(<offset>,<count>,<string>) |
用指定字符串替换一部分文本 |
void |
replaceWholeText(<string>) |
替换全部文本 |
Text |
splitText(<number>) |
将现有的Text元素在指定的偏移量处一分为二。 |
Text |
substringData(<offset>,<count>) |
返回文本的子串 |
字符串 |
wholeText |
获取文本 |
字符串 |
DOM事件
名称 |
说明 |
blur |
在元素失去键盘焦点时触发 |
click |
在按下鼠标按钮后释放时触发 |
dbclick |
在两次按下鼠标按钮并释放时触发 |
focus |
在元素获得键盘焦点时触发 |
focusin |
在元素即将获得键盘焦点时触发 |
focusout |
在元素即将失去键盘焦点时触发 |
keydown |
在用户按下某个键时触发 |
keypress |
在用户按下某个键并释放时触发 |
keyup |
在用户释放某个键时触发 |
mousedown |
在鼠标按钮被按下时触发 |
mouseenter |
在光标移入元素或其下元素所占据的屏幕区域时触发 |
mouseleave |
在光标移出元素及其所有下属元素所占据的屏幕区域时触发 |
mousemove |
在光标位于元素上方并移动时触发 |
mouseout |
与mouseleave相似,区别是当光标还在下属元素上方时此事件也会被触发 |
mouseover |
与mouseenter相似,区别是当光标还在下属元素上方时此事件也会被触发 |
mouseup |
在鼠标按钮被释放时触发 |
onabort |
在文档或资源的加载过程被终止时触发 |
onafterprint |
在用户打印文档后触发 |
onerror |
在文档或资源载入出错时触发 |
onhashchange |
在地址的锚(井号串)部分变动时触发 |
onload |
在文档或资源载入完成时触发 |
onpopstate |
触发时会提供一个关联浏览器历史的状态对象 |
onresize |
在窗口大小改变时触发 |
onunload |
在文档从窗口或浏览器中卸载时触发 |
readystatechange |
在readyState属性的值改变时触发 |
submit |
在某张表单被提交时触发 |