我觉得property和attribute讲的可能有点不详细

Question

我觉得这里有点不详细，这两种形式都是修改了节点的
我个人的结论是
property和attribute形式都可以修改节点的属性，但是对于新增或删除的自定义属性，能在html的dom树结构上体现出来的，就必须要用到attribute形式了。
更具体的如下：

// attribute
p1.setAttribute('data-name', 'imooc')
// p1.data-name="imooc"; // 这是错误的，不能和操作property形式替换使用
console.log( p1.getAttribute('data-name') )
// p1.removeAttribute('mytest') // 必须attribute形式删除

// property
p1.removeAttribute('font-size') // property和attribute形式删除都可以，这里删除后getAttribute为null，没有font-size属性了
// p1.style.fontSize="";  // 和上面一句效果一样
// p1.style.fontSize="50px"; // 这是正确的，可以和操作property形式替换使用，新增font-size并设置50px
// p1.setAttribute('style', 'font-size: 50px;')
console.log( p1.getAttribute('style') )

这么说也许会好一点

Answer 1

双越 2020-01-31 16:20:59

你分析的很详细。

需要注意一线，style 是一个比较特殊的例子，修改它的属性，会触发 DOM 样式的改动，会体现到 DOM 中。

而我们日常所说的 property，更多是自己定义的属性，例如 p1.a = 100; p1.b = 200 这样子。

• 自驱动 #1

  property部分属性可以渲染，如 align、title、className、style
  但float、border、top属性又渲染不出来。
  atribute全部都可以渲染出来。