domとは、htmlをそのままブラウザで ページに出す前に、ブラウザがhtmlからdom（っていうなの塊（オブジェクト））を作って、JavaScriptがその生成されたdomを使ってWEBページを動的に操作できるようにすることです！！

＜動的な操作とは？＞

動的に操作するっていうのは、Webページが読み込まれた後に、ユーザーのアクションやあるイベントをきっかけにして、ページの内容や見た目をリアルタイムで変更できることを言う。例えば、ボタンをクリックしたらテキストが変わる、リストに項目を追加する、画像を切り替えるといった操作がこれにあたる。これらの操作はJavaScriptを使ってDOMに対して行われるらしい。

  1. HTMLファイル内: HTMLファイルの**<script>タグ内に直接JavaScriptコードを書くことができます。通常、<script>タグはHTMLの<head>タグ内やページの最後、</body>**タグの直前に配置します。
  2. 外部JavaScriptファイル: JavaScriptのコードを外部ファイル（通常は**.js拡張子を持つ）に記述し、それをHTMLファイルからリンクする方法です。この場合も、HTMLの<script src="ファイル名.js">タグを使用してリンクし、この<script>タグは<head>内や</body>**の前に置くことが一般的です。
  3. サーバー上のファイル: JavaScriptのファイルがWebサーバー上にあり、それをWebページからリンクする場合もあります。この場合、ファイルの配置はサーバーのフォルダ構造に依存しますが、WebページからはURLを通じてアクセスします。

例:

htmlCopy code
<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
    <script src="scripts/my_script.js"></script>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <script>
        // ここに直接JavaScriptコードを書くことができます
        document.querySelector('h1').textContent = 'Hello, world!';
    </script>
</body>
</html>

この例では、HTMLファイル内に直接書かれたJavaScriptコードと、外部ファイルへのリンクの両方を示しています。どのようにコードを配置するかは、プロジェクトの要件や個人の好み、メンテナンスのしやすさなどによって異なります。

DOM操作で最低限覚えておくべきメソッドは、以下の通り。