Fra*_*isc 209 javascript attributes setattribute
有没有开发使用setAttribute而不是dot(.)属性表示法的最佳实践？
例如:
myObj.setAttribute("className", "nameOfClass");
myObj.setAttribute("id", "someID");
要么
myObj.className = "nameOfClass";
myObj.id = "someID";
ola*_*lan 130
从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
Ben*_*Ben 69
之前的答案都没有完整,大多数都包含错误的信息.
在JavaScript中有三种访问DOM 元素属性的方法.只要您了解如何使用它们,这三种方法都可以在现代浏览器中可靠地工作.
element.attributes元素有一个属性的属性,它返回一个活的NamedNodeMap的的Attr对象.浏览器中此集合的索引可能不同.因此,订单无法保证.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>element.getAttribute&element.setAttribute这些方法直接存在于Element不需要访问attributes及其方法但执行相同的功能.
再次注意,字符串名称不区分大小写.
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对象的原型链中的某处定义.定义的特定属性取决于您正在访问的Element的类型.例如,className并且在所有作为元素的DOM节点上id定义Element并存在(即,不是文本或注释节点).但是value更狭隘.它是HTMLInputElement在其他元素上定义的,也可能不存在.
请注意,JavaScript属性区分大小写.虽然大多数属性都使用小写,但有些属性是camelCase.因此,请务必检查规格.
这个"图表"捕获了这些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规范定义和现代浏览器如何处理属性的解释.我没有尝试处理古老的,破碎的浏览器的局限性.如果您需要支持旧版浏览器,除了这些信息之外,您还需要了解这些浏览器中的内容.
小智 67
.attribute如果您想在JavaScript中进行编程访问,则应始终使用直接表单(但请参阅下面的quirksmode链接).它应该正确处理不同类型的属性(想想"onload").
当您希望按原样处理DOM时使用getAttribute/ setAttribute(例如,仅限文字文本).不同的浏览器混淆了两者.请参阅Quirks模式:属性(in)兼容性.
Sho*_*use 16
这些答案并没有真正解决properties和attributes之间的巨大混淆。此外，根据 Javascript 原型，有时您可以使用元素的属性来访问属性，有时则不能。
首先，您必须记住 anHTMLElement是一个 Javascript 对象。像所有对象一样，它们具有属性。当然，您可以在内部创建一个几乎任何您想要的名称的属性HTMLElement，但它不必对 DOM（页面上的内容）做任何事情。点符号 ( .) 用于属性。现在，有一些特殊的属性映射到属性，并在当时或写，只有4所保证的（稍后更多）。
所有HTMLElements 都包含一个名为 的属性attributes。HTMLElement.attributes是一个与 DOM 中的元素相关的活动 NamedNodeMap对象。“活”意味着当节点在 DOM 中发生变化时，它们在 JavaScript 端发生变化，反之亦然。在这种情况下，DOM 属性是有问题的节点。ANode具有.nodeValue您可以更改的属性。NamedNodeMap对象有一个函数setNamedItem，您可以在其中更改整个节点。也可以通过key直接访问节点。例如，您可以说.attributes["dir"]which 与.attributes.getNamedItem('dir');(Side note, NamedNodeMapis case-insensitive, so you can pass 'DIR');
直接有一个类似的函数HTMLElement，您可以直接在其中调用setAttribute它，如果它不存在，它将自动创建一个节点并设置nodeValue. 还有一些属性可以HTMLElement通过特殊属性作为属性直接访问，例如dir. 这是它的外观的粗略映射：
HTMLElement {
attributes: {
setNamedItem: function(attr, newAttr) {
this[attr] = newAttr;
},
getNamedItem: function(attr) {
return this[attr];
},
myAttribute1: {
nodeName: 'myAttribute1',
nodeValue: 'myNodeValue1'
},
myAttribute2: {
nodeName: 'myAttribute2',
nodeValue: 'myNodeValue2'
},
}
setAttribute: function(attr, value) {
let item = this.attributes.getNamedItem(attr);
if (!item) {
item = document.createAttribute(attr);
this.attributes.setNamedItem(attr, item);
}
item.nodeValue = value;
},
getAttribute: function(attr) {
return this.attributes[attr] && this.attributes[attr].nodeValue;
},
dir: // Special map to attributes.dir.nodeValue || ''
id: // Special map to attributes.id.nodeValue || ''
className: // Special map to attributes.class.nodeValue || ''
lang: // Special map to attributes.lang.nodeValue || ''
}
因此，您可以通过dir6 种方式更改属性：
// 1. Replace the node with setNamedItem
const newAttribute = document.createAttribute('dir');
newAttribute.nodeValue = 'rtl';
element.attributes.setNamedItem(newAttribute);
// 2. Replace the node by property name;
const newAttribute2 = document.createAttribute('dir');
newAttribute2.nodeValue = 'rtl';
element.attributes['dir'] = newAttribute2;
// OR
element.attributes.dir = newAttribute2;
// 3. Access node with getNamedItem and update nodeValue
// Attribute must already exist!!!
element.attributes.getNamedItem('dir').nodeValue = 'rtl';
// 4. Access node by property update nodeValue
// Attribute must already exist!!!
element.attributes['dir'].nodeValue = 'rtl';
// OR
element.attributes.dir.nodeValue = 'rtl';
// 5. use setAttribute()
element.setAttribute('dir', 'rtl');
// 6. use the UNIQUELY SPECIAL dir property
element["dir"] = 'rtl';
element.dir = 'rtl';
您可以更新方法＃1-5的所有属性，但只dir，id，lang，并className与方法＃6。
HTMLElement有这 4 个特殊属性。一些元素是HTMLElement具有更多映射属性的扩展类。例如，HTMLAnchorElement有HTMLAnchorElement.href，HTMLAnchorElement.rel和HTMLAnchorElement.target。但是，请注意，如果您在没有这些特殊属性的元素上设置这些属性（例如在 a 上HTMLTableElement），则属性不会更改，它们只是普通的自定义属性。为了更好地理解，这里有一个继承的例子：
HTMLAnchorElement extends HTMLElement {
// inherits all of HTMLElement
href: // Special map to attributes.href.nodeValue || ''
target: // Special map to attributes.target.nodeValue || ''
rel: // Special map to attributes.ref.nodeValue || ''
}
现在最大的警告是：像所有 Javascript 对象一样，您可以添加自定义属性。但是，这些不会改变 DOM 上的任何内容。你可以做：
const newElement = document.createElement('div');
// THIS WILL NOT CHANGE THE ATTRIBUTE
newElement.display = 'block';
但这与
newElement.myCustomDisplayAttribute = 'block';
这意味着添加自定义属性不会链接到.attributes[attr].nodeValue.
表现
我已经构建了一个 jsperf 测试用例来显示差异：https://jsperf.com/set-attribute-comparison。基本上，按顺序：
dir, id, className)。element.attributes.ATTRIBUTENAME.nodeValue = element.attributes.getNamedItem(ATTRIBUTENAME).nodeValue = newValueelement.attributes.ATTRIBUTENAME = newNode element.attributes.setNamedItem(ATTRIBUTENAME) = newNode结论 (TL; DR)
从使用特殊的属性映射HTMLElement：element.dir，element.id， element.className，或element.lang。
如果您 100% 确定该元素是HTMLElement具有特殊属性的扩展，请使用该特殊映射。（您可以使用 进行检查if (element instanceof HTMLAnchorElement)）。
如果您 100% 确定该属性已存在，请使用element.attributes.ATTRIBUTENAME.nodeValue = newValue.
如果没有，请使用setAttribute().
Ant*_*ony 14
我找到的一个案例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"