JavaScriptのDOMを初心者向けに解説｜Javascript入門講座（13）

はじめに

　JavaScript入門講座の第十三弾として、JavaScriptのDOMついて紹介します。

　この記事を読むと次の疑問について知ることができます。

　JavaScript入門講座（12）では、JavaScript ブラウザオブジェクトについて解説してきました。

　ここでは、JavaScriptのDOMについて深堀していきます。

DOMとは？

　DOMとは、Document Object Modeの頭文字を取った略語で、HTML文書内の要素を扱うブラウザーオブジェクトの1つであり、World Wide Web Consortium（W3C）が取り決め勧告しているオブジェクトになります。

HTMLのツリー構造とDOMの関係

　 HTMLの要素は、ツリー構造になっています。

　このHTMLのツリー構造の要素一つ一つをDOMではノードと呼びます。

　こうすることにより、JavaScript言語などよりHTMLの要素などを操作できるようになります。

　この概念図を以下に示します。

　それでは、これからHTML内の要素などへアクセスしてみましょう。

要素の取得

　HTML内のID名が付されている要素の取得には、getElementById()メソッドが使えます。

getElementById()メソッド

　ここで、HTML文書内に次のようなid名が付された文があるとしましょう。

 <div id="bom1"></div>

　この要素内には、文字の書き込みはありません。

　そこで、JavaScriptからこの要素を取得し、その中に文書を追加してみましょう。

　この際に利用できるのが「innerHTML」プロパティーです。

// getElementByIdにID名を指定して要素を取得
const h1title = document.getElementById( "dom1" );
//要素にテキストを追加します。
h1title.innerHTML = "これからDOMの記事を書くよ！";

　ブラウザーで見ると、「これからDOMの記事を書くよ！」と言う文書が追加され、表示されていることが分かります。

getElementsByClassName()メソッド

　こちらのメソッドは、HTML文書内のclass名で書かれた要素を取得します。

<div class="dom2"></div>
<div class="dom2"></div>

　同様に、何も書かれていない要素「dom2」に文書を追加してみましょう。

const h1title1 = document.getElementsByClassName( "dom2" );
//要素にテキストを追加します。
h1title1[0].innerHTML = "これからDOMの記事を書くよ！-1";
h1title1[1].innerHTML = "これからDOMの記事を書くよ！-2";

　ブラウザーで見ると、「これからDOMの記事を書くよ！-1」と「"これからDOMの記事を書くよ！-2」と言う文書が追加され、表示されていることが分かります。

　getElementsByClassName()とほぼ同じ使い方ができるメソッドとして、getElementsByTagName()メソッドがありますが、getElementsByTagName()メソッドの場合はタグ名を指定して要素を取得します。

　ここでは、これについては省略します。

querySelector()/querySelectorAll()メソッド

　このメソッドは、HTML文書内の要素ではなく、CSS内のセレクタを取得して、HTML文書を操作します。

<ul>
<li class="dom3">DOMとは？</li>
<li class="dom4">DOMのノード</li>
<li class="dom5">DOMの要素</li>
</ul>

// CSSセレクタでdom3の要素を指定
const ulList = document.querySelector( " .dom3 " );
console.log( ulList ); //li.dom3を取得
// LI要素を全て取得
const ulList1 = document.querySelectorAll( "li" );
console.log (ulList1.length); //liの要素数３を取得
ulList1[2].innerHTML += "、何か追加"
// DOMの要素に、「、何か追加」の文書を追加

appendChild()メソッド

　「innerHTML」以外にも、要素の内容を変更する方法があり、appendChild()メソッドは、指定した要素の最後に要素を追加します。

　次のコードは、UL要素に新しいLI要素を追加し、LI要素にテキストを追加しています。新しいLI要素の追加には、ノードを作成する「createElement()メソッド」、要素のテキストを設定する「textContentプロパティ」を使っています。

上述の「ul要素」4つ目の「li」要素を追加して見ます。

<ul class="ulClass">
<li class="dom3">DOMとは？</li>
<li class="dom4">DOMのノード</li>
<li class="dom5">DOMの要素</li>
</ul>

/ .ulClass要素を取得
const ulList2 = document.querySelector( ".ulClass" );
// 挿入用ノードの作成
const liList3 = document.createElement( "li" );
// LI要素のテキストを設定
liList3.textContent = "DOMの応用" ;
// 作成した要素を.list要素に追加
ulList2.appendChild( liList3 );

classListプロパティ

　要素のクラス名を追加したり、削除したり、参照したりすることが出来るプロパティで、classListの後にメソッドを定義することにより、追加削除などの機能を指定することが可能となります。

// クラス名を追加
liList3.classList.add( "henKou" );

.henKou{
color: red;
font-size: 1.5em;
background-color: skyblue;
}

　上述により、最後のリスト「DOMの応用」の文字が1.5倍、文字色が赤、背景色がスカイブルーになっていることが分かります。

複数要素の取得

querySelectorAll()を使った複数要素

　前述でul要素の複数要素をquerySelectorAll()で取得することができますが、これらの取得したデータを処理する際には、for each 文が便利です。

// LI要素を全て取得
const ulList4 = document.querySelectorAll( "li" );
// 要素毎に処理
ulList4.forEach( function( element, index, obj ){
// コールバック関数の引数を使った出力
console.log( "要素のテキスト：" + element.innerText + " \nインデックス：" + index + " \n要素のテキスト（インデックスを使って取得）：" + obj[index].innerText );
} );

おわりに

　何だったでしょうか？

　DOMとは？、HTMLのツリー構造とDOMの関係はどのようなもの？、要素の取得はどうするの？、getElementById()メソッド、getElementsByClassName()メソッド、querySelector()/querySelectorAll()メソッド、appendChild()メソッド、classListプロパティ、複数要素の取得はどうするの？、querySelectorAll()を使った複数要素などについて解説してきました。

　この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。