💡 記事の下にエディタを用意しています。壊してもOK!
更新日: 2025年3月1日
JavaScriptでDOM要素を取得する方法|getElementById
📌
結論
document.getElementById() でDOM要素を取得できます
📝 実際のコードはこちら
const el = document.getElementById('title');
el.textContent = 'こんにちは';textContentとinnerHTMLの違い
| プロパティ | 内容 |
|---|---|
textContent | テキストのみ(安全) |
innerHTML | HTMLタグを含む(XSSリスク) |
textContent を使いましょう。
まとめ
・getElementById でid指定の要素を取得
・textContent でテキストを安全に変更
演習で試してみよう
getElementByIdで要素のテキストを変更してみましょう。🧪 ここで試せます ─ 壊しても大丈夫!
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
idがmsgの要素を取得し、そのtextContentをHelloに変更してください。
詰まったらヒント
document.getElementById('msg').textContent = 'Hello';