首页 > 编程笔记 > JavaScript笔记 阅读:25

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 所列的一些属性和方法。

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章