获取input节点的正确方法

获取 input 节点的正确方法 （）

<form class="file" name="upload">

<input id="file" name="file" />

</form>

A document.querySelectorAll('file')[0]

B document.getElementById('file')[0]

C document.getElementByTagName('file')[0]

D document.getElementsByName('file')[0]

答案: D

首先区别以下函数:

    document.querySelector() 返回与指定的选择器组匹配的元素的后代的第一个元素;

    document.querySelectorAll() 返回与指定的选择器组匹配的文档中元素列表.返回的对象是NodeList;

    document.getElementById() 返回一个Element对象，表示id属性与指定字符串匹配的元素;

    document.getElementsByClassName() 返回具有所有给定类名的所欲子元素的类数组对象.返回的对象是HTMLCollection;

    document.getElementsByTagName() 返回具有给定标记名称的元素的HTMLCollection;

    document.getElementsByName() 返回文档中具有给定名称的元素的Nodelist集合.

关于A答案,A中传入的selector为"file"是错误的,会查询不到"file",返回一个空的NodeList集合.

应改为document.querySelectorAll('#file')[0]

关于B答案,document.getElementById()返回的是一个Element对象而不是一个集合.

应改为document.getElementById("file")

关于C答案,document.getElementByTagName()返回的是标签名匹配的HTMLCllection集合

应改为document.getElementByTagName("input")[0]

而关于D答案,由于input的属性name为"file",document.getElementsByName() 返回文档中具有给定名称的元素的Nodelist集合

所以D为正确答案.