More than 3 years have passed since last update.

JavaScript　DOM操作による要素へのアクセス

Last updated at 2020-12-27Posted at 2020-12-27

#class属性、セレクタで要素にアクセスする

class="weather"

index.html

    <!DOCTYPE html>
    <html lang="ja">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <h1>JavaScript Practice</h1>
        <dl>
            <dt>今日の天気</dt>
            <dd class="weather">晴れ</dd>
        </dl>
        <script src="index.js"></script>
    </body>

    </html>

#1,class属性やセレクタで要素を取得する

document.querySelector("クラス名");

index.js

    // querySelectorでweatherのクラスがついている要素を取得
    let element1 = document.querySelector(".weather");
    console.log(element1);

    // querySelectorでdlセレクタ要素を取得
    let element2 = document.querySelector("dl");
    console.log(element2);

    // DOMのツリー構造を踏まえて指定が可能
    let element3 = document.querySelector("dl dt");
    console.log(element3);

#2,コンソール表示結果

#3,主な要素取得メソッド

index.js

    // 主な要素取得メソッド
    document.getElementById("引数");           //id名
    document.getElementsByClassName("引数");   //class名
    document.getElementsByTagName("引数");     //要素名
    document.getElementsByName("引数");        //name属性
    document.querySelector("引数");            //セレクタ
    document.querySelectorAll("引数");         //セレクタ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

JavaScript DOM操作による要素へのアクセス

JavaScript　DOM操作による要素へのアクセス