前書き
よくありそうな間違い、エラーの原因をクイズにしてみました。
エラーが起きてしまったコードを見て、その原因をお答えください。
①３つのliを取得して、先頭を出力するぞ！
間違いは３つあります。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
<ul>
<li class="item">hoge</li>
<li class="item">fuga</li>
<li class="item">piyo</li>
</ul>
</body>
</html>
main.js
const items = document.getElementsByClassName("item");
const initialItem = items.shift;
console.log(initialItem);
結果
Uncaught TypeError: items.shift is not a function
脳内
const items = document.getElementsByClassName("item");
で３つのitemを取得して、
const initialItem = items.shift;
shiftでその先頭を変数initialItemに保存して、
console.log(initialItem);
出力！
エラー！
出来ないぞオラ👊
原因
クリックで表示
① HTMLファイルで、scriptタグをheadタグに書いていること
bodyタグが読み込まれるより先にscriptが読み込まれるので、以下のいずれかの対策が必要になります。（ほかにもあるかもしれません）- bodyタグの一番下に書く
- window.onloadで囲む
のようにして対策しましょう。
② 配列風オブジェクトに対して配列用のメソッドを使おうとしていること
document.getElementsByClassName("hoge")で取得出来るのは配列風オブジェクトです。
こちらをご覧ください。
const items = document.getElementsByClassName("item");
console.log(items); // HTMLCollection(3)
console.log([1, 2, 3]); // Array(3)
配列をconsole.logした場合は下のように、Array(3)と表示されますが、itemsの場合はHTMLCollection(3)と表示されます。
配列風オブジェクトであるitemsに対してshift()メソッドは使えないので、Array.from(items)として配列風オブジェクトから配列に変換してあげる必要があります。
③ shiftに()を付けていないこと
shiftは配列のメソッドです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/shift
以上をまとめて直してみると
window.onload = () => {
const items = document.getElementsByClassName("item");
const itemsArray = Array.from(items);
const initialItem = itemsArray.shift();
console.log(initialItem);
}
うまく行きました。
まとめ
他思いつかなかった