ツール一覧

💡 記事の下にエディタを用意しています。壊してもOK!

更新日: 2025年3月1日

JavaScriptでDOM要素を取得する方法|getElementById

📌

結論

document.getElementById() でDOM要素を取得できます

📝 実際のコードはこちら
const el = document.getElementById('title');
el.textContent = 'こんにちは';

textContentとinnerHTMLの違い

プロパティ内容
textContentテキストのみ(安全)
innerHTMLHTMLタグを含む(XSSリスク)
ユーザー入力を表示するときは textContent を使いましょう。

まとめ

getElementById でid指定の要素を取得 ・textContent でテキストを安全に変更

演習で試してみよう

getElementByIdで要素のテキストを変更してみましょう。

🧪 ここで試せます ─ 壊しても大丈夫!

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

idがmsgの要素を取得し、そのtextContentをHelloに変更してください。

詰まったらヒント

document.getElementById('msg').textContent = 'Hello';

15pt

要素を取得

idがmsgの要素を取得し、そのtextContentをHelloに変更してください。

エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。

ロードマップ · 全解説