javaScript93_webページのロードと基本のDOM操作 #JavaScript

ブラウザが一つのHTMLファイルをロードする時に、上から下の順序で読み込みます。JSコードをHeadなど頁の上部に書くと、下部の頁がまだロードされていない、DOMオブジェクトはないため、イベントは実行されません。

そのため、JSコードはタグbodyの下の部分で書いてください。どうしてもhead部分で書きたい場合は、window.onloadイベントを使用することができます。

HTMLの要素を取得するには、下記の３つの方法があります。
document.getElementsById('id名');

値取得のスピードが速い
document.querySelector();
document.querySelectorAll();
万能
MDN内でdocument.querySelectorAll(）についてこのように説明しています。
Document の querySelectorAll() メソッドは、与えられた CSS セレクターに一致する文書中の要素のリストを示す静的な (ライブではない) NodeList を返します。

例：

<body>
    <div id="test" class="test_list">
        <ul>
            <li>テスト1</li>
            <li>テスト2</li>
            <li>テスト3</li>
        </ul>
    </div>

<script>
    const test = document.getElementById("test");

    // idで取得する場合は＃を書く
    const test1 = document.querySelector('#test');
    // classで取得する場合は.を書く
    const test2 = document.querySelector('.test_list');
    console.log(test1);
    console.log(test2);
</script>
</body>

同じclassが複数がある場合は、最初の値だけを返す。

<body>
    <div id="test" class="test_list">
        <ul>
            <li class="test_list1">テスト1</li>
            <li class="test_list1">テスト2</li>
            <li class="test_list1">テスト3</li>
        </ul>
    </div>

<script>
    const test2 = document.querySelector('.test_list1');
// 同じclassが複数がある場合は、最初の値だけを返す
    console.log(test2);
</script>
</body>

document.querySelectorAll();

<body>
    <div id="test" class="test_list">
        <ul>
            <li class="test_list1">テスト1</li>
            <li class="test_list1">テスト2</li>
            <li class="test_list1">テスト3</li>
        </ul>
    </div>

<script>
    const test2 = document.querySelectorAll('.test_list1');
    console.log(test2);
    
</script>
</body>

DOM基本操作であるgetElementById(),getElementsByTagName(),getElementsByNameの使い方について紹介します。

getElementById()：

getElementsByTagName()：

getElementsByNameの：

参考（HTML文）：