javascript - setAttribute 和 htmlElement.attribute ='value' 的区别

Question

两者有什么区别，

b1.setAttribute('id','b1');

和

b1.id='b1';

其中一个比另一个更有效吗？他们两个会做完全相同的任务吗？在某些情况下它们会有所不同吗？

Answer 1

difference between setAttribute and htmlElement.attribute='value'

后一点 htmlElement.attribute='value' 不太准确。您不是在此处设置属性，而是在设置属性。

内存中的 DOM 元素实例具有各种属性，一些与属性相关联，而另一些则不相关。

另一方面，

属性 是直接从 HTML 标记读取的名称/值对(如果您序列化 DOM 元素，例如通过访问其 innerHTML 属性，被写入您返回的标记中)。

当属性和属性以某种方式相关/链接时，该属性称为(属性的)反射属性。有时，反射(reflect)的属性名称与属性名称不完全相同(class 变为 className，for 变为 htmlFor)，有时它们之间的联系不是 1:1。

例如，id 是 id 属性的反射属性。但是选择框有一个没有属性的 selectedIndex 属性。

do both of them will do exactly the same task ?

and will they be different in some situations ?

这取决于属性/属性:

• id 和其他几个直接反射(reflect):设置 id 属性和设置 id属性做完全相同的事情。副手，这也适用于 htmlFor 属性/for 属性(除了在 setAttribute 中有错误的旧 IE 上)，rel 属性/属性，className/class 属性(旧 IE 除外，它在 setAttribute 中有错误)， name 表单字段和一些其他元素的属性，method 和 action 表单的属性/属性，以及其他几个。

• 另一方面，value 属性根本 不设置value 属性。它只是从中获取默认值。在大多数浏览器上(此时是“全部”？)，有一个单独的 defaultValue 属性，它确实直接反射(reflect)了 value 属性。

• 在相对链接和绝对链接方面，href 属性与 href 属性略有不同。该属性可以包含相对路径，使用 str = elm.getAttribute("href") 可以为您提供该相对路径；如果您阅读属性 (str = elm.href)，它将始终是绝对路径(例如，解析路径)。将 href 属性设置为相对路径会将属性设置为该路径，但再次阅读 href 属性将为您提供绝对(已解析)版本。将 href 属性设置为绝对路径会将属性设置为该绝对路径。

• 有几个 bool 属性表示为 bool 值 (true/false)，但由于属性值始终是字符串，因此该属性不存在为假 (getAttribute 返回 null) 或那里为 true。如果它在那里，它必须具有值 "" 或与其名称相同(例如，multiple="multiple"，不区分大小写)，尽管在实践中浏览器对待任何当前属性为 true，无论其实际内容如何。

• 一些属性根本不会反射(reflect)在属性中，因此设置它们不会设置/更改任何属性。

is one of them more efficient than the other ?

它永远不会产生足够大的差异来关心，所以这无关紧要。它也可能因浏览器而异。