輸入的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中工作？

回答

相關問題