jsでのDOM操作（初学で詰まったポイント）

今日からjavascriptを学習し始めました。C系しか触ったことないので
混乱しています。🐬

DOM操作つまづきポイント：
・querySelectorで複数要素を取れるか？🐬
・データ属性も取れるのか？🐬
・querySelectorは該当したものが複数ある場合どうしているか？🐬
・独自のセレクターも取れるのか？🐬
・getElementsByClassNameは常に複数なのか？🐬
・子要素をつけたり外したりはどうするのか？🐬

🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊

querySelectorで複数要素を取れるのか？🐬

⇨取れません。
querySelectorの指定方法で複数要素をとりたいときはquerySelectorAllを使うようです。

var elements = document.querySelectorAll('.iruka');

これでirukaクラスが全て取れます。

データ属性も取れるのか？🐬

⇨取れました。
データ属性・・・ユーザごとが自分で作れる独自のHTMLの属性。

<div data-animal="iruka">🐬</div>

data-animalなんて属性は聞いたことがありません。これがデータ属性らしいです。接頭辞にdata-をつけます。
データ属性は以下の記法で取得できます。

var element = document.querySelector('[data-animal="iruka"]');

querySelectorは該当したものが複数ある場合どうしているか？🐬

例えば,

<div class="iruka">バンドウイルカ</div>
<div class="iruka">アマゾンカワイルカ</div>

というHTMLだった場合に、

var element = document.querySelector('.iruka');

としたとき、elementの中はバンドウイルカなのでしょうか？アマゾンカワイルカなのでしょうか？

正解は、querySelectorは最初の要素（＝上の方に書かれた要素）を取得するので
バンドウイルカになります。

独自のセレクターも取れるのか？🐬

→普通に取れます。

<skin>キュッキュ</skin>

こんな独自のセレクターが現れた場合はこうです。

var element = document.querySelector('skin');

独自セレクターも普通のセレクターと同じ扱いです。

getElementsByClassNameは常に複数なのか？🐬

→いつだって複数です。なので注意が必要な場合があります。

<div class="alone">🐬</div>

このようにaloneクラスがドキュメント全体で一個しかない場合でも、複数扱いになります。よって

var element = document.getElementsByClassName('alone');
element.style.display = 'none';

としても、イルカは消えません。
消すには、element[0]と要素指定してあげるか、querySelector('.alone')でとってあげましょう。

タグをつけたり外したりはどうするのか？🐬

忘れそうなのでメモ。

element.appendChild(追加する子要素）;
element.removeChild(除去する子要素);

今日は以上です。
ちなみにイルカも好きですが、シャチの方が好きなので、シャチの絵文字が出ないかな〜
といつも思ってます。🐬