欢迎大家来到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 的查询或者重绘、重排，频繁操作会影响页面性能。