我从这篇文章中得知,几乎总是想要访问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
是否故意存在。