BothLog

今天在firefox下遇到一个奇怪的问题。

html中有下面一个INPUT元素

<input id="q" name="q" value="123"/>

使用input.getAttribute可以取得该input的值

document.getElementById("q").getAttribute("value"); //return 123

但是当通过界面输入将INPUT的值改为456之后，在通过input.getAttribute的方式取值，仍然返回123,但是使用input.value可以返回456.

document.getElementById("q").getAttribute("value"); // return 123
document.getElementById("q").value;          //return 456

下面的网页中有对该问题的完整的分析和测试(已被墙，请用代理访问)

http://updatepanel.net/2008/12/31/more-on-getattribute-setattribute-and-the-value-attribute/

参考上面的分析可以还原出firefox下的实现

假设

• “value” property is element.value;
• “value” attribute is element.getAttribute(”value”);
• HtmlElement中存在_properties[]和_attributes[]两个关联数组来存放propertie和attribute属性

那么在firefox中

htmlElement.value作为等式右值时等价于

function(){
return this._properties["value"]||this._attributes["value"]
}

htmlElement.value作为等式左值时等价于

function(right_value){
this._properties["value"]=right_value;
}

htmlElement.getAttribute(“value”)等价于

function(){
return this._attributes["value"];
}

htmlElement.setAttribute(“value”,”123″)等价于

function(name,value){
this._attributes[name]=value;
}

而在IE中property和attribute的值是完全等价的不存在差异。