7.attribute与property

<ul>
        <li class="liclass" >11111</li>
        <li class="liclass">2222</li>
        <li>3333</li>
        <li>44444</li>
        <li>555555</li>
</ul>

const lilist = document.querySelectorAll('li') 
const li0 = lilist[0]
// 两者都可能引起Dom重新渲染，建议使用property
// property(修改对象属性，不会体现到html结构中)
li0.style.width = '200px'
li0.data = 'test'
console.log(li0.data)
console.log(li0.style.width)
console.log(li0.className)
console.log(li0.nodeName)
console.log(li0.nodeType)
//attribute (修改html属性，会改变html结构)
li0.setAttribute('data-test','test')
console.log(li0.getAttribute('data-test'))

li0.setAttribute('style', 'font-size:20px')
li0.getAttribute('style')

 

来源：https://www.cnblogs.com/chenlw/p/12572821.html