两者之间的一个区别是setAttribute，当用于设置<input/>的值时，将使该值成为它所在表单上调用.reset()时的默认值，但.value =不会这样做。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

注意，如果调用setAttribute()来设置特定属性的值，则后续调用reset()不会将该属性重置为其默认值，而是将该属性保持setAttribute()调用设置的值。

我发现需要使用setAttribute的一种情况是在更改ARIA属性时，因为没有相应的属性。例如

x.setAttribute('aria-label', 'Test');
x.getAttribute('aria-label');

没有x。arialabel之类的东西，所以你必须使用setAttribute。

编辑:x["aria-label"]不工作。你确实需要setAttribute。

x.getAttribute('aria-label')
null
x["aria-label"] = "Test"
"Test"
x.getAttribute('aria-label')
null
x.setAttribute('aria-label', 'Test2')
undefined
x["aria-label"]
"Test"
x.getAttribute('aria-label')
"Test2"

If the element you are referring to does not already include a Javascript object property for a given attribute (as others have described), then setting that property will not propagate the change back to the DOM, it just adds the named property to the Javascript object, and the DOM ignores it. For example, getting the element mySpan by id and then doing mySpan.class = 'warning' will do nothing, whether or not the span element in question already has a class attribute defined, because mySpan.class is not defined in the Javascript object for a span element. You have to use mySpan.setAttribute('class', 'warning').

然而，第二个细微差别是使用mySpan设置Javascript对象的innerHTML属性。setAttribute("innerHTML"， someHTML)不会更新元素的内容。我不知道Javascript是如何捕获mySpan的。innerHTML = something，并调用HTML解析器，但在底层有一些神奇的东西。

“在JavaScript中什么时候使用setAttribute vs .attribute= ?”

一般的规则是使用.attribute并检查它是否在浏览器上工作。

．．如果它可以在浏览器上运行，那么就可以开始了。

．．如果没有，使用. setattribute (attribute, value)来代替该属性的.attribute。

冲洗-重复所有属性。

如果你很懒，你可以简单地使用. setattribute。这在大多数浏览器上都可以正常工作。(尽管支持.attribute的浏览器可以比. setattribute (attribute, value)更好地优化它。)

这是很好的讨论。我曾有过这样的时刻，我希望，或者让我说希望(我可以补充说，是成功的)重新发明轮子，不管它是正方形的。 上面的任何方法都是很好的讨论，所以任何来这里寻找Element属性和属性之间的区别的人。这是我最值钱的一分钱，我的确是费了好大劲才发现的。我会保持简单，所以没有特别的技术术语。

假设我们有一个变量a。我们所习惯的如下。

下面会抛出一个错误，因为它简单地写了它是一种只能有一个属性的对象，即单数左手边对象=单数右手边对象。其他的东西都被忽略，扔进垃圾桶。 let A = 'f'; A.b = 2; console.log (A.b);

谁决定它必须是单数=单数。那些制定JavaScript和html标准的人，这就是引擎工作的方式。

让我们换个例子。

let A = {}; A.b = 2; console.log (A.b);

这一次它工作.....因为我们已经明确地告诉它了，谁决定我们可以在这个例子中告诉它，而不是在以前的例子中。还是那些制定JavaScript和html标准的人。

我希望我们在这个问题上，让它进一步复杂化

let A = {}; A.attribute = {}; A.attribute.b = 5; console.log (A.attribute.b);//将工作 console.log (A.b);//将不起作用

我们所做的是第一层的树和非奇异对象的子层。除非你知道什么是哪里，并调用它，否则它将工作。

这就是HTMLDOM在为每个HTML元素创建解析和绘制DOm树时所发生的事情。每个都有不同级别的属性。有些是预定义的，有些不是。这就是ID和VALUE位发挥作用的地方。 在场景后面，它们在1级属性和sun级属性(属性)之间以1:1的比例映射。因此，改变一个就会改变另一个。这就是对象getter和setter方案的作用。

let A = { attribute :{ id:'', value:'' }, getAttributes: function (n) { return this.attribute[n]; }, setAttributes: function (n,nn){ this.attribute[n] = nn; if(this[n]) this[n] = nn; }, id:'', value:'' }; A.id = 5; console.log(A.id); console.log(A.getAttributes('id')); A.setAttributes('id',7) console.log(A.id); console.log(A.getAttributes('id')); A.setAttributes('ids',7) console.log(A.ids); console.log(A.getAttributes('ids')); A.idsss=7; console.log(A.idsss); console.log(A.getAttributes('idsss'));

如上所示，ELEMENTS有另一组所谓的属性列表属性，它有自己的主要属性。在两者之间有一些预定义的属性，并以1:1的比例映射，例如ID对每个人都是公共的，但value不是，src也不是。当解析器到达这一点时，它只是简单地调出字典，以确定何时出现这样那样的东西。

所有元素都有属性和属性，它们之间的一些项是公共的。在一个国家常见的东西在另一个国家并不常见。

在过去的HTML3时代，我们首先使用html，然后使用JS。现在的日子，它的其他方式，所以已经使用内联onclick成为如此令人憎恶。在HTML5中，有许多属性列表可以作为集合访问，例如类，样式。在过去，颜色是一个属性，现在被移动到css处理不再有效的属性。

元素。attributes是元素属性中的子属性列表。

除非你能改变Element属性的getter和setter，这几乎是不可能的，因为它会破坏所有的功能，通常是不能立即写出来的，只是因为我们定义了一个A.item并不一定意味着Js引擎也会运行另一行函数将它添加到Element.attributes.item中。

我希望这能进一步澄清什么是什么。 为了这个目的，我尝试了element。prototype。setattribute和自定义函数，它只是打破了所有的东西，因为它覆盖了本地的一堆函数，设置属性函数在幕后发挥作用。

两者之间的一个区别是setAttribute，当用于设置<input/>的值时，将使该值成为它所在表单上调用.reset()时的默认值，但.value =不会这样做。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

注意，如果调用setAttribute()来设置特定属性的值，则后续调用reset()不会将该属性重置为其默认值，而是将该属性保持setAttribute()调用设置的值。