datasetが上手く取得できません。propaty undefined か undefinedになってしまいます。

Question

<ins class="user" data-user-id="hoge" data-p2="3" data-p3="1"></ins>
<script type="text/javascript">
var elem = document.getElementsByClassName('user');
console.log( elem.dataset.userId );
</script>

結果：Uncaught TypeError: Cannot read property 'userId' of undefined

試したこと、キャメルケースが上手くいていない？classが行けない？などなど色々試してみました。

キャメルケースを止めてみた

<ins class="user" data-user="hoge" data-p2="3" data-p3="1"></ins>
<script type="text/javascript">
var elem = document.getElementsByClassName('user');
console.log( elem.dataset.user );
</script>

結果：Uncaught TypeError: Cannot read property 'user' of undefined

classを止めてみた

<ins id="user" data-user="hoge" data-p2="3" data-p3="1"></ins>
<script type="text/javascript">
var elem = document.getElementById('user');
console.log( elem.dataset.user );
</script>

結果：undefined

単純な見逃しだと考えていますが、何を見逃しているのでしょうか？
よろしくお願いいたします。

Comments

[azuapricot]

まず、elemで何が取得できているのかデバッグで見てみましたか？

[Samson818]

ありがとうございます。
試し済です。
改めて試すと　HTML Collection [ins.user ]　と出ております。

attributes に　data-user があり、nodeValue :"hoge" です。

Answer 1

getElementsByClassNameではなくquerySelectorを使ってみたらどうでしょうか？

Comments

[Samson818]

ありがとうございます。
試したところ　Uncaught TypeError: Cannot read property 'dataset' of null
と出て参りました。
これは初めて出たエラーです。

[e-suzuno]

おそらくですが、引数の部分をuserをそのまま入れているのかと思います。
querySelectorを使う時は、classの場合はドットをつけてみてください。
例
var elem = document.querySelector('.user');

[Samson818]

出ました！ありがとうございます！！

色々な解説読んでもgetElementsbyClassNameは駄目とも非推奨とも書いてなかったのですが、根本を理解していないですね。

[e-suzuno]

自分もうっかりしてましたが、
getElementsByClassNameの場合ですと複数形なので

var elem = document.getElementsByClassName('user');
elem[0].dataset.userId

と記述してたならアクセスできたかもしれません