#javascriptでのDOM操作 まとめ
前回jsでのDOM操作で詰まったところをまとめたが、（jsでのDOM操作（初学で詰まったとこ))
使用できるメソッド等が紹介したもの以外でもいっぱいあって混乱しそうだったので、簡単にまとめます。🐴
今日の学び一覧
・親要素と子要素のとりかた🐎
・子要素として追加する方法色々🐎
・DOMContentLoaded🐎
・クラスについての操作🐎
・カスタムデータの取得について🐎
・要素の複製（querySelector × appendChildの罠）🐎
・preventDefaultメソッド🐎
##親要素と子要素のとりかた🐎
var get = element.parentNode //elementの親要素が代入される
var get = element.children //elementの子要素が代入される
##子要素として追加する方法色々🐎
①まず基本のappendChild。
element.appendChild(div); //最後の子要素として追加
しかし、子要素を最初に入れたり、特定の位置で入れた場合が出てくる。
その時はinsertBeforeメソッドを使用する。
②エレメント.insertBefore(追加する要素,ここので指定した要素の直前に追加される)
以下、使用例
element.insertBefore(div, element.firstChild); //最初の子要素として追加
element.parentNode.insertBefore(div, element); //element要素直前に追加
##DOMContentLoaded🐎
ここでjavascriptで要素のチェックしよう！
→あれ、うまくいかないぞ、、
ということがあった場合に考えられるのが、要素の読み込みがまだ終わっていないという状況です。
javascriptの方が早く読まれてしまってるんですね。
それを防止できるのがDOMContentLoadedです。
これを使うと、HTMLの読み込みが終わったらこの処理を開始、ということができます。
document.addEventListener('DOMContentLoaded',()=>{
//読み込み後に行いたい処理
});
##クラスについての操作🐎
element.className ="horse"
これでエレメントにつくクラスをhorseにすることができます。
ただ問題があって、元々ついてた他のクラスも外してしまいます。
elementにanimalクラスがついていた場合、horseのみしかつかないということです。
追加や削除をしたい場合はclassListメソッドが便利です。
//クラス名の追加
document.getElementById('element').classList.add('active');
//クラス名の削除
document.getElementById('element').classList.remove('active');
//トグル
document.getElementById('element').classList.toggle('active');
//要素が指定したクラス名を持っているか
document.getElementById('element').classList.contains('active');
トグル・・・ついてない場合はつける、ついてる場合は外します。
条件分岐を書かないでいいので楽です🏇
containsに関しては返り値がブーリアン型になります。
##カスタムデータの操作について🐎
<h1 data-top-size="big"></h1>
このようなカスタムデータがついている場合、カスタムデータは
var customData = document.querySelector('h1.dataset.topSize')
//bigが入る
CSSのプロパティ取得でもそうですが、
ハイフンが入る場合はハイフンを消してキャメルケースに直さなければいけません。🐴
data-top-size →dataset.topSize
##要素の複製（querySelector × appendChildの罠）🐎
要素を複製したい場合に、単純にquerSelectorなどで取得した要素を
appendChildで子要素に付け足した場合、
元の取得した部分は実は消えてしまいます！
複製にはcloneNodeを使います。
var clone = news.firstElementChild.cloneNode(true); //複製する
news.appendChild(clone): //それをくっつける
引数部分はtrueだと孫要素ごと丸っとコピー、
falseだと子要素はコピーしない！となります。
##preventDefaultメソッド🐎
ブラウザが元からもつ動き、要素が元からもつ動きを封じることができます。
例えば、（このaタグが押されたらアニメーションをつけたい、けどリンクのせいで飛ばされちゃう...)
といった時、aタグのリンクジャンプ機能を封じることができるようです。
element.addEventListener( 'click', function(e){
e.preventDefault(); //クリックした時の元の動きを封じる
});