【JavaScript编程】DOM 对象

HTML DOM 节点

在 HTML DOM (Document Object Model) 中, 每个东西都是节点 :

• 文档本身就是一个文档对象
• 所有 HTML 元素都是元素节点
• 所有 HTML 属性都是属性节点
• 插入到 HTML 元素文本是文本节点
• 注释是注释节点

一、Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

• Document 对象是 HTML 文档的根节点。
• Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

常用属性

属性	描述
document.body	返回文档的body元素
document.title	返回当前文档的标题
document.cookie	设置或返回与当前文档有关的所有 cookie
document.URL	返回文档完整的 URL
document.baseURI	返回文档的绝对基础 URI。ie不支持
document.referrer	返回载入当前文档的来源文档的 URL

常用方法

方法	描述
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素。ie8及以上
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表。ie9及以上
document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。ie9及以上
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.write()	向文档写 HTML 表达式 或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符
document.open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。

二、元素对象

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。

• 元素对象 的 子节点可以是, 可以是元素节点，文本节点，注释节点；
• NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。

获取

方法	描述
element.querySelector()	返回匹配指定 CSS 选择器元素的第一个子元素。ie8及以上
element.getElementById()	返回对拥有指定 id 的第一个对象的引用。
element.getElementsByName()	返回带有指定名称的对象集合。
element.getElementsByTagName()	返回指定标签名的所有子元素集合
element.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。ie9及以上

查找（根据层次关系）

属性	描述
element.parentNode	父节点
element.childNodes	属性返回所有的节点，包括文本节点、注释节点
element.children	属性只返回元素节点
element.firstChild	第一个子节点
element.lastChild	最后一个子节点
element.previousSibling	前一个兄弟节点
element.nextSibling	后一个兄弟节点

增删改

方法	描述
document.createElement(tagName)	按给定的标签名创建节点
element.cloneNode(deep)	复制节点。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。
element.appendChild(nodeName)	向节点末尾增加子节点
element.insertBefore(newItem,existingItem)	在已有的子节点前插入一个新的子节点
element.removeChild(node)	删除节点
element.replaceChild(newNode,oldNode)	替换节点

其他属性和方法

属性 / 方法	描述
element.nodeName	返回元素的标记名（大写）
element.id	设置或者返回元素的 id
element.className	设置或返回元素的class属性
内容
element.innerHTML	设置或者返回元素的内容
element.textContent	设置或返回一个节点和它的文本内容
样式
element.style	不能有"-"(小驼峰命名法)；不能写复合属性
element.offsetHeight	返回任何一个元素的高度包括边框和填充，但不是边距
element.offsetWidth	返回元素的宽度，包括边框和填充，但不是边距
element.offsetLeft	返回当前元素的相对水平偏移位置的偏移容器
element.offsetTop	返回当前元素的相对垂直偏移位置的偏移容器
element.scrollHeight	返回整个元素的高度（包括带滚动条的隐蔽的地方）
element.scrollLeft	返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollTop	返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
element.scrollWidth	返回元素的整个宽度（包括带滚动条的隐蔽的地方）
属性
element.hasAttribute()	如果元素中存在指定的属性返回 true，否则返回false。
element.getAttribute(name)	返回指定元素的属性值
element.setAttribute(name, value)	设置节点属性
element.removeAttribute()	删除指定的属性

table节点

属性 / 方法	描述
rowIndex	获取当前行的索引
rows	返回包含表格中所有行的一个数组
createTFoot()	在表格中创建一个空的 tFoot 元素。
createTHead()	在表格中创建一个空的 tHead 元素。
deleteTFoot()	从表格删除 tFoot 元素及其内容。
deleteTHead()	从表格删除 tHead 元素及其内容。
insertRow()	在表格中插入一个新行。
deleteRow(index)	从表格删除指定位置的行

三、DOM 事件

鼠标事件

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

键盘事件

属性	描述
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。

表单事件

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

剪贴板事件

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