何时访问属性(vs .属性)

When to access the attribute (vs the property)?

本文关键字：属性 vs 何时 访问      更新时间：2023-09-26

我从这篇文章中得知，几乎总是想要访问DOM属性，而不是HTML属性。

那么有哪些罕见的有用的例外呢?在什么情况下访问HTML属性比访问DOM属性更好?

有时属性不能映射到属性的更改。

一个例子是复选框的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 McDonald所指出的，有一些DOM属性会给你反映原始属性值的初始值。

HTMLInputElement.defaultChecked
HTMLInputElement.defaultValue

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

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

问题是表单中的任何输入都会在表单元素中创建一个与输入的name相对应的属性，覆盖该属性的任何现有值。因此，在这种情况下，表单元素的action属性是对名称为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。

我只能想出另外两种访问/设置属性会有好处的情况在财产。

样式属性:

在不允许使用任何框架的情况下，可以使用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];
}

注意，设置style属性会覆盖前一个属性。最好还是写下来一个多重样式设置函数。

Href属性:

一个href属性通常会包含一个像"/products"这样的值，但是该属性会包含解析后的url，如下所示:"http://www.domain.com/products"而不是你真正想要的:"/products"。如果你想动态地用链接，那么读取href属性而不是property会更好，因为它具有您想要的值。

<标题> 更新

我突然发现了另外两种用法，我相信还有更多这样的用法。

如果您想查看元素是否有自定义选项卡索引集，最简单的方法是查看元素是否有该属性。自默认设置以来.tabIndex -property的值取决于元素，不能很容易地用来查看元素是否有自定义tabIndex。

查看元素是否有自定义的.maxLength属性。这也不能从属性中看到:

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

如果不处理属性，就不可能判断值524288是否故意存在。

相关文章：