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(除去する子要素);
今日は以上です。
ちなみにイルカも好きですが、シャチの方が好きなので、シャチの絵文字が出ないかな〜
といつも思ってます。🐬