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

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

------解决方案--------------------
document.form1.userName：表单form1下搜索name为userName的表单项;

document.getElementById("userName"): 文档下搜索id为userName的DOM.
------解决方案--------------------
document.form1.userName // 用的是name属性

document.getElementById("userName") // 用的是id属性
------解决方案--------------------

探讨

document.form1.userName：表单form1下搜索name为userName的表单项;

document.getElementById("userName"): 文档下搜索id为userName的DOM.