初心者JavaScriptのメモ帳～JavaScriptよく使われるメソッド～

Web制作でよく使われるJavaScriptメソッド

querySelector() / querySelectorAll()

DOM内の要素をCSSセレクタを使って検索します。

querySelector()

// 単一の要素を取得
const element = document.querySelector('.classname');

querySelectorAll()

// 複数の要素を取得
const elements = document.querySelectorAll('div');

addEventListener()

特定のイベントが発生したときに指定した関数を実行します。これは、クリック、マウスオーバー、キーボード入力などのイベントを処理するのに役立ちます。

document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked');
});

fetch()

ネットワークリクエストを行い、サーバーからデータを取得します。主にAjaxリクエストを送信して非同期通信を行うために使用されます。

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

createElement() / appendChild()

新しいDOM要素を作成し、それを既存の要素に追加します。

const newElement = document.createElement('div');
newElement.textContent = 'New Element';

document.getElementById('container').appendChild(newElement);

classList プロパティ

要素のクラスを操作するためのプロパティです。 add()、remove()、toggle()などのメソッドを使ってクラスを追加、削除、切り替えることができます。

const element = document.getElementById('myElement');

// クラスを追加
element.classList.add('newClass');

// クラスを削除
element.classList.remove('oldClass');

// クラスのトグル
element.classList.toggle('active');