JS日記➀DOMの理解、ポップアップ表示

2024/10/02

エンジニアインターン

本日は昨日に引き続き、JSでサイトに説明動画を一括挿入するという作業にかかりました。とはいっても私はJSで開発をしたことはなくて、頂いたテンプレートに何が書いてあるのか、というのを理解するのにも時間がかかってしまいました。

ということでJSでのお仕事をしている間、学んだことを定着させるために「JS日記」というシリーズで活動日記を書かせていただきたいと思います。

・DOMって何？

まず出てきて理解できなかったのがこのDOMという単語。DAMならカラオケで知ってるけど…という感じですが、DOMはDocument Object Modelの略で、HTMLの文章構造をツリーにしてJS内に保持することでHTMLの文章をJSで操作できるようにしたモデルです。

・ポップアップ（ダイアログ）を表示させる

さて、今回私はJSを用いて表示したい内容をdiv要素でHTMLに書き込み、ダイアログとして表示するということをやっています。HTMLに書き込むのはElementクラスのinsertAdjacentHTML()というクラス関数のおかげで（DOMを使用しています）、ポップアップに出せるのはMDCDialogクラスのopen()というクラス関数のおかげで、簡単にできます。このようにオブジェクト指向の言語ではよく使う機能が便利な「お道具箱」として用意されてるわけですね。ドラ〇もんみたいな感じです。

初心者が調べたり考えたりしたことなので間違いなどあったらコメントなどで是非教えてください！

それでは！