【JavaScript】HTMLを操作

• 要素を取得して、操作する

イベントリスナーを追加

// querySelectoor　要素を選択
// addEventLister　最初にイベントの種類を、2番目に処理内容を渡す
document.querySelector('button').addEventLister('click', () => {
    // textContent　値をセットする
    document.querySelector('p').textContent = 'こんにちは';

    // textContentは、値を取得するのにも使える
    document.querySelector('p').textContent = document.querySelector('button').textContent;
});

クラスの追加、削除、切り替え

document.querySelector('button').addEventListener('click', () => {
    // クラスの追加
    document.querySelector('p').classList.add('textBold', 'border-24');
    // クラスの削除
    document.querySelector('p').classList.remove('background-yellow');
    // クラスの切り替え
    document.querySelector('p').classList.toggle('current-yellow');
    // クラスの切り替えは、下記と同様
    if (document.querySelector('p').classList.contains('current-yellow') === false) { // contains で、true, falseを返すことができる
        document.querySelector('p').classList.add('current-yellow');
    } else {
        document.querySelector('p').classList.remove('current-yellow');
    }
});

複数の要素を扱うquerySelectorAll

• querySelector で指定した要素が複数ある場合は、最初の要素だけに適用される
• すべての同じ要素を取得するには、querySelectorAll
• 配列のようなデータ構造になり、[n]で指定できる
• 同じ変更ならforEachが使える

document.querySelector('button').addEventListener('click', () => {
    // document.querySelectorAll('p')[0].textContent = '1つ目のpを変更';
    // document.querySelectorAll('p')[1].textContent = '2つ目のpを変更';
    // document.querySelectorAll('p')[2].textContent = '3つ目のpを変更';
    document.querySelectorAll('p').forEach((p) => {
        p.textContent = '文字を一括変更!';
    });
});

querySelector、querySelectorAllは、要素だけでなくクラスやIDも選択できる

// クラスを取得
document.querySelector('button').addEventListener('click', () => {
    document.querySelectorAll('.target').forEach((p) => {
        p.textContent = '文字を一括変更!';
    });
});

// IDを取得
document.querySelector('button').addEventListener('click', () => {
    document.querySelector('#target').forEach((p) => {
        p.textContent = '文字を変更!';
    });
});