大家好,欢迎来到IT知识分享网。
1.property
DOM节点是一个JS对象,它符合前面描述的对象的特性——可扩展属性,因为DOM节点本质上也是一个JS。因此,如以下代码所示,“p”可以具有“style”属性和“className”“nodeName”“nodeType”属性。注意**这些是JS类别的属性,符合JS语法标准的**。
var pList = document.querySelectorAll(‘p’)
var p = pList[0]
console.log(p.style.width) // 获取样式
p.style.width = ‘100px’ // 修改样式
console.log(p.className) // 获取 class
p.className = ‘p1’ // 修改 class
// 获取 nodeName 和 nodeType
console.log(p.nodeName)
console.log(p.nodeType)
2.attribute
property 的获取和修改,是直接改变 JS 对象,而 attribute 是直接改变 HTML 的属性,两种有很大的区别。attribute 就是对 HTML 属性的 get 和 set,和 DOM 节点的 JS 范畴的 property 没有关系。
var pList = document.querySelectorAll(‘p’)
var p = pList[0]
p.getAttribute(‘data-name’)
p.setAttribute(‘data-name’, ‘juejin’)
p.getAttribute(‘style’)
p.setAttribute(‘style’, ‘font-size:30px;’)
而且,get 和 set attribute 时,还会触发 DOM 的查询或者重绘、重排,频繁操作会影响页面性能。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/76449.html