何时访问属性（vs属性）？

Question

我从这篇文章中收集到， 几乎总是有人想要访问DOM属性，而不是HTML属性。

那么什么是罕见的有用例外？ 在什么情况下访问HTML属性比访问DOM属性更好？

Answer 1

有时，属性不会映射到属性中的更改。

一个例子是复选框的checked属性/属性。

演示： http ： //jsfiddle.net/mxzL2/

<input type="checkbox" checked="checked"> change me

---

document.getElementsByTagName('input')[0].onchange = function() {

    alert('attribute: ' + this.getAttribute('checked') + '\n' +
          'property: ' + this.checked);
};

---

...而ID属性/属性将保持同步：

演示： http ： //jsfiddle.net/mxzL2/1/

<input type="checkbox" checked="checked" id="the_checkbox"> change me

---

var i = 0;

document.getElementsByTagName('input')[0].onchange = function() {

    this.id += ++i;
    alert('attribute: ' + this.getAttribute('id') + '\n' +
          'property: ' + this.id);
};

自定义属性通常根本不映射。 在这些情况下，您需要获取该属性。

---

也许一个可能更有用的案例是文本输入。

<input type="text" value="original">

...随着DOM或用户的更改，属性不会发生变化。

---

正如@Matt麦克唐纳所指出的那样 ，DOM属性会为您提供反映原始属性值的初始值。

HTMLInputElement.defaultChecked
HTMLInputElement.defaultValue

Answer 2

一个罕见的例外是<form>元素的属性可能与<form>元素冲突。 例如，请考虑以下HTML：

<form id="theForm" method="post" action="save.php">
    <input name="action" value="edit">
</form>

问题是表单中的任何输入都会在表单元素中创建与输入name对应的属性，从而覆盖该属性的任何现有值。 所以在这种情况下，form元素的action属性是对带有name action的<input>元素的引用。 如果该输入不存在，则action属性将引用action属性并包含字符串“save.php”。 因此，对于与属性相对应的表单元素的属性，例如action和method ，使用getAttribute()是最安全的。

var form = document.getElementById("theForm");

// Alerts HTMLInputElement in most browsers
alert( form.action );

// Alerts "save.php"
alert( form.getAttribute("action") );

// Alerts "post" because no input with name "method" exists
alert( form.method ); 

这很不幸; 如果这个映射不存在会更好，因为表单的elements属性已经包含了所有按name键入的表单元素。 我想我们有网景来感谢这个。

现场演示： http ： //jsfiddle.net/z6r2x/

其他使用属性的场合：

• 访问自定义属性时，例如<div mymadeupattr="cheese"></div>
• 序列化DOM时，您希望原始HTML中的值用于输入属性（如value和checked 。

Answer 3

我只能提出另外两种情况，其中访问/设置属性对财产有好处。

样式属性：

在不允许使用任何框架的情况下，您可以使用style属性一次设置多个样式，如下所示：

elem.setAttribute( "style", "width:100px;height:100px;" );

而不是这样做：

elem.style.width = "100px";
elem.style.height = "100px";

或这个：

var styles = {width: "100px", height: "100px"}, style;

for( style in styles ) {
elem.style[style] = styles[style];
}

请注意，设置样式属性会覆盖前一个属性。 无论如何，编写多样式setter函数可能更好。

Href属性：

href属性通常包含类似“/ products”的值，但该属性将包含已解析的URL，如：“ http://www.domain.com/products ”而不是您真正想要的：“/ products” 。 因此，如果你想用链接动态地做一些事情，那么读取href属性而不是属性是更好的，因为它具有你想要的值。

更新

我突然发现了2个用途，我相信还有更多这样的用途。

如果要查看元素是否具有自定义选项卡索引集，则简单的方法是查看该元素是否具有该属性。 由于.tabIndex -property的默认值取决于元素，因此无法轻易查看该元素是否具有自定义tabIndex。

查看元素是否具有自定义.maxLength属性。 从财产中也看不到：

document.createElement("input").maxLength
//524288

如果没有处理属性，就无法判断值524288是否存在故意。