要素を取得する
querySelectorはCSSセレクターで最初の要素を取得します。取得できない可能性があるため、必要ならnullを確認します。
HTML要素を取得するJAVASCRIPT
const title = document.querySelector('#title');
console.log(title?.textContent);内容とクラスを変更する
textContentで文字を変更し、classListでCSSクラスを追加・削除できます。
表示を更新するJAVASCRIPT
const message = document.querySelector('#message');
if (message) {
message.textContent = '更新しました';
message.classList.add('success');
}クリックイベント
addEventListenerへイベント名と関数を渡すと、クリックされたときに処理を実行できます。
index.htmlHTML
<button id="countButton" type="button">1増やす</button>
<p>回数: <span id="countValue">0</span></p>app.jsJAVASCRIPT
const button = document.querySelector('#countButton');
const value = document.querySelector('#countValue');
let count = 0;
if (button !== null && value !== null) {
button.addEventListener('click', () => {
count += 1;
value.textContent = String(count);
});
}フォーム入力
フォームのsubmitイベントでは、preventDefaultでページ遷移を止め、入力値を確認してから表示できます。
index.htmlHTML
<form id="nameForm">
<label for="nameInput">お名前</label>
<input id="nameInput" name="name" type="text" required>
<button type="submit">送信</button>
</form>
<p id="formMessage" aria-live="polite"></p>app.jsJAVASCRIPT
const form = document.querySelector('#nameForm');
const nameInput = document.querySelector('#nameInput');
const formMessage = document.querySelector('#formMessage');
if (form !== null && nameInput !== null && formMessage !== null) {
form.addEventListener('submit', (event) => {
event.preventDefault();
const name = nameInput.value.trim();
if (name === '') {
formMessage.textContent = '名前を入力してください';
return;
}
formMessage.textContent = `こんにちは、${name}さん！`;
});
}