JS元素节点及其常用属性和方法

在 HTML DOM 中，一个元素节点就是一个元素对象，代表一个 HTML 元素（标签）。使用 DOM 对文档执行插入、修改、删除节点等操作时需要使用元素节点的相应属性和方法。元素节点的常用属性和方法分别见表 1 和表 2。

表 1：元素节点的常用属性

属性	描述
attributes	返回元素的所有属性
childNodes	返回元素的所有子节点（包含元素节点、文本节点、注释节点）
children	返回元素的子元素节点（不包含文本节点、注释节点），该属性不是标准属性，但所有浏览器都支持
className	设置或返回元素的 class 属性
clientHeight	在页面上返回内容的可视高度，包括内边距，但不包括边框、外边距和滚动条
clientWidth	在页面上返回内容的可视宽度，包括内边距，但不包括边框、外边距和滚动条
contentEditable	设置或返回元素的内容是否可编辑
firstChild	返回元素的第一个子节点（包含元素节点、文本节点、注释节点）
firstElementChild	返回元素的第一个元素子节点（不包含文本节点、注释节点）
id	设置或返回元素的 id
innerHTML	设置或返回元素的内容
lastChild	返回元素的最后一个子节点（包含元素节点、文本节点、注释节点）
lastElementChild	返回元素的最后一个元素子节点（不包含文本节点、注释节点）
nextSibling	返回该元素紧跟着的下一个兄弟节点（可能是元素节点或文本节点或注释节点）
nextElementSibling	返回该元素紧跟着的下一个兄弟元素节点（只能是元素节点）
nodeName	返回元素的标签名（大写）
nodeValue	设置或返回元素值
nodeType	返回元素的节点类型
offsetHeigth	返回元素的高度，包括边框和内边距，但不包括外边距
offsetwidth	返回元素的宽度，包括边框和内边距，但不包括外边距
offsetLeft	返回元素相对于 body 元素或最近定位祖先元素的水平偏移位置，即元素外边框到 body 或最近定位祖先元素内边框之间的距离
offsetTop	返回元素相对于 body 元素或最近定位祖先元素的垂直偏移位置，即元素上外边框到 body 或最近 定位祖先元素上内边框之间的距离
offsetParent	返回最近的有定位属性的祖先节点，如果祖先节点都没有定位，则返回 body 节点
parentNode	返回元素的父节点
previousSibling	返回该元素紧跟着的前一个兄弟节点（包含元素节点、文本节点、注释节点）
previousElementSibling	返回该元素紧跟着的前一个兄弟元素节点（不包括文本节点、注释节点）
scrollHeight	返回整个元素的高度，包括带滚动条隐藏的地方
scrollWidth	返回整个元素的宽度，包括带滚动条隐藏的地方
scrollLeft	返回水平滚动条的向右滚动的距离
scrollTop	返回垂直滚动条的向下滚动的距离
style	设置或返回元素的样式属性
tagName	返回元素的标签名（大写），作用和 nodeName 完全一样
title	设置或返回元素的 title 属性

表 1 中属性 childNodes 和 children、firstChild 和 firstElementChild、lastChild 和 lastElementChild、nextSibling 和 nextElementSibling 以及 previousSibling 和 previousElementSibling 的作用比较类似，使用时需要注意它们的不同。

表 2：元素节点方法

方法	描述
appendChild ( 子节点 )	在元素的子节点列表后面添加一个新的子节点
focus()	使用元素获取焦点
getAttribute ( 属性名 )	返回元素指定的行间属性的值
getBoundingClientRect()	返回指定元素的左、上、右和下分别相对浏览器视窗的位置（绝对位置）
getElementsByTagName ( 标签名 )	返回元素所有具有指定标签名的子节点
getElementsByClassName ( CSS 类名 )	返回元素所有具有指定类名的子节点
hasAttributes()	判断元素是否存在属性，存在则返回 true，否则返回 false
hasChildNodes()	判断元素是否存在子节点，存在则返回 true，否则返回 false
hasfocus()	判断元素是否获得焦点，存在则返回 true，否则返回 false
insertBefore (节点1, 节点2 )	在元素的指定子节点（节点 2 ）的前面插入一个新的了节点（节点 1 ）
querySelectorAll ( 选择器名 )	返回文档中匹配指定 CSS 选择器的所有元素
removeAttribute ( 属性名 )	删除元素的指定行间属性
removeChild ( 子节点 )	删除元素的指定子节点
replaceChild ( 新节点, 旧节点 )	使用新的节点替换元素指定的子节点（旧节点）
setAttribute ( 属性名, 属性值 )	设置元素指定的行间属性值

需要访问 HTML 文档以及对文档执行插入、修改和删除节点等操作时，将会使用到表 1 和表 2 所列的一些属性和方法。