読者です 読者をやめる 読者になる 読者になる

アスリート系ですがプログラミング始めました。

プログラミング初心者三十路越えアスリート系女がフリーランスプログラマーを目指すブログ

DOMってなんなの??DOMについて調べてみました。

プログラミング

ただただサンプルコードを打ってると、説明されてもなんぞや?その単語?というのに多々ぶち当たります。

今日はDOM(ドム)について調べてみました!

  • DOMとは、HTMLドキュメントやXMLドキュメントをプログラムから利用するためのAPI
  • DOMではHTMLドキュメントやXMLドキュメントを「オブジェクトのツリー状の集合」として取り扱う。このツリーをDOMツリーと呼ぶ。
  • DOMツリーの一つ一つのオブジェクトはノードと呼ばれる。ある1つのノードから他のノードを参照する時は、親ノード、子ノード、兄弟ノード、先祖ノード、子孫ノードなどと呼ぶ。
  • DOMの仕様は、Level1〜3がW3Cにより定義されている。

Qiitaさんのサイトにまとめが載っていました。

qiita.com

今まで、サンプルコードをただただ打っていたのでdocument.getElementByIdとかなんのこっちゃ〜っだったのですが、改めて勉強してみるとちょっと繋がってきました!

**********************************************************************

まず

  • document→今開いているページ

であり

  • DOMを操作する

とは内容や属性を書き換えたり新しい機能のDOM要素を作成内容や属性を書き換えたりすること。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-02-15-52-21

まずはこんな感じでコードを書くとブラウザには

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-02-15-52-36

こんな感じで表示されます。このページをDOMを操作してhelloを変更して表示を変えてみます。

scriptタグの中に

var e=document.getElementById('msg');

変数eを作りその中に代入していきます。そしてテキストをGoodmorning!と書き換えたいので

e.textContent='Goodmorning!';

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-02-16-02-32

そうすると↓

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-02-16-03-24

でHelloがGoodMorning!にテキストが変更されています。

同様にスタイルを変更することも可能です。

以下コードです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM説明</title>
<style>
.myStyle{
font-weight: bold;
border:1px solid gray;
}
</style>
</head>
<body>
<h1>DOM</h1>
<p id="msg">Hello</p>
<script>

var e=document.getElementById('msg');
e.textContent='GoodMorning!';
</script>

</body>
</html>

*********************************************************************

自分の中では腑に落ちて繋がったのですが、説明するとなると難しい。。

DotinstallではJavascriptレッスンの#22,23でDOMについての動画がありますので見てみてください。

http://dotinstall.com/lessons/basic_javascript_v2/26722

DOMとはDocument Object Modelの略です。(って何?って感じ)

わかりやすいDOMの説明が載ってるブログを発見しました。

eng-entrance.com

説明の例えがわかりやすいです!

---------------------------------------------------------------------------------------------------------

そういえば昔地元にDOMDOMというハンバーガーチェーンがあったなあと、ふと思い出しました。

www.orangefoodcourt.co.jp

調べてみたらまだあった!

中学生の頃はしょっちゅう部活の友達とDOMDOMで集まってたなあ〜20年以上前の話。

 

にほんブログ村 IT技術ブログへ
にほんブログ村