「前端技术」DOM中property 和 attribute 的区别

「前端技术」DOM中property 和 attribute 的区别1.propertyDOM节点是一个JS对象,它符合前面描述的对象的特性——可扩展属性,因为DOM节点本质上也是一个JS。因此,如以下代码所示,

大家好,欢迎来到IT知识分享网。

「前端技术」DOM中property 和 attribute 的区别

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

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信