JavaScriptでHTMLDocumentオブジェクトを取得する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでHTMLDocumentオブジェクトを取得する方法について解説しています。HTMLDocumentオブジェクトの現在のブラウザでの対応状況、使い方の例を見ていきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptでHTMLDocumentオブジェクトを取得する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

HTMLDocumentオブジェクトを取得する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

HTMLDocumentオブジェクトとは

すでに非推奨になっているオブジェクトです。
使用するのは控えましょう。

Webページを表すDocumentオブジェクトにHTML特有の機能を追加したものです。

しかしながら、すでに非推奨となっていてHTMLDocumentのメンバーは、Documentインターフェースのメンバーに移行しています。

また、ブラウザの対応状況もほとんど非対応になっており、以下のように対応状況を確認できるサイトのCan I useを使って確認していきます。

このサイトではJavaScriptだけではなくCSSなどの対応状況も確認できるので複数のブラウザに対応する場合は重宝するでしょう。

HTMLDocumentの対応状況のスクリーンショットは下記になります。

 

[PR] フロントエンドで挫折しない学習方法を動画で公開中

JavaScriptでHTMLDocumentオブジェクトを取得する方法

HTMLDocumentオブジェクトはすでに非推奨になっているため、メンバーの移行先であるDocumentオブジェクトの取得方法をみていきましょう。

JavaScriptのグローバルオブジェクトに定義されている記述の省略が可能なwindowオブジェクトのメンバーにdocumentオブジェクトがあり、documentと記述するだけでそのまま使えます。

 

実際に書いてみよう

DocumentオブジェクトはHTMLを扱うためのたくさんのプロパティを持っています。

ここではそのいくつかをみていきましょう。

表示しているサイトのドメインを表示

document.domain

表示しているサイトのURLを表示

document.URL

windowが省略可能なので、このように.(ドット)でつなげてプロパティ名を記述するだけでWebサイトに関わる様々な情報が扱えます。

 

まとめ

HTMLDocumentオブジェクトの紹介をしました。

非推奨で移行されたオブジェクトであるため、documentオブジェクトを使ってください。
また、HTMLDocumentに限らず、JavaScriptもバージョンが上がるにつれブラウザの対応状況も変わります。
対応状況の確認も忘れないようにしてください。

 

執筆してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

JavaScriptでHTMLDocumentオブジェクトを取得する方法がよく分かって良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。