更新

Question

我从this post收集几乎总是想要访问DOM属性，而不是HTML属性。

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

Answer 1

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

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

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

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

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

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

DEMO： 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 McDonald所述，有些DOM属性会为您提供反映原始属性值的初始值。

HTMLInputElement.defaultChecked
HTMLInputElement.defaultValue

Answer 2

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

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

问题是表单中的任何输入都会在表单元素中创建与输入name对应的属性，从而覆盖该属性的任何现有值。因此，在这种情况下，表单元素的action属性是对名为<input>的{{1}}元素的引用。如果该输入不存在，则action属性将引用action属性并包含字符串“save.php”。因此，对于与属性相对应的表单元素的属性，例如action和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键入的所有表单元素。我想我们有网景来感谢这个。

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

使用属性的其他场合：

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

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的值 - 属性取决于元素，不能轻易用于查看元素是否具有自定义tabIndex。

查看元素是否具有自定义.maxLength属性。无法从房产中看到：

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

在不处理属性的情况下，无法判断值524288是否有意。

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

3 个答案:

更新