要素の選択
javascriptからHTML内のドキュメント要素を操作する方法を整理します。
要素を操作するには、要素を取得してから操作をします。
この取得する方法はプレーンなjavascriptでは次の方法があります。
①id属性で選択
②name属性で選択
③tag名で選択
④cssクラスで選択
⑤cssセレクタで選択
またjavascriptで作られたライブラリ(jquery等)や、react、vue、Angular、その他のjavascriptで作られているフレームワークは、それぞれで書き方が変わってきます。
ここでは上記の①～⑤について、試してみます。
id属性で取得
HTML内のソースがHTMLElement要素として書かれていて、
タグ内にid属性を持つ場合、javascriptでは次のように要素を取得できます。
例えば、HTMLソースが以下の場合の要素「test_youso1」を取得してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<h3>タイトル</h3>
<p id="test_dom1">テスト要素1</p>
<script type="text/javascript">
let test_dom1 = document.getElementById('test_dom1');
console.log("test_dom1 -> " + test_dom1);
//取得した要素の文字色を青く設定
test_dom1.style.color = 'blue';
</script>
</body>
</html>
javascriptでは、次のように要素を取得します。
let test_dom1 = document.getElementById('test_dom1');
console.log("test_dom1 -> " + test_dom1);
//取得した要素の文字色を青く設定
test_dom1.style.color = 'blue';
また、HTMLソース内のid要素は、そのソース内で一意であることが前提になります。
上記のHTMLを保存し、ブラウザでアクセスすると、
「タイトル」と「テスト要素1」 (青文字に変更された文字列)が表示されます。