输入的document.forms名称选择器如何在JavaScript DOM中工作？

在流星的待办事项应用教程，有这样的例子：输入的document.forms名称选择器如何在JavaScript DOM中工作？

Template.body.events({ 
    "submit .new-task": function (event) { 
     // Prevent default browser form submit 
     event.preventDefault(); 

     // Get value from form element 
     var text = event.target.text.value; 

     [...] 
    } 
    });

这是相关的HTML：

<form class="new-task"> 
    <input type="text" name="text" placeholder="Type to add new tasks" /> 
    </form>

令我惊讶的是event.target.text.value是一个有效的选择，虽然text不是属性的event.target对象。

有人可以向我解释为什么这是有效的？

来源

2015-09-06 Alexandre Bourlier

您能证明倒票吗？！向我解释为什么这是一个有效的选择器，而不是downvoting DA –

在您的代码片段中，event.target是对表单的引用。

event.target.text是对名称为“text”的表单元素的引用，该表单被传递给表单元素中输入集合中的回调函数。

注意：这是形成了独特的属性，为向后兼容性与预DOM document.forms集合，它的名字，而不是通过ID引用的形式和他们的输入元素。例如，您可以参考此页面上的搜索表单输入使用document.forms.search.q

来源

2015-09-06 13:36:24

所以在Javascript中，可以使用点符号通过'name'查询元素？我试过了，但没有奏效。我在控制台中选择了表单元素，执行'var form = document.getElementsByClassName（“new-task”）;'，然后'var input = form.text;'。但是这会返回'undefined'。所以点符号似乎没有被标准化为从父母名称中选择元素。 –

编辑答案和解释 –

@AlexandreBourlier - 'document.getElementsByClassName（“new-task”）'返回一个数组。尝试'document.getElementsByClassName（“新任务”）[0] .text'，它应该很好 –

输入的document.forms名称选择器如何在JavaScript DOM中工作？

回答

相关问题