HTMLとJavascriptによるDOMの基本的な考え方

Javascript

DOMとは、

HTMLで表現された文書は、とある構造になります。
そしてその一つ一つの要素をDOM、その全体の構造をDOMツリーと呼びます。

例えば、以下のようなHTMLがあったとしましょう。

<html>
  <head>
  </head>
  <body>
    <div class="main">
      <div class="header">
        <h1>sample</h1>
        <div id="description">
          this is a sample html document.
        </div>
      </div>

      <div class="articles">
        <h2 class="article_title">article1 title</h2>
        <div class="article_body">
          article text
          <img src="hoge.jpg">
        </div>
        <div class="article_comment">
          comment for article1
        </div>
        
        <h2 class="article_title">article2 title</h2>
        <div class="article_body">
          article text
        </div>
        <div class="article_comment">
          comment for article2!
        </div>
        <div class="article_comment">
          comment for article2!!
        </div>
      </div>
      
      <div class="footer">
        <p id="copyright>
          (c)hoge
        </p>
      </div>
    </div>
  </body>
</html>

このDOMツリーは、、、

document
  |
  |-div.main
     |
     |-div.header
     |  |
     |  |-h1
     |  |
     |  |-div#description
     |
     |-div.articles
     |  |
     |  |-h2.article_title
     |  |
     |  |-div.article_body
     |  |  |-img
     |  |
     |  |-div.article_comment
     |  |
     |  |-h2.article_title
     |  |
     |  |-div.article_body
     |  |
     |  |-div.article_comment
     |  |
     |  |-div.article_comment
     |
     |-div.footer
        |
        |-p#copyright

こんな形になります。

では、これをどう使うのか。
例えば、このdocumentから（DOMツリー）から、id="description"の要素をとってきたい、となったら、

var description = document.getElementById("description")

と書きます。

DOMの考え方の中では、idはdocumentの中で唯一（uniq）なものと定義されているため、1つの要素だけがとられてきます。

では、
例えば、このdocumentから、class="article_comment"の要素をとってきたい、となったらどうなるのか？

var comments = document.getElementsByClassName("article_comment")

と書きます。

DOMの考え方の中では、classはdocumentの中で繰り返し使えるものになります。
よって、class名で要素をとってきた場合に、変数commentsは正確には配列になっています。