デベロッパーツールでdocumentの表示をしてみよう![DevTools]

デベロッパーツールのコンソールパネルを使った時のことは、こちらのブログにてまとめてあります。 今日は同じくデベロッパーツールのコンソールパネルで、documentを使ってJavaScriptを学んだ時のことを備忘録として残しておきます。

JavaScriptのdocumentってなあに?

このdocumentのこと、まだあまり理解していないのでChatGPTにも聞いてみようと思います。
JavaScriptのdocumentとは? JavaScriptのdocumentは、ウェブページのドキュメントオブジェクトモデル(Document Object Model, DOM)を表すための特殊なオブジェクトです。DOMは、ウェブページの要素やコンテンツにアクセスして操作するためのプログラミングインターフェースを提供します。 documentオブジェクトは、ウェブページ全体を表し、ページ内のすべての要素やコンテンツにアクセスすることができます。ウェブページをロードすると、ブラウザはページの内容を解析し、その内容をdocumentオブジェクトの形式で表現します。 参考:ChatGPT
ちなみにエンジニア父ちゃんは、「documentはねー、うーん、HTMLのことだって今の桃には伝えておこう」と教えてくれました。 ブラウザに表示してあることをこのdocumentを使うと表示することができるということを知ったので、次にその具体的な方法をまとめていきます。

「document.~」で表示してみよう

documentとはどんなものかを知るために、父が教えてくれた内容をそのまま残していきます。 「じゃあまず、document.titleってConsolパネルに打ち込んでEnterを押してみよう」
すると、HTMLのtitleタグで書いていた内容が下に表示されました。 「じゃあ次はdocument.h1ってしてみよう」
これはunderfindと表示が出ましたね。 「じゃあ次は、document.bodyとしてみよう。どうなるかな?」
この▶︎を押すと省略されていたものが表示されます。

リファレンスサイトもみてみよう

「javascript document」と検索すると一番上に出てくるこちらのサイトを読んでみましょう。
これをリファレンスサイトと呼ぶそうです。 リファレンスサイトでも、コマンド+fで検索欄がぴょこんと出てきます。 titleと打ってみたところ、オレンジや黄色で強調された検索結果が出てきました。
このように検索をして、「このタグはこれに使えるのか〜」などと知ることを繰り返しながらエンジニアは力を得ていくのですね。 ちなみにh1はヒットしなかったので、どうやらdocumentでは扱えないようです。

あとがき

今回の学びとしては、documentの後ろにHTMLで書いたタグを入れると表示されるということでした。 underfindのことはまた別で調べてみようと思います。

コメント

このブログの人気の投稿

[クレンジングと洗顔方法] 美肌になりたい!

謎解きの魅力

免許証の裏面で意思表示してみた