DOMってナニ？ - 猫と遊ぶ　見習いプログラマーの備忘録

こんばんは～。

「DOMってナニ？」って書いたけど、
素直に、直感でなんか「DMM」が出てきた(笑)

さて（無視）、DOMというのがよくわからなかったのでいろいろ調べてみた。

読み方は「ドム」らしい。

そんでDOMというのは、
・JavaScriptとHTMLとをつなぐ
　連携して作られるかんじ。
・「ノード」ということばでツリー構造を表現する

そのノードというのが、わかり易くまとめるとこんな感じ。

f:id:msm20-chocolateee:20180820185112p:plain

（わかり易いのか？笑）
そして、このブラウザで表示されているbodyの部分が「親ノード」！

ちょっとHTMLのタグでみてみよう。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>DOMとは</title>
  <style>
    body {
      background-color: maroon;
    }
  </style>
</head>

<body>
  <section id="sec1">
    <h2>親子丼　…この親子丼のくくりを作っているのが基準ノード</h2>
    <p>鶏肉　…子ノード</p>
    <p>たまご　…子ノード</p>
    <p>玉ねぎ　…子ノード</p>
  </section>
  <section id="sec2">
    <h2>カレー　…このカレーのくくりを作っているのが兄弟姉妹ノード</h2>
    <p>じゃがいも　…子ノード</p>
    <p>にんじん　…子ノード</p>
    <p>鶏肉／豚肉／牛肉　…子ノード</p>
  </section>
</body>
<script>
  document.getElementById('sec1').style.color = 'orange';
  document.getElementById('sec2').style.color = 'yellow';
</script>

</html>

なんでh2で表示されてる一つ目が「基準ノード」で
次が「兄弟姉妹ノード」なの？って思うけど、
そういうことなんだって(笑)

はじめが基準で、
その他、ツリー構造で同じ階層にいるのは、みんな兄弟！みたいな。
そんな感じだと思うな～。
同じ階層にいるってのが大事ね。

ちなみに、DOMの略さない言い方は、
Document Object Model　なんだと。
ドキュメントをモノとして扱うって意味かな。
全体で一気に扱わないで、くくって扱うかんじ。
JS、深いね～