脚本宝典收集整理的这篇文章主要介绍了20170609-DOM相关属性和方法,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Element:
父子元素节点属性:
childElementCount:返回子元素节点的个数
children:返回当前元素的子元素节点的集合
FirstElementChild:返回第一个子元素节点
lastElementChild:返回最后一个子元素节点
nextElementSibling:返回同级的下一个元素节点
previousElementSibling:返回同级的前一个元素节点
parentElement:返回父元素节点
获取当前元素节点的相关属性
VAR attrs = element.attributes;
for(var i=attrs.length-1; i>=0; i--) {
output+= attrs[i].name + "->" + attrs[i].value;
}
-
classList:返回一个元素的类属性的实时集合
-
var class = element.className
element.className = 'class01 class02 class03'
id:获取或设置元素的id属性的值
name:获取或设置元素的name属性的值,例如input元素的name值
tagName:获取当前元素的标签名
innerHTML:获取或者设置当前元素的内部内容,用此方法修改元素内部的子节点
innerText:获取或者修改当前元素内部的文本内容(排除了htML元素)
outerHTML: 获取或者设置当前元素的内部内容(包括该节点)
其他的属性
clientHeight:元素内部高度(content+padding的高度,但不包括水平滚动条的高度)
scrollHeight:和clientHeight相似,包括overflow样式属性导致的视图中不可见内容
clientWidth
scrollWidth
scrollTop: 元素垂直方向上滚动的距离(当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0)
scrollLeft: 元素水平方向上的滚动距离(当一个元素的容器没有产生水平方向的滚动条,那它的 scrollTop 的值默认为0.)
style: 修改当前元素节点的css样式
document.body.style.background = "green";
常用方法:
document.body.append("abcdefg"); // 插入文本节点
getAttribute():返回(参数中)指定的属性值
hasAttribute():判断是否有(参数中)指定的属性值
removeAttribute():移除(参数中)指定的属性
setattribute():添加新属性或修改原有属性
HtmlNode.setAttribute('name','xin');
Element可以调用Node的方法和属性,但是Node不可以调用Element的方法和属性
Node
父子节点属性
childNodes:返回所有子节点集合(不一定都是元素节点)
firstChild:返回第一个子节点(不一定是元素节点)
lastChild:返回最后一个子节点(不一定是元素节点)
parentNode: 返回父节点
nextSibling:返回当前节点的下一个节点(不一定是元素节点)
PReviousSibling:返回当前节点的上一个节点(不一定是元素节点)
children:返回 子元素节点 的集合
parentElement:返回 夫元素节点
其他属性
方法
appendChild()
insertBefore()
removeChild(): 移除指定子节点,并返回该子节点
replaceChild(newChild, oldChild):替换指定的子节点,并返回被替换的子节点
cloneNode()
contains(node): 判断传入的节点是否是当前节点的子节点
hasChildNodes():判断当前节点是否有子节点
以上是脚本宝典为你收集整理的20170609-DOM相关属性和方法全部内容,希望文章能够帮你解决20170609-DOM相关属性和方法所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。