初めて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>
- <head>
- <html>
ノードには、種類が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>
全体の配列から参照
全てのノードは、配列で参照できます。document
に続く形で、何番目の要素を参照したいかを指定します。
childNodes[番号]
でその番号の要素を参照できます。番号は1からではなく、0,1,2...と0から始まっているので注意してください。
また、firstChild
はchildNodes[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]); }
<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 = "書き換えました。";