Question

我注意到javascript有几种方法来设置和获取元素的属性。

我不确定他们之间是否有任何差异。特别是，是否存在跨浏览器问题。

Answer 1

DOM元素的属性和属性是完全不同的，这种差异引起了一些混淆。

一个问题是并非每个属性都映射到同名的属性。例如，value元素的<input>属性映射到defaultValue属性，而value属性不映射到任何属性（旧IE中除外：见下文））。

您应该使用属性的另一个主要原因是旧版本的IE（＆lt; = 7和更高版本中的兼容模式）错误地实现了getAttribute()和setAttribute()。大多数属性直接映射到IE中具有相同名称的属性，这具有许多不幸的效果，例如设置事件处理程序属性在IE中无法正常工作。以下页面包含一些有用的信息：http://reference.sitepoint.com/javascript/Element/setAttribute

还有其他差异。例如，处理URL的属性/属性在处理相对URL的方式上存在一些差异。

要查看符合标准的浏览器中属性和属性之间的区别，请考虑文本框的值：

<input type="text" id="textbox" value="foo">

var textBox = document.getElementById("textbox");

console.log(textBox.getAttribute("value")); // "foo"
console.log(textBox.value); // "foo"
console.log(textBox.defaultValue); // "foo"

现在，如果用户键入文本框或使用脚本更改文本框的值，我们会看到属性和属性值分歧：

textBox.value = "bar";
console.log(textBox.getAttribute("value")); // "foo"
console.log(textBox.value); // "bar"
console.log(textBox.defaultValue); // "foo"

设置属性值现在对当前值没有影响：

textBox.setAttribute("value", "baz");
console.log(textBox.getAttribute("value")); // "baz"
console.log(textBox.value); // "bar"
console.log(textBox.defaultValue); // "baz"

Answer 2

Javascript保证element["attr"]和element.attr相同。

然而，

setAttribute()不是语言本身的一部分，而是它上面的DOM层的一部分。不能保证它与对attr属性的写入相同。它可以做得更多，甚至更少（即甚至不更新对象的attr属性，并要求您调用getAttribute()来获取值。）

在实践中，这三种方式通常是等价的。但要注意this之类的内容。

element.setAttribute element ['attr'] element.attr之间的任何区别

2 个答案: