Element节点
其他
2018-07-25 14:10:17
阅读次数: 0
实例属性
元素特性的相关属性
Element.id
返回元素的id
属性
Element.tagName
返回元素的大写标签名, 其值与nodeName
属性相等
Element.dir
读写当前元素的文字方向.
Element.accessKey
属性用于读写当前元素的快捷键
Element.draggable
返回布尔值, 表示是否可以拖动, 可读写
Element.lang
返回当前元素的语言设置, 可读写
Element.tabIndex
属性返回一个整数
Element.title
用于读写元素的title
属性
元素状态的相关属性
Element.hidden
返回可读写的布尔值, 表示当前元素的hidden
属性
Element.contentEditable
可读写属性, 当元素设置了这个属性时, 使得元素内容可以编辑, 有三个值: true
, false
, inherit
Element.isContentEditable
也表示元素内容是否可编辑, 和contentEditable
的区别是这是一个只读属性
其他属性
Element.attributes
返回一个类数组(array-like
)对象, 其成员为当前元素的所有属性节点
Element.className
用于读写元素节点的class
属性, 返回值为字符串
Element.classList
也用于读写元素节点的class
属性, 和className
的区别是, classList
返回的是array-like
对象.
classList
有下面几个方法:
add()
:增加一个 class
。
remove()
:移除一个 class
。
contains()
:检查当前元素是否包含某个 class
。
toggle()
:将某个 class
移入或移出当前元素, 这个方法可以有第二个参数,为布尔值。 true
为添加属性, false
为删除属性
item()
:返回指定索引位置的 class。
toString()
:将 class
的列表转为字符串
Element.dataset
属性用于读写自定义属性
Element.innerHTML
返回当前元素的所有子元素(不包括当前元素)。
Element.outHTML
返回当前元素及其子元素, 可读写
Element.clientHeight
返回块级元素节点的高度, 单位为px
. 对行内元素返回0
Element.clientWidth
返回块级元素节点的宽度, 单位为px
. 对行内元素返回0
Element.clientLeft
返回元素左边框的宽度
Element.clientTop
返回元素上边框的宽度
Element.scollHeight
返回当前元素的总高度, 包括不可见部分
Element.scollWidth
返回当前元素的总宽度, 包括不可见部分
Element.scrollLeft
返回当前元素的水平滚动条向右水平滚动的距离
Element.scrollTop
返回当前元素的垂直滚动条向下滚动的距离
Element.offsetParent
返回最靠近当前元素的并且css
的position
属性不等于static
的上层元素
Element.offsetLeft
返回当前元素相对于offsetParent
节点的水平位移
Element.offsetTop
返回当前元素相对于offsetParent
节点的垂直位移
Element.offsetHeight
返回元素的垂直高度, 包括pading
, border
和滚动条
Element.offsetWidth
返回当前元素的水平宽度, 包括pading
, border
和滚动条
Element.style
返回元素节点的行内样式
Element.children
返回array-like
对象, 成员为当前元素的所有子元素
Element.childElementCount
返回当前元素节点的子元素节点个数, 其值也等于Element.children.length
Element.firstElementChild
返回当前元素节点的第一个元素子节点
Element.lastElementChild
返回最后一个元素子节点
Element.nextElementSibling
返回当前元素节点的后一个同辈元素
Element.previousElementSibliing
返回当前元素节点的前一个同辈元素
实例方法
Element.getAttribute()
接收一个参数获取元素的属性
Element.getAttributes()
获取元素的所有属性
Element.setAttribute()
接收两个参数key
和value
设置元素的属性
Element.hasAttribute()
返回布尔值, 接收一个参数判断元素是否有指定的属性
Element.hasAttributes()
返回布尔值, 判断元素是否有属性
Element.removeAttribute()
删除元素的属性
Element.querySelector()
接收css
选择器作为参数, 返回第一个匹配的元素
Element.querySelectorAll()
接收css
选择器作为参数, 返回匹配的所有元素
Element.querySelector
和Element.querySelectorAll
先在全局范围搜索给定的选择器, 再过滤出满足当前元素的子元素
Element.getElementsByClassName()
方法接收一个参数value
, 返回class
属性值为value
的元素. 此方法返回 HTMLCollection
实例, HTMLCollection
是动态实例
Element.getElementsByTagName()
方法也接收一个参数并返回HTMLCollection
实例, 其成员是满足参数的子节点
Element.closest()
接收一个css
选择器作为参数, 返回匹配该选择器的,最接近当前节点的祖先节点(包括当前节点). 没有匹配的则返回null
Element.matches()
返回布尔值, 表示当前元素是否匹配给定的css
选择器
Element.addEventListener()
:添加事件的回调函数
Element.removeEventListener()
:移除事件监听函数
Element.dispatchEvent()
:触发事件
Element.scrollIntoView(true)
滚动当前元素进入浏览器的可见区域, 且元素顶部与可见区域顶部对齐, 当接收false
作为参数时, 元素底部与可见区域底部对齐
Element.getBoundingClientRect()
返回一个对象. 基本包括盒子模型的所有信息. 常用的有:
x
:元素左上角相对于视口的横坐标
y
:元素左上角相对于视口的纵坐标
heigh
t:元素高度
width
:元素宽度
left
:元素左上角相对于视口的横坐标,与x属性相等
right
:元素右边界相对于视口的横坐标(等于x + width
)
top
:元素顶部相对于视口的纵坐标,与y属性相等
bottom
:元素底部相对于视口的纵坐标(等于y + height
)
getClientRects()
返回array-like
对象, 其属性有bottom
, top
, left
, right
, width
和height
属性
Element.insertAdjacentElement(pos, elem)
在pos
位置前插入元素elem
pos
可以取值如下:
beforebegin
:当前元素之前
afterbegin
:当前元素内部的第一个子节点前面
beforeend
:当前元素内部的最后一个子节点后面
afterend
:当前元素之后
Element.insertAdjacentHTML(pos, html)
在pos
位置插入包含HTML
字符串
Element.insertAdjacentText(pos, text)
在pos
位置插入text
文本节点
Element.remove()
将当前节点从父节点中移除
Element.focus()
将焦点转移到指定元素上
Element.click()
方法模拟鼠标的点击事件
转载自blog.csdn.net/helloyongwei/article/details/80452994