document.formName.name与 document.getElementById的区别

Question

有一个表单
<form name="form1">
   <input type="text" name="userName" id="userName">
</form>
js方法中
想知道document.form1.userName 与 document.getElementById("userName")到底有什么区别，这两种方法有什么更深入的历史，其中document.form1.userName这种形式form1与userName都为name属性的话，浏览器也可以通过

Answer 1

document.form1.userName：表单form1下搜索name为userName的表单项;document.getElementById("userName"): 文档下搜索id为userName的DOM.

Answer 2

document.form1.userName  // 用的是name属性document.getElementById("userName")  // 用的是id属性