splice is not a function というエラーが出て実行できない

【javascript】配列の中から複数の要素を取り出したい

発生している問題・エラーメッセージ

要素をn回削除するようにして複数の要素を取り出そうとしたのですがうまくいきません。

splice is not a funciton

該当のソースコード

[html]
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;
    charset=shift_jis" http-equiv"Content=Type" />
<title></title>
<link rel="stylesheet" type="text/css" href="背景など.css">
</head>
<body>
<h1>マインスイーパーランダム</h1>
<table id="field">
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
<script src="moving.js"></script>
</body>
</html>

[js]
var array = document.getElementsByTagName('td');
var rand = Math.floor(Math.random()*array.length);
array.splice(rand,1);
console.log(array);

補足情報（FW/ツールのバージョンなど）

google chromeで検証(バージョン: 72.0.3626.96（Official Build）)

行動規範の内容に同意します

回答4件

getElementsByTagNameで取得できるのはarrayではなくHTMLCollectionです。よってarrayのメソッドを使うには

js
1var collection = document.getElementsByTagName('td');
2var array = Array.from(collection);
3var rand = Math.floor(Math.random()*array.length);
4array.splice(rand,1);
5console.log(array);

のようにHTMLCollectionをArrayに変換してあげる必要があります。

投稿2019/02/13 13:09

user14

総合スコア125

ベストアンサー

簡単です。
arrayに入っているのは、配列ではないですからです。
正しくは、DOMが入っている、配列のようなものです。
HTMLCollectionと言います。
なので、配列型のメソッドである、spliceが使えないのです。
ですが、HTMLCollectionでも配列関数扱う方法はあります。

javascript
1[].splice.call(array, rand, 1);

ただし、これは実行エラーになります。
これは、arrayが、HTMLCollection型変数で、これは配列の要素数を通常の配列と同じように、減らす、ということができないからです。

よって、要素を一個一個、配列変数に入れ直す必要があります。

javascript
1var arrList = [].map.call(array, function(val){
2  return val;
3});
4
5arrList.splice(rand,1);

これならば、splice関数を実行できます。
ただし、arrListはあくまで、配列変数となっているので、HTMLCollectionメソッドは使うことはできません。

投稿2019/02/13 13:15

編集2019/02/13 13:18

miyabi_pudding

総合スコア9528

document.getElementsByTagNameが返すのは、ArrayクラスオブジェクトじゃなくてHTMLCollectionクラスオブジェクトなので、spliceメソッドはありません。
Arrayにコピーしてからspliceするのでしょうか。

あと、エラーメッセージは、splice is not a funcitonじゃなくてarray.splice is not a funcitonでは？

投稿2019/02/13 13:08

otn

総合スコア84559

getElementsByTagNameが返すのはHTMLCollectionで配列では無いのでエラーになります。

js
1var array = Array.from(document.getElementsByTagName('td'));
2```**動くサンプル：**[https://jsfiddle.net/2wutmq9j/](https://jsfiddle.net/2wutmq9j/)
3
4---
5
6【Document.getElementsByTagName() - Web API | MDN】
7[https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName)
8
9【Array.from() - JavaScript | MDN】
10[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from)