是否已经开发了使用setAttribute代替点(.)属性表示法的最佳实践?
例如:
myObj.setAttribute("className", "nameOfClass");
myObj.setAttribute("id", "someID");
or
myObj.className = "nameOfClass";
myObj.id = "someID";
当前回答
之前的答案都不完整，大多数都包含错误信息。
在JavaScript中有三种访问DOM元素属性的方法。这三种方法都可以在现代浏览器中可靠地工作，只要您了解如何使用它们。
1. element.attributes
元素有一个属性属性，它返回Attr对象的活动NamedNodeMap。此集合的索引可能因浏览器而异。所以，顺序是不能保证的。NamedNodeMap有添加和删除属性的方法(分别是getNamedItem和setNamedItem)。
注意，尽管XML显式区分大小写，但DOM规范要求规范化字符串名称，因此传递给getNamedItem的名称实际上是不区分大小写的。
使用示例:
var div = document.getElementsByTagName('div')[0]; //you can look up specific attributes var classAttr = div.attributes.getNamedItem('CLASS'); document.write('attributes.getNamedItem() Name: ' + classAttr.name + ' Value: ' + classAttr.value + '<br>'); //you can enumerate all defined attributes for(var i = 0; i < div.attributes.length; i++) { var attr = div.attributes[i]; document.write('attributes[] Name: ' + attr.name + ' Value: ' + attr.value + '<br>'); } //create custom attribute var customAttr = document.createAttribute('customTest'); customAttr.value = '567'; div.attributes.setNamedItem(customAttr); //retreive custom attribute customAttr = div.attributes.getNamedItem('customTest'); document.write('attributes.getNamedItem() Name: ' + customAttr.name + ' Value: ' + customAttr.value + '<br>'); <div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>
2. element.getAttribute & element.setAttribute
这些方法直接存在于Element上，不需要访问属性及其方法，但执行相同的功能。
再次注意，字符串名称是不区分大小写的。
使用示例:
var div = document.getElementsByTagName('div')[0]; //get specific attributes document.write('Name: class Value: ' + div.getAttribute('class') + '<br>'); document.write('Name: ID Value: ' + div.getAttribute('ID') + '<br>'); document.write('Name: DATA-TEST Value: ' + div.getAttribute('DATA-TEST') + '<br>'); document.write('Name: nonStandard Value: ' + div.getAttribute('nonStandard') + '<br>'); //create custom attribute div.setAttribute('customTest', '567'); //retreive custom attribute document.write('Name: customTest Value: ' + div.getAttribute('customTest') + '<br>'); <div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>
3.DOM对象上的属性，例如element.id
使用DOM对象上的方便属性可以访问许多属性。给定对象上存在哪些属性取决于对象的DOM节点类型，而与HTML中指定的属性无关。可用的属性定义在DOM对象原型链中的某个地方。因此，所定义的特定属性将取决于您正在访问的Element的类型。
例如，className和id定义在Element上，存在于所有DOM节点上，这些节点是元素，但不包括文本或注释节点。价值的定义更为狭义。它只在HTMLInputElement和它的后代上可用。
注意，JavaScript属性是区分大小写的。尽管大多数属性将使用小写字母，但也有一些是驼峰式的。所以一定要检查说明书。
这个“图表”捕获了这些DOM对象的原型链的一部分。它甚至还没有完成，但它展示了整体结构。
____________Node___________
| | |
Element Text Comment
| |
HTMLElement SVGElement
| |
HTMLInputElement HTMLSpanElement
使用示例:
var div = document.getElementsByTagName('div')[0]; //get specific attributes document.write('Name: class Value: ' + div.className + '<br>'); document.write('Name: id Value: ' + div.id + '<br>'); document.write('Name: ID Value: ' + div.ID + '<br>'); //undefined document.write('Name: data-test Value: ' + div.dataset.test + '<br>'); //.dataset is a special case document.write('Name: nonStandard Value: ' + div.nonStandard + '<br>'); //undefined <div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>
注意:本文解释了HTML规范如何定义属性，以及现代的常青浏览器如何处理属性。当然，有些老的浏览器(IE、Netscape等)没有遵守这个规范，甚至比这个规范更早。如果你需要支持旧的(破损的)浏览器，你需要的信息比这里提供的更多。
其他回答
两者之间的一个区别是setAttribute，当用于设置<input/>的值时，将使该值成为它所在表单上调用.reset()时的默认值，但.value =不会这样做。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
注意，如果调用setAttribute()来设置特定属性的值，则后续调用reset()不会将该属性重置为其默认值，而是将该属性保持setAttribute()调用设置的值。
谷歌API脚本对此进行了有趣的观察:
他们是这样做的:
var scriptElement = document.createElement("script");
scriptElement = setAttribute("src", "https://some.com");
scriptElement = setAttribute("nonce", "https://some.com");
scriptElement.async = "true";
注意，他们如何为"src"和"nonce"使用setAttribute，但是。async =…对于“async”属性。
我不是100%确定，但可能是因为“async”只在支持直接。attr =赋值的浏览器上被支持。因此，尝试setAttribute("async")是没有意义的，因为如果浏览器不理解.async=…它不会理解“async”属性。
希望这是我正在进行的“非最小化GAPI”研究项目的有益见解。如果我说错了，请指正。
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解析器，但在底层有一些神奇的东西。
增加2个与.textContent和.innerHTML相关的点
<div id="mydiv"></div>
var elem = document.getElementById("mydiv");
elem.textContent = "hello"; // OK - Content has been updated
elem.setAttribute("textContent", "hello"); // NOT OK - You are trying to set
// the attribute than it's content
elem.innerHTML = "world"; // OK - Content has been updated
elem.setAttribute("innerHTML", "world"); // NOT OK - You are trying to set
// the attribute than it's content
之前的答案都不完整，大多数都包含错误信息。
在JavaScript中有三种访问DOM元素属性的方法。这三种方法都可以在现代浏览器中可靠地工作，只要您了解如何使用它们。
1. element.attributes
元素有一个属性属性，它返回Attr对象的活动NamedNodeMap。此集合的索引可能因浏览器而异。所以，顺序是不能保证的。NamedNodeMap有添加和删除属性的方法(分别是getNamedItem和setNamedItem)。
注意，尽管XML显式区分大小写，但DOM规范要求规范化字符串名称，因此传递给getNamedItem的名称实际上是不区分大小写的。
使用示例:
var div = document.getElementsByTagName('div')[0]; //you can look up specific attributes var classAttr = div.attributes.getNamedItem('CLASS'); document.write('attributes.getNamedItem() Name: ' + classAttr.name + ' Value: ' + classAttr.value + '<br>'); //you can enumerate all defined attributes for(var i = 0; i < div.attributes.length; i++) { var attr = div.attributes[i]; document.write('attributes[] Name: ' + attr.name + ' Value: ' + attr.value + '<br>'); } //create custom attribute var customAttr = document.createAttribute('customTest'); customAttr.value = '567'; div.attributes.setNamedItem(customAttr); //retreive custom attribute customAttr = div.attributes.getNamedItem('customTest'); document.write('attributes.getNamedItem() Name: ' + customAttr.name + ' Value: ' + customAttr.value + '<br>'); <div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>
2. element.getAttribute & element.setAttribute
这些方法直接存在于Element上，不需要访问属性及其方法，但执行相同的功能。
再次注意，字符串名称是不区分大小写的。
使用示例:
var div = document.getElementsByTagName('div')[0]; //get specific attributes document.write('Name: class Value: ' + div.getAttribute('class') + '<br>'); document.write('Name: ID Value: ' + div.getAttribute('ID') + '<br>'); document.write('Name: DATA-TEST Value: ' + div.getAttribute('DATA-TEST') + '<br>'); document.write('Name: nonStandard Value: ' + div.getAttribute('nonStandard') + '<br>'); //create custom attribute div.setAttribute('customTest', '567'); //retreive custom attribute document.write('Name: customTest Value: ' + div.getAttribute('customTest') + '<br>'); <div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>
3.DOM对象上的属性，例如element.id
使用DOM对象上的方便属性可以访问许多属性。给定对象上存在哪些属性取决于对象的DOM节点类型，而与HTML中指定的属性无关。可用的属性定义在DOM对象原型链中的某个地方。因此，所定义的特定属性将取决于您正在访问的Element的类型。
例如，className和id定义在Element上，存在于所有DOM节点上，这些节点是元素，但不包括文本或注释节点。价值的定义更为狭义。它只在HTMLInputElement和它的后代上可用。
注意，JavaScript属性是区分大小写的。尽管大多数属性将使用小写字母，但也有一些是驼峰式的。所以一定要检查说明书。
这个“图表”捕获了这些DOM对象的原型链的一部分。它甚至还没有完成，但它展示了整体结构。
____________Node___________
| | |
Element Text Comment
| |
HTMLElement SVGElement
| |
HTMLInputElement HTMLSpanElement
使用示例:
var div = document.getElementsByTagName('div')[0]; //get specific attributes document.write('Name: class Value: ' + div.className + '<br>'); document.write('Name: id Value: ' + div.id + '<br>'); document.write('Name: ID Value: ' + div.ID + '<br>'); //undefined document.write('Name: data-test Value: ' + div.dataset.test + '<br>'); //.dataset is a special case document.write('Name: nonStandard Value: ' + div.nonStandard + '<br>'); //undefined <div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>
注意:本文解释了HTML规范如何定义属性，以及现代的常青浏览器如何处理属性。当然，有些老的浏览器(IE、Netscape等)没有遵守这个规范，甚至比这个规范更早。如果你需要支持旧的(破损的)浏览器，你需要的信息比这里提供的更多。
