現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

ドキュメント

【JavaScript入門】documentとは?HTMLを操作する基本オブジェクトを初心者向けに解説

投稿日:2019年4月24日 更新日:

JavaScriptのdocumentとは?役割・使い方・基本例を初心者向けにわかりやすく解説

document は、JavaScript で HTML ページを操作するための最も重要なオブジェクトです。
ページ内の文字・画像・フォーム・リンクなど、あらゆる要素にアクセスして操作できます。



documentとは?

document は、ブラウザが表示している HTML 文書そのものを表すオブジェクトです。
JavaScript からページの内容を読み取ったり、書き換えたりする際に利用します。

window.document

window は省略できるため、通常は document だけで使用します。

documentでできること

  • 文字列を書き出す(document.write()
  • フォームの値を取得・変更する
  • 画像・リンク・要素の属性を変更する
  • DOM を使って要素を追加・削除する



document の基本例

例1:文字列を書き出す

document.write(“JavaScript”);

→ ページに「JavaScript」という文字列が表示されます。

例2:文字色を取得する

fgCol = document.fgColor;

→ ページの文字色を変数 fgCol に代入します。

補足: fgColor は古いプロパティで、現在は CSS を使うのが一般的です。

document を使う際の注意点

  • document.write() はページ読み込み後に使うと内容が消えるため注意
  • DOM 操作(getElementById など)を使う方が推奨される
  • window.document の window は省略可能



まとめ

  • document は HTML 文書を操作するための基本オブジェクト
  • 文字の書き出し・フォーム操作・DOM 操作など幅広く利用される
  • window.document の window は省略可能
  • 現代では DOM 操作が主流

関連リンク

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。
レンタルサーバー エックスサーバー

-ドキュメント
-

執筆者:

関連記事

【JavaScript入門】document.lastModifiedとは?ページ最終更新日の取得方法を初心者向けに解説

JavaScriptのdocument.lastModifiedとは?ページの最終更新日を取得する方法を解説 document.lastModified は、現在表示している HTML ファイルの「最 …

【JavaScript入門】document.writeとdocument.writelnの使い方|違い・注意点・HTML出力の仕組みを解説

JavaScriptのdocument.writeとdocument.writelnとは?使い方・違い・注意点を初心者向けに解説 document.write() と document.writeln …

【JavaScript入門】linkColor・alinkColor・vlinkColorとは?リンク色の変更方法と注意点を初心者向けに解説

JavaScriptのlinkColor・alinkColor・vlinkColorとは?リンク色の変更方法を初心者向けに解説 document.linkColor、document.alinkCol …

【JavaScript入門】document.applets・embeds・pluginsとは?アプレットやプラグイン数の取得方法を解説

JavaScriptのdocument.applets・embeds・pluginsとは?アプレットやプラグイン数の取得方法を解説 document.applets、document.embeds、d …

【JavaScript入門】document.bgColorとは?背景色の取得・変更方法と注意点を初心者向けに解説

JavaScriptのdocument.bgColorとは?背景色の取得・変更方法を初心者向けに解説 document.bgColor は、HTML ドキュメント全体の背景色を取得・変更するためのプロ …