初めてJavaScriptをやってみよー日記 ~14日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

  • DOMとは
  • DOMのデータ構造
  • DOMの使い方

DOMとは

DOMとは、HTMLをプログラムで扱う時に、HTMLの中に書いてあるものを、木の枝ような構造(ツリー構造)として扱うことで、わかりやすく、使いやすくする仕組みのことです。

正式名称は"Document Object Model"で、DOMはその略称です。

DOMのデータ構造

DOMは、データをツリー構造として扱い、そのデータ一つ一つを"ノード"と呼びます。一つ前のノード(自分自身が入っているノード)を"親ノード"、一つ後のノード(自分自身の中に入っているノード)を"子ノード"と呼ぶこともあります。

HTMLの場合は、一番上にあるDocumentの子ノードとして、<html>タグがあり、その子ノードとして<head><body>タグがあります。

  • Document
    • <html>
      • <head>
        • <meta>
        • <title>
      • <body>
        • <p>

ノードには、種類が3種類あります。それぞれ"要素ノード"、"属性ノード"、"テキストノード"と言います。

要素ノードは、"HTMLタグ"を、属性ノードは"タグの属性"を、テキストノードは"タグ以外のテキスト"のノードです。

上の図は、要素ノードの関係性を表した図です。

DOMの使い方

  • ノードの参照
    • 全体の配列から参照
    • HTMLタグの名前で参照
    • IDで参照
  • ノードの値の変更

ノードの参照

説明のためのhtml

<!DOCTYPE HTML> 
<html lang=ja>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset=utf-8>
        <meta http-equiv="Content-Script-Type" content="text/javascript">
        <title>hatena_diary_14</title>
    </head>
    <body>
        <p id="a">1つ目の文章です。</p>
        <p id="b">2つ目の文章です。</p>
        <p id="c">3つ目の文章です。</p>
        <script><!--ここにjavascriptのプログラムを記入--></script>
    </body>
</html>

f:id:yojiyama7:20170930220810p:plain

全体の配列から参照

全てのノードは、配列で参照できます。documentに続く形で、何番目の要素を参照したいかを指定します。

childNodes[番号]でその番号の要素を参照できます。番号は1からではなく、0,1,2...と0から始まっているので注意してください。

また、firstChildchildNodes[0]と同じ意味で使うことができます。

この方法はツリー構造を配列にしています。ツリー構造はwebブラウザによって異なるので同じコードでも動かない可能性があります。 今回は"GoogleChrome"のツリー構造に対応させて作っています。

for (var i=0, len=document.childNodes[1].childNodes[2].childNodes.length; i<len; i++) {
    console.log(document.childNodes[1].childNodes[2].childNodes[i]);
}

f:id:yojiyama7:20170930221700p:plain <script>タグの中身は気にしない。うん。

GoogleChromeでは、「改行、空白、タブ」が一つのノードとして判定されてしまうので、それが#textとして本文と本文の間に入っています。

HTMLタグの名前で参照

document.getElementsByTagName()は参照したいノードのHTMLタグを与えると、そのHTMLタグのノードの配列を返します。その配列から番号によって参照することができます。

console.log(document.getElementsByTagName("p")[1].firstChild.nodeValue); // >>> 2つ目の文章です。
IDで参照

document.getElementById()は参照したいノードの"ID"を与えると、そのノードを返します。html内でIDは同じものを複数使うことができないので、文法があっていればエラーを防ぐことができます。

console.log(document.getElementById("c").firstChild.nodeValue); // >>> 3つ目の文章です。

ノードの値の変更

参照したノードに代入することで、ノードの値を変更することができます。

document.getElementById("c").firstChild.nodeValue = "書き換えました。";

f:id:yojiyama7:20170930222159p:plain