JS元素节点及其常用属性和方法
时间：03-07来源：作者：点击数：
在 HTML DOM 中，一个元素节点就是一个元素对象，代表一个 HTML 元素（标签）。使用 DOM 对文档执行插入、修改、删除节点等操作时需要使用元素节点的相应属性和方法。元素节点的常用属性和方法分别见表 1 和表 2。
| 属性 | 描述 |
|---|---|
| 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 的作用比较类似，使用时需要注意它们的不同。
| 方法 | 描述 |
|---|---|
| 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 所列的一些属性和方法。
方便获取更多学习、工作、生活信息请关注本站微信公众号
上一篇:JS属性节点的操作
下一篇:JS cookie的设置、获取和删除
推荐内容
相关内容
栏目更新
栏目热门
湘公网安备 43102202000103号