Javascript基本

JS

基本構造

<!DOCTYPE html>
<html>
<head>
    <title>JavaScriptの基本</title>
</head>
<body>
    <button id="myButton">クリックしてね</button>

    <script>
        // ここにJavaScriptコードを書く
        document.getElementById("myButton").addEventListener("click", function() {
            alert("ボタンがクリックされました！");
        });
    </script>
</body>
</html>

要素を取得

let blockId = document.getElementById("myButton"); // IDで取得
let elements = document.getElementsByClassName("myClass"); // クラスで取得(特定のクラスを持つ要素全て)
let allDivs = document.querySelectorAll("div"); // CSSセレクタで取得
let element = document.querySelector(".abc");
console.log(element); // クラス "abc" を持つ最初の要素が取得されます(取得できるのは最初の1つだけ)

querySelector()はCSSセレクタと同じ形式を使うので、

任意の複雑なセレクタ（例: .container > .child:nth-child(2)）も利用可能。

複数のクラスを取得したい場合

let elements = document.querySelectorAll(".abc");
elements.forEach(element => {
    console.log(element); // "abc"クラスを持つ全要素が取得され、ループで表示されます
});

要素の変更

document.getElementById("myButton").textContent = "新しいボタン名"; // テキスト変更
document.querySelector("div").style.backgroundColor = "blue"; // スタイル変更