DOMとは
DOM（Document Object Model）は、HTMLドキュメントの要素を取得したり操作したりするための仕組みです。DOMツリーと呼ばれる、階層上のツリー構造でHTMLドキュメントを表現します。
DOMツリーこと
JavaScriptの動きのコアはこのツリーの増減や変更すること。
例えば、HTMLのタグを変更したり、CSSのセレクターを修正したり、新しいタグを追加したりしたとかとか。
DOM操作
要素取得メソッド
document.getElementById('')
document.getElementsByClassName('')
document.getElementsByTagName('')
要素変更
変更する前に要素を取得する必要がある。
//innerHTML属性を変更する
document.getElementById('p1').innerHTML = "<h2>strong</h2>";
//innerText属性でテキストを変更する
document.getElementById('p1').innerText = "Hello";
//CSSスタイル変更
document.getElementById('p1').style.color = 'red'
要素削除
削除する前に要素を取得する必要がある。
document.getElementById('p1').remove('p1');
//親要素から削除する
document.getElementById('father').removeChild('p1');
//親を特定し、子要素を削除する
const father = document.getElementById('p1').parentElement;
father.removeChild(father[1]);
挿入
- すでに存在してる要素をどこかに追加する
// jsは既存してる要素である
const js = document.getElementById('p2')
// jsをlistの中に追加する
document.getElementById('list').appendChild(js);
- 新規追加
//存在してない要素を作成する
const newTag = document.createElement('p');
//idを付与する方法①
newTag.id = 'newTag';
//idを付与する方法②
newTag.setAttribute('id','newTag');
newTag.innerText = "hello";
//追加する
document.getElementById('list').appendChild(newTag);
form操作
form要素とはフォーム関連要素の集まりを表す要素である。
中にはtext,select,radio,checkbox,hidden,passwordなどなどある。
送信フォームや入力フォームなどを作るときに使う。
ここでformの操作というのは、入力した情報を取得するということである。
<!DOCTYPE html>
<html lang="en">
<body>
<form action="post" id="sampleForm">
<span>password:</span><input type="text" id="pwd">
</form>
<script>
//テキストフォームの場合に情報を取得
document.getElementById('pwd').value;
//radioの場合に情報を取得
</script>
</body>
</html>
↑サンプル以外にはradioの場合に
element.checked()で情報を取得する。
セキュリティ上にはパスワードの提出にmd5ハッシュ化する必要がある。
よく使われるサンプル
- 要素内容変更
get
<!DOCTYPE html>
<html lang="en">
<body>
<div id="haha">
<h1>DOMについて!</h1>
<p id="p1">Hello</p>
<p>what is your name</p>
</div>
<script>
//idで取得する
//要素の中身を変えて、取得
document.getElementById('p1').innerHTML = "what?";
//要素のテキストを取得
document.getElementById('p1').textContent;
</script>
</body>
</html>
- 要素属性内容変更
<!DOCTYPE html>
<html lang="en">
<body>
<div id="haha">
<p id="p1" align="center">Hello</p>
</div>
<script>
//id=p1の要素のalign属性を変更
document.getElementById("p1").align = "right";
</script>
</body>
</html>
- 要素スタイル変更
<!DOCTYPE html>
<html lang="en">
<body>
<div id="haha">
<p id="p1" align="center">Hello</p>
</div>
<script>
//id=p1の要素スタイルを変更
document.getElementById("p1").style.color = "red";
</script>
</body>
</html>
- イベントで変更
クリックし、スタイル変更
<!DOCTYPE html>
<html lang="en">
<body>
<div id="haha">
<p id="p1" type="button" onclick="document.getElementById('p1').style.color = 'red'" align="center">Hello</p>
</div>
</body>
</html>
クリックし可視化切り替え
<!DOCTYPE html>
<html>
<body>
<p id="p1">hello</p>
<input type="button" value="隠し" onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="表示" onclick="document.getElementById('p1').style.visibility='visible'">
</body>
</html>
参考記事