DOMとは？
DOMとは、プログラムからHTMLやXMLを操作するための仕組み。
ツリー構造を持っていて、各要素をそれぞれをノードと呼ぶ。
空白や改行もノードになる。
要素を操作しよう
IDの要素を取得する
document.getElementById('ID名')
文章から特定の要素を取得する
document.querySelector('要素名')
中身を帰る場合は以下。
js
document.querySelector('要素名').textContent
何秒後に呼び出す
setTimeout(update,1000);
複数の要素を変更
document.querySelectorAll('要素名')[n].textContent
nは前から何番目を表す。
※DOMツリーの階層から指定することもできる。
addEventListener();
やりたい内容を（）に入れる。
タイトル要素の変更
.title = '文字';
CSSの変更
.style.変更したいプロパティ
※プロパティ名にハイフンがある場合は、二文字目の冒頭を大文字にする。
classNameを設定する
アクションがあるときに、クラスごと変更する。
html
<style>
.my-color{
color:red
}
</style>
.className = 'my-color';
この記載方法だと、既存のCSSが上書きされてしまうため、
.classList.add('my-color')にすると加えられる。
また、条件分岐を使ってもできる
js
if(~classList.contain('my-color') === true){
~.classList.remove('my-color');
}
カスタム要素を使う
HTMLでは、自分で作った要素を使うことができ、これをカスタム要素と呼ぶ。
「data-」から始まる。
JSでは
〜.dataset.[data-〇〇の〇〇部分を記入]
と記入。
要素を作ってDOMに追加
１、要素を作る
const item = document.createElement('li');
２、中身を作る
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