element.setAttribute element['attr'] element.attr 之间的任何差异

Question

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

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

Answer 1

DOM 元素的属性和属性是完全不同的，这种差异会造成一些混乱。

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

您应该使用属性的另一个主要原因是旧版本的 IE（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 之类的内容。