Web開発

DOMとは?

JavaScriptを学んでみて、イメージしづらかったのがDOMでした。今回は、初心者の僕がイメージを掴むまでの流れが書いてあります。使いこなすまではまだ至っていませんが、DOMについてなるべくわかりやすく書いてみます。

HTMLやJavaScriptとはなんぞ?という方はこちらも合わせてどうぞ

DOMとは?

DOMはDocument Object Modelの略

直訳するとドキュメントをオブジェクトとして扱うモデル…?普通にイメージしづらい。ここで色々調べてみると

DOMはマークアップ言語(HTML等)で書かれたドキュメントにアクセスする為の仕組み

だという事がわかる。さっきよりはイメージが固まってきた。

DOMをより理解するために

イメージがなんとなく分かっただけなので、実際に体験してみようと思う。ただ、その前提条件としてHTMLの文書構造を知らないと理解できないので軽く触れてみる!

HTMLとはマークアップ言語で文章の構造を表現するための言語

これを頭に入れた後に、実際にHTMLで書かれた文書を見てみる。

<!DOCTYPE html>
<html>
  <body>
    <h1 id="heading">HelloWorld!</h1>
  </body>
</html>

 

初見の方だとわからないと思いますが、これはIEやChrome等のブラウザで下記の画像みたいに表示されます。

 

上記のHTML文書はブラウザでこの様に表示される!という事を覚えておいてください。

DOMを操作してみる

HTMLがどんなものか分かったと思うので、次はDOMを操作してみましょう。

分かりやすい例として先ほどのHelloWorldの文字をかえてみます。作業に入る前にしつこいですが、おさらいです!

DOMとはマークアップ言語(HTML等)で書かれたドキュメントにアクセスする為の仕組み

現在やろうとしている事は

HelloWorldと書かれた文字を別の文字に変えるために、DOMを使いアクセスして書き換えようとしているんです。

今回は簡単にやる為に、以前紹介させていただいたBrackets上でやります。興味ある方はこちらもどうぞ。

WebデザインやWebプログラミングのテキストエディタならこれ!最近Web系の事に興味があるとりもです! 普段プログラムを書かれている方はどんなテキストエディタを使っていますか?僕はVSCode...

 

実際にDOMを操作してみました。

 

HelloWorldからとりもさんに変わりましたね!

動画で何をやっているかというと、ブラウザのデベロッパーツールからConsoleに下記のJavaScriptのコードを書きました。

document.getElementById("heading").textContent = "とりもさん";

これはdocumentオブジェクトというものを使ってHTMLの文書にアクセスして書き換えました。

つまりDOMはdocumentオブジェクトを使ってHTMLで書かれたドキュメントにアクセスする仕組みの事だったのです。

周りくどいですがちょっとずつやっていくと分かりやすいかなと思いました。DOMとは何か?これで結構つかめたのではないでしょうか。あとは使いこなせるようにJavaScriptでプログラムを書きまくりたいと思います。