#DOMとは？
DOMとは、プログラムからHTMLやXMLを操作するための仕組み。
ツリー構造を持っていて、各要素をそれぞれをノードと呼ぶ。
空白や改行もノードになる。
#要素を操作しよう
##IDの要素を取得する
document.getElementById('ID名')
##文章から特定の要素を取得する
document.querySelector('要素名')
中身を帰る場合は以下。
document.querySelector('要素名').textContent
##何秒後に呼び出す
setTimeout(update,1000);
#複数の要素を変更
document.querySelectorAll('要素名')[n].textContent
nは前から何番目を表す。
※DOMツリーの階層から指定することもできる。
#addEventListener();
やりたい内容を（）に入れる。
#タイトル要素の変更
.title = '文字';
#CSSの変更
.style.変更したいプロパティ
※プロパティ名にハイフンがある場合は、二文字目の冒頭を大文字にする。
#classNameを設定する
アクションがあるときに、クラスごと変更する。
<style>
.my-color{
color:red
}
</style>
.className = 'my-color';
この記載方法だと、既存のCSSが上書きされてしまうため、
.classList.add('my-color')にすると加えられる。
また、条件分岐を使ってもできる
if(~classList.contain('my-color') === true){
~.classList.remove('my-color');
}
#カスタム要素を使う
HTMLでは、自分で作った要素を使うことができ、これをカスタム要素と呼ぶ。
「data-」から始まる。
JSでは
〜.dataset.[data-〇〇の〇〇部分を記入]
と記入。
#要素を作ってDOMに追加
１、要素を作る
２、中身を作る
item.textContent = 'item2';
３、DOMに追加
・親要素をauerySelectorで取得
・追加はappendChild();
#複製した要素を追加
1,コピー対象の要素を取得
２，要素をコピー
→cloneNode(true);
3,親要素とコピー対象を置く直後の要素を取得
→insetBefore(コピーした要素,直後の要素);
#要素の削除
１，取得
２，removeメソッド
もしくは、親Node.removeChild(削除するNode);
#input要素の活用
1,リストに追加する要素作成(li)
2.inputした要素を定義(text)
3.リストに追加する内容をinputにする
li.textContent = text.value;
入力された値はvalue属性で取得できる。
4.appendChild(li)で追加
5.text.value ="";
text.focus();
#selectボックスで行う
ボタンを押したら下に記載される
１．liを作成
→createElement('li')
２．セレクト要素を取得
→querySelector('select');
３．li.textContent = color.valueにする
#ラジオボタン
ポイントは２つ。
①セレクトボックスと違って一つにまとまっていないので、まずはquertySelectorAll()を使ってすべてのinput要素を取得
②要素にチェックが入っているかはcheckedプロパティで調べられる。
#他のイベント
ダブルクリック＝dbclick
マウスを動かしたら＝mousemouse