6.JavaScript-6

2023.01.11

DOM

ブラウザは、Web サーバから受け取った HTML 文書を解析し、データ構造を変換しますその時のデータ構造が「DOM」と言うものです。
DOMとはDocument Object Model の略です。

DOM操作

DOM操作とは簡単に言うとJavaScript の記述で、HTMLにある要素（画像や文字など）を変更することです。

仕組みとしてはブラウザがHTMLをDOMに変換し画面に描画して表示されるようにしているのですが、DOMに変換し描画する前にDOMをJavascriptで操作し、変化を加えそのDOMを描画することで文字や画像などを変更しています。

ここでは、DOM操作で最も有名で簡単なものをご紹介します。

id 属性を使った操作

HTMLのid属性を使用してDOMを操作していきます。
使用するメソッドは以下のものになります。

getElementById

早速使い方を学んでいきましょう。

index.htmlに下記を記入してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>title</title>
  <link rel="stylesheet" href="../css/index.css">
</head>
<body>
  <p id="test">DOM操作を覚えよう!</p>
  <script type="text/javascript" src="../js/index.js"></script>
</body>
</html>

ブラウザに「DOM操作を覚えよう!」が出力されたことを確認してください。

次にindex.jsを開いて下記を記入してください。

const test_operation = document.getElementById('test');
test_operation.innerHTML = 'これがDOM操作だ';

保存をしてブラウザを確認すると「これがDOM操作だ」に変わっているはずです。

これはどう言うことかというと、「getElementById」というメソッドはその後の（）の中身と同じ名前のidを持つHTMLの要素を取得することができるメソッドで、ここではtestという名前のidがついている要素をHTMLから取得してきています。

次に「.innerHTML」というメソッドを使用して取得した要素の内容を変更しています。

PAGE TOP