javascript - element.setAttribute 元素 ['attr' 之间的任何差异] element.attr

Question

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

我不确定它们之间有什么区别。特别是，是否存在跨浏览器问题。

Answer 1

DOM 元素的特性和属性有很大不同，这种差异是一些混淆的根源。

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

你应该使用属性的另一个主要原因是旧版本的 IE(<=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"