【初心者向け】DOM(ドム)とは？わかりやすく解説

2021/3/18

DOM(ドム)とは、ガンダムにでてくるロボット？と思われた方には参考になるかなと。
それではいってみましょう。

DOM(ドム)とは？

DOM(ドム)とはDocument Object Modelの略で、JavaScriptからHTMLを動的に変更することが可能になる技術のことです。

Gmailでメールが来たら再読み込みなくリアルタイムでメールの表示が増えたり、チャットワークでピョコンとチャットが出てくるのもDOMという技術のおかげです。例えば以下はDOMを使ったサンプルです。ボタンを押すと以下のテキストがDOMによって変更されます。読み込みも特にないことがわかるでしょう。

「書き換え前の文章(この文章が以下ボタンを押すと変わります)」

まとめ

いかがでしたでしょうか。

HTMLは基本、紙芝居で動きません。そこに命を吹き込むというか、動きを付けるのがJavaScriptでありもっと言えばDOMということです。技術的な詳細については割愛しますが、HTMLを動的に自由に変更できるのがDOMと覚えていただければと思います。

最後までお読みいただきありがとうございました。