JavaScriptのdocumentとは?役割・使い方・基本例を初心者向けにわかりやすく解説
document は、JavaScript で HTML ページを操作するための最も重要なオブジェクトです。
ページ内の文字・画像・フォーム・リンクなど、あらゆる要素にアクセスして操作できます。
documentとは?
document は、ブラウザが表示している HTML 文書そのものを表すオブジェクトです。
JavaScript からページの内容を読み取ったり、書き換えたりする際に利用します。
※ window は省略できるため、通常は document だけで使用します。
documentでできること
- 文字列を書き出す(
document.write()) - フォームの値を取得・変更する
- 画像・リンク・要素の属性を変更する
- DOM を使って要素を追加・削除する
document の基本例
例1:文字列を書き出す
→ ページに「JavaScript」という文字列が表示されます。
例2:文字色を取得する
→ ページの文字色を変数 fgCol に代入します。
補足: fgColor は古いプロパティで、現在は CSS を使うのが一般的です。
document を使う際の注意点
document.write()はページ読み込み後に使うと内容が消えるため注意- DOM 操作(
getElementByIdなど)を使う方が推奨される - window.document の window は省略可能
まとめ
documentは HTML 文書を操作するための基本オブジェクト- 文字の書き出し・フォーム操作・DOM 操作など幅広く利用される
- window.document の window は省略可能
- 現代では DOM 操作が主流