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 内存中的元素实例具有各种属性，一些连接或涉及属性，而其他则不连接或相关。

另一方面，

Attributes 是直接从 HTML 标记中读取的 name/value 对（如果序列化 DOM 元素，例如通过访问它的 innerHTML 属性，被写入您返回的标记。

当属性和属性在某种程度上是 related/linked 时，属性被称为 反射属性 (的属性）。有时，反射的属性的名称与属性的名称不完全相同（class 变为 className，for 变为 htmlFor），有时他们之间的 link 不是 1:1.

例如，id 是 id 属性的反映属性。但是 select 盒子有一个 selectedIndex 属性没有属性。

do both of them will do exactly the same task ?

and will they be different in some situations ?

这取决于attribute/property:

id和其他几个是直接反映：设置id属性和设置id 属性做完全相同的事情。副手，htmlFor 属性 / for 属性也是如此（除了在 setAttribute 中有错误的旧 IE），rel property/attribute、className / class 属性（旧 IE 除外，它在 setAttribute 中有错误）、表单字段和其他一些元素上的 name 属性、 method 和 action properties/attributes 在表单上，还有其他几个。
value 属性，另一方面，根本不设置 value 属性 .它只是从中获取默认值。在大多数浏览器上（此时是“全部”？），有一个单独的 defaultValue 属性，直接反映了 value 属性。
href 属性与 href 属性在相对与绝对 link 方面略有不同。该属性可以包含一个相对路径，使用 str = elm.getAttribute("href") 给你那个相对路径；如果您阅读属性 (str = elm.href)，它将始终是绝对路径（例如，解析路径）。将 href 属性设置为相对路径会将属性设置为该路径，但再次阅读 href 属性将为您提供绝对（已解析）版本。将 href 属性设置为绝对路径会将属性设置为该绝对路径。
有几个布尔属性表示为布尔值 (true/false)，但由于属性值始终是字符串，因此该属性 不存在 为假 (getAttribute returns null) 或那里为真。如果它在那里，它的值必须是 "" 或与其名称相同（例如，multiple="multiple"，不区分大小写），尽管实际上浏览器将任何存在的属性视为 true 而不管它的实际内容。
一些属性根本没有反映在属性中，因此设置它们不会 set/change 任何属性。

is one of them more efficient than the other ?

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

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

difference between setAttribute and htmlElement.attribute='value'

javascript

setattribute