记录成长
分享快乐

DOM对象及事件整理

文档对象模型(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 在某张表单被提交时触发

 

赞(2) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » DOM对象及事件整理
分享到: 更多 (0)

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    总结得很全面,收藏了

    米扑博客   | Mac OS X | Chrome 63.0.3239.84 | 5天前回复

蝈蝈要安静——一个不学无术的伪程序员!

联系我们给我留言

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏