Javascript基本

JS
2024.11.19

基本構造

<!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"; // スタイル変更
特徴innerHTMLinnerTexttextContent
タグ解釈するしないしない
表示される文字列HTMLとして解釈画面に見えるテキストだけDOMの全テキスト
非表示要素取得できる取得できない取得できる
パフォーマンス普通遅い（レイアウト計算あり）速い
代入方法表示されるものタグ解釈される？
innerHTML = “Hello”Hello（太字）はい
innerText = “Hello”Helloいいえ
textContent = “Hello”Helloいいえ

タグ解釈する = HTML として実行される
タグ解釈しない = 文字として表示される
ユーザー入力を表示するときは innerText / textContent か escapeHTML を使う