如何用getElementById获取表单元素？解析代码中注释1、2失效原因

先看你HTML里的输入框核心信息：

<input type="number" name="n" id="d">

它的name属性是n，id是d，咱们结合这个前提拆解两个注释的问题：

注释1的问题 #

代码：document.myform.getElementsByName("name1")[0].value
这里有两个致命错误：

• 方法调用对象错误：getElementsByName()是document对象专属的方法，你不能通过document.myform（也就是form元素实例）来调用它。如果想用这个方法，必须直接通过document调用。
• 参数不匹配：你的输入框name属性是n，但你传的参数是name1，就算方法调用正确，也找不到对应的元素。

修正后的正确写法：

var element = document.getElementsByName("n")[0].value;

注释2的问题 #

代码：document.myform.getElementsById("id1").value
这里的错误更明显：

• 方法名称错误：根本不存在getElementsById()这个方法，正确写法是getElementById()（注意是单数Element，因为ID在页面中是唯一的，只会返回单个元素）。
• 调用对象错误：和getElementsByName一样，getElementById()也是document专属方法，不能通过form元素实例调用。
• 参数不匹配：输入框的id是d，你传的是id1，自然找不到目标元素。

修正后的正确写法：

var element = document.getElementById("d").value;

顺便补充下你能正常工作的注释3和4的逻辑：

• 注释3：document.myform.elements[0].value——elements是form元素的内置属性，会返回表单内所有控件的集合，这里第一个元素就是你的输入框，所以能正确取值。
• 注释4：document.myform.d.value——form元素支持直接通过控件的id或name访问对应元素，这里d是输入框的id，所以能简洁地获取到值。

内容的提问来源于stack exchange，提问作者Naziha ALI SAOUCHA