querySelectorAll()の返り値について

Question

(HTML)
<input type="text" name="id">
<input type="password" name="pw">
<input type="tel" name="tel">
<button in="btn">check</button>

(JavaScript)
document.querySelector("#btn").addEventListener("click",
function() {
  document.querySelectorAll("input").forEach(
    function(input) {
      if(!input.value) {
        alert(input.name + " :error");
      }
    });
});

JavaScript４行目「function(input)」の仮引数inputには、
３行目の「document.querySelectorAll("input")」から返される
NodeList内のinput要素が、渡されるのでしょうか？
よろしくお願い致します。

Answer 1

そのとおりです。正確には、Array.prototype.forEachと同様、コールバックには「エレメント」「インデックス」「NodeList全体」の3つの引数が渡され、そのうち1つ目だけ受け取っている、という形です。

なお、ブラウザによっては、NodeListにforEachがないことがありますので、要注意です。

Comments

[taka_oct092018]

返信ありがとうございます。

Answer 2

JavaScript４行目「function(input)」の仮引数inputには、３行目の「document.querySelectorAll("input")」から返されるNodeList内のinput要素が、渡されるのでしょうか？

正確には "input" にマッチする要素が渡される、ですが多分言いたいことに対しては YES だと思います。
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll