假设我们有一个包含以下输入的表单:(是的,如果我们真的想拥有这些名称会怎么样)
<form id="form-id">
<input type="text" name="submit" />
<input type="text" name="elements" />
<input type="text" name="id" />
<input type="text" name="addEventListener" />
</form>
现在,如果我们尝试访问表单属性,我们得到的只是输入对象:
var form = document.getElementById('form-id');
form.elements; // will be <input type="text" name="elements" /> instead of a list of elements
同样的问题:
form.submit;
form.id;
form.addEventListener;
以及表单对象的所有其他默认属性。
我知道我们可以找到一些其他方式来访问这些属性...... 但我们应该怎样处理那些我们不能做到的事情?
我认为标准应该是不同的,例如:
form.elements = {
"submit": [object HTMLFormElement], // <input type="text" name="submit" />
"elements": [object HTMLFormElement], // <input type="text" name="elements" />
...
etc
}
不是表格本身的属性。
您的建议。
答案 0 :(得分:0)
当然,最简单的方法是大肆渲染问题而忘掉它。但我走得更远,发现如何解决这个问题。所以我会把它留在这里。 IE9 +
HTMLFormElement.prototype.getRealAttribute = function(name) {
var form = this;
var tmpForm = document.createElement('FORM');
/* if it's not overridden */
if (Object.prototype.toString.call(tmpForm[name]) === Object.prototype.toString.call(form[name])) {
if (Object.prototype.toString.call(tmpForm[name]) === "[object Function]") {
return form[name].bind(form);
}
return form[name];
}
/* if it's overridden function */
if (HTMLFormElement.prototype[name]) {
return HTMLFormElement.prototype[name].bind(form);
}
/* if it's an attribute */
if (form.attributes[name]) {
return form.attributes[name].value;
}
/* if it's an overridden property */
var fieldSet = document.createElement('FIELDSET');
fieldSet.innerHTML = form.innerHTML;
return fieldSet[name] || null;
};