HTML Dom 知识点整理

名称： Document Object Model（文档对象模型）

DOM结点： 整个文档是一个文档节点、每个 HTML 元素是元素节点、HTML 元素内的文本是文本节点、每个 HTML 属性是属性节点、注释是注释节点；

DOM 常用方法

getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	向节点的子节点列表的末尾添加新的子节点。
createElement()	创建元素节点。
setAttribute()	创建或改变某个新属性。
querySelector()	方法返回文档中匹配指定 CSS 选择器的一个元素。
addEventListener()	向指定元素添加 事件 句柄
removeChild()	从子节点列表中删除某个节点。
replaceChild()	将某个子节点替换为另一个。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。

DOM常用属性

classList	返回元素的类名数组
scrollTop	返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离(即滚动条滚了多少)
style	设置或返回元素的样式属性
innerHTML	设置或者返回元素的内容
parentNode	返回元素的父节点
children	返回元素的子元素的集合
lastChild	返回的最后一个子节点
offsetHeight	返回任何一个元素的高度包括边框和填充，但不是边距
offsetWidth	返回元素的宽度，包括边框和填充，但不是边距
offsetLeft	返回当前元素的相对水平偏移位置的偏移容器
offsetParent	返回元素的偏移容器
offsetTop	返回当前元素的相对垂直偏移位置的偏移容器

DOM常用事件
鼠标

onclick	当用户点击某个对象时调用的事件句柄
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发
ondblclick	当用户双击某个对象时调用的事件句柄
onmousedown	鼠标按钮被按下
onmouseenter	当鼠标指针移动到元素上时触发
onmouseleave	当鼠标指针移出元素时触发
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmouseup	鼠标按键被松开

键盘

onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开

框架/对象（Frame/Object）

onabort	图像的加载被中断
onbeforeunload	该事件在即将离开页面（刷新或关闭）时触发
onload	一张页面或一幅图像完成加载
onpageshow	该事件在用户访问页面时触发
onpagehide	该事件在用户离开当前网页跳转到另外一个页面时触发
onscroll	当文档被滚动时发生的事件
onerror	在加载文档或图像时发生错误。 ( object, body和 frameset)
onhashchange	该事件在当前 URL 的锚部分发生修改时触发
onresize	窗口或框架被重新调整大小
onunload	用户退出页面 ( body 和 frameset)

表单

onblur	元素失去焦点时触发
onchange	该事件在表单元素的内容改变时触发( ‘input, keygen, select, 和 textarea)
oninput	元素获取用户输入时触发
onsubmit	表单提交时触发
onfocus	元素获取焦点时触发
onfocusin	元素即将获取焦点时触发
onfocusout	元素即将失去焦点时触发
onreset	表单重置时触发
onsearch	用户向搜索域输入文本时触发 ( input=“search”)
onselect	用户选取文本时触发 ( input 和 textarea)

剪贴板

oncopy	该事件在用户拷贝元素内容时触发
oncut	该事件在用户剪切元素内容时触发
onpaste	该事件在用户粘贴元素内容时触发

Other