プログラマーへの道 #23 の補足説明

こんにちは、プログラマーVTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。

foreach() について

動画中ではチェックボックスにチェックがついているメモを削除するために、 チェックがついているチェックボックスを持つtdの配列をforeach()で回していました。 foreach()はfilter()とは異なり、新規配列を戻り値として生成しないので、単にループの中で処理をするだけの場合に利用されます。

Array.prototype.forEach() - JavaScript | MDN

remove() について

remove()はHTML要素を削除できるメソッドです。

Element.remove() - Web API | MDN

しかし、Internet Explorer（IE） ではサポートされていません。 IEをサポートする場合は removeChild() を利用する必要があります。

参考

• internet explorer - JavaScript remove() doesn't work in IE - Stack Overflow

getElementsByTagName() の戻り値について

getElementsTagName() は指定したタグを取得するためのメソッドです。 指定されたタグが複数存在する可能性があるので、 戻り値としては配列のように複数のHTML要素を持つHTMLCollectionというオブジェクトになります。

HTMLCollection - Web API | MDN

指定されたタグが取得できなかった場合は戻り値がnullになると思っていましたが、 length=0 のオブジェクトが返されていたので、ifの条件を "戻り値がnullかどうか" から "lengthが0かどうか" に修正しました。

//before

if (input == null) {
}

//after

if (input.length == 0) {
}

また、HTMLCollectionが持つ要素にアクセスするには配列のようにアクセスする要素（インデックス）を指定する必要があります。 そのため、以下のように checkbox という変数に代入しています。

const checkbox = input[0]