表单中的一些隐晦的bug

平时我们都是按照前人的用法和经验去使用一些知识，但我们并不是很了解其中的原理，直到我们遇到bug，才开始去深入分析和学习。直接上代码。

<form id="form" action="your url">  

    <input type="text" id="submit" value="q">  

  <input type="text" id="x" > 

</form>

var form = document.getElementById('form'); 

form.submit()；

运行以上的代码，会出现error，信息是submit不是一个函数，下面我们来大概分析一下原因，以下只是个人分析，有待更深入的理解。

我们知道，可以在js中直接通过id引用dom节点，上面所以这一句（var form = document.getElementById('form')）其实可以不要，废话不多说，form代表的是表单节点，那么submit代表的是什么呢？正常来说，他是一个函数，位于HTMLFormElement.prototype.submit中。所以平时我们使用的时候就是去调用了这个函数。那么现在怎么就挂掉了呢？下面我们再看看form.x是什么？通过输出我们可以知道踏实一个input元素，那么谜底揭开了，因为我们有一个id为submit的元素，那么这时候form.submit到底是函数还是对象呢？我们可以输出typeof
form.submit，他是一个input节点，输出form.submit.value可以知道，他就是第一个input节点，由此可知，formde submit函数被覆盖掉了。下面形象地描述一下这个过程（但事实不一定就是这样）

假设form是一个对象，form={}，他是HTMLFormElement的实例，他的原型是HTMLFormElement.prtotype，当form下面有两个个input子节点时，form={“submit”：“input节点”，“x”：“input子节点”}，正常情况下我们访问form的submit时，会跑到原型中去执行HTMLFormElement.prototype.submit，但是这时候form对象中的submit劫持了submit，使得我们不需要去访问原型中的submit了。所以就出错了。而利用HTMLFormElement.prototype.submit（form），我们显式地调用原型中的submit时就可以解决这个问题。这只是其中一个隐晦的bug，其他的有时间再研究。