是否开发了使用点 （） 属性表示法代替点 （） 属性表示法的最佳实践？setAttribute.
例如：
myObj.setAttribute("className", "nameOfClass");
myObj.setAttribute("id", "someID");
或
myObj.className = "nameOfClass";
myObj.id = "someID";
来自Javascript：The Definitive Guide，它澄清了一些事情。它指出，HTML文档的HTMLElement对象定义了与所有标准HTML属性相对应的JS属性。
因此，您只需要用于非标准属性。setAttribute
例：
node.className = 'test'; // works
node.frameborder = '0'; // doesn't work - non standard attribute
node.setAttribute('frameborder', '0'); // works
前面的答案都不完整，大多数都包含错误信息。
在 JavaScript 中，有三种方法可以访问 DOM 元素的属性。这三者都可以在现代浏览器中可靠地工作，只要您了解如何使用它们即可。
element.attributes
元素具有一个属性属性，该属性返回Attr对象的实时NamedNodeMap。此集合的索引可能因浏览器而异。因此，订单不能保证。 具有用于添加和删除属性的方法（分别为 和 ）。NamedNodeMapgetNamedItemsetNamedItem
请注意，尽管 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>element.getAttribute & element.setAttribute
这些方法直接存在于 上，无需访问及其方法，但执行相同的功能。Elementattributes
同样，请注意字符串名称不区分大小写。
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>element.id
可以使用 DOM 对象上的便捷属性访问许多属性。给定对象上存在哪些属性取决于对象的 DOM 节点类型，而不管在 HTML 中指定了哪些属性。可用属性是在相关 DOM 对象的原型链中的某个位置定义的。因此，定义的特定属性将取决于您要访问的元素的类型。
例如，在所有作为元素的 DOM 节点上定义并存在于 DOM 节点上，但不是文本或注释节点。 定义更窄。它仅在HTMLInputElement及其后代上可用。classNameidElementvalue
请注意，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等）没有遵守甚至早于规范。如果您需要支持旧的古代（损坏的）浏览器，则需要比此处提供的信息更多的信息。
