MENU
  1. ホーム
  2. プログラミング言語
  3. JavaScript
  4. Javascript学習
  5. 【JavaScript入門】はじめてのDOM操作・取得まとめ！

【JavaScript入門】はじめてのDOM操作・取得まとめ！

Javascript学習
貝原 輝昌

こんにちは！Webコーダー・プログラマーの貝原（@touhicomu）です。

今回は、JavaScriptでHTMLを操作するために欠かせない「DOM」について学習をしていきましょう。DOMを学ぶには「ツリー構造」の基本や「イベント処理」などについて学習することも非常に重要になってきます。

そこでこの記事では、そもそもDOMとは何か？DOMの使い方は？という基本的な内容から学習を進めていき、さらに、

  • DOM操作の応用
  • イベント処理について
  • DOMレンダリングの効率化

など、DOMの応用的な使い方に関しても解説していきます。この記事で、「DOM」の基本をしっかりと学習してスキルアップを目指しましょう！

目次

「DOM」とは？

それでは、まず最初に「DOM」について基本的な知識から学習を進めていきましょう！

「DOM」は、簡単に言うとHTMLなどのドキュメントにJavaScriptからアクセスするための仕組みのこと言います。DOMの正式名称が「Document Object Model」と呼ばれることからも分かるように、HTML文書をオブジェクトデータのように考えます。

例えば、次のようなHTMLがあるとします。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>サンプルタイトル</title>
    </head>
    <body>
        <h1>これはサンプルです！</h1>
    </body>
</html>

このHTMLをJavaScriptから操作するためには、DOMの仕組みを使ってアクセスすることになります。

つまり、HTML要素や属性などがすべてDOMによってオブジェクトデータにまとめられるわけです。オブジェクトデータの形式であれば、JavaScriptから簡単に操作することが可能になるのでHTMLを自由に操作できるわけです。

本記事では、この「DOM」についての基本から応用技まで詳しく解説していきますので、ぜひ参考にしてみてください！

DOMの使い方

ここからは、DOMの仕組みを使った基本的な使い方について見ていきましょう！

重要な概念である「ツリー構造」や、JavaScriptからHTML要素を作成・取得する方法についても学んでいきます。

HTMLのツリー構造について

まずは、HTMLの「ツリー構造」について学んでいきましょう！

前章で、DOMはHTML文書をオブジェクト形式のデータにまとめる仕組みと解説しました。ただし、すべてのHTML要素を何も考えずにオブジェクト化すると、データの中身がめちゃくちゃになりアクセスが困難になります。

そこで、登場するのは「ツリー構造」という考え方です！これは、一般的なパソコンのファイルを整理する「フォルダ構造」と同じように考えれば分かりやすいでしょう。

次のHTMLを見てください！

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>これはサンプルです！</h1>
    </body>
</html>

このHTMLをツリー構造にすると、まず最初に「html」というフォルダがあると考えてください。

「html」フォルダの中には、「head」「body」という2つのフォルダがあります。そして、「head」の中には「meta」という要素があり、「body」の中には「h1」という要素が格納されているのです。

このように、一番上の階層から順番にHTML要素が規則的に格納されてオブジェクトデータとしてまとめられているわけです。

ちなみに、このオブジェクトデータにJavaScriptからアクセスするには「Document」オブジェクトを利用します。「Document」の基本的な使い方や活用技については、次の記事で詳しくまとめているのでぜひ参考にしてみてください！

HTMLの要素を取得する! JavaScriptのdocumentプロパティの使い方
更新日：2024年3月29日

DOMを使ってHTML要素を取得する方法

それでは、DOMによって作られたオブジェクトデータを活用してJavaScriptからHTMLを操作してみましょう！

一般的にはDocumentオブジェクトのメソッドである「getElementById()」を利用するのが簡単です。

次のサンプル例を見てください！

<body>
<p id="text">これはサンプルテキストです</p>

<script>
    var p = document.getElementById('text');

    console.log( p );
</script>
</body>

実行結果

<p id="text">これはサンプルテキストです</p>

この例では、id属性値「text」が付与されたp要素が配置されています。このid属性値を利用することでp要素をJavaScript側で取得できるのが「getElementById()」メソッドの特徴です。

試しに、変数「p」をコンソールログに出力すると、しっかりとp要素を保持しているのが実行結果からも分かりますね。「getElementById()」についてさらに知識を深めたい方は、次の記事で基本から応用まで解説しているので参考にしてみてください！

【JavaScript入門】getElementByIdを完全理解する3つのコツ！
更新日：2024年3月29日

DOM操作の応用

ここからは、DOMを活用してさらにJavaScriptでHTMLを操作する手法について見ていきましょう！

主に、HTML要素の書き換え・作成・追加についてそれぞれ詳しく学んでいきます。

HTML要素を書き換える方法

まずは、HTML要素をJavaScript側から書き換える方法について見ていきましょう！この場合、一般的には「innerHTML」プロパティを使うのが簡単です。

記述方法としては、【 HTML要素.innerHTML = HTML要素 】のように書き換えたいHTML要素を代入するだけです。

次のサンプル例を見てください！

<div id="wrap">
    <p>これはサンプルテキストです</p>
</div>

この例では、div要素の中にp要素が1つ配置されています。

「innerHTML」プロパティを使って、このp要素をh1要素に書き換えてみましょう！

var div = document.getElementById('wrap');

div.innerHTML = "<h1>サンプルタイトル</h1>";

console.log( div );

実行結果

<div id="wrap">
    <h1>サンプルタイトル</h1>
</div>

最初に「div要素」を取得して、そのまま「innerHTML」を使って文字列でh1要素を代入します。「innerHTML」は文字列のHTMLタグを認識できるので、実行結果のようにp要素がh1要素に置き換わるというわけです。

「innerHTML」についてさらに知識を深めたい場合は、次の記事で基本から応用まで学習できるのでぜひ参考にしてみてください！

【JavaScript入門】innerHTMLでdivタグ内の要素を取得、設定する方法
更新日：2024年3月1日

DOMを使ってHTML要素を作成する方法

次に、HTML要素をJavaScriptから生成する方法について見ていきましょう！

最も簡単な方法としては「createElement()」メソッドを利用することです。記述方法としては、【 document.createElement( HTML要素 ) 】のように引数へ生成したいHTML要素を指定するだけです。

次のサンプル例を見てください！

var pElement = document.createElement('p');

この例では、「createElement(‘p’)」と記述することで「p要素」を新規に生成して変数「pElement」に代入しています。あとは、JavaScript側で「pElement」を使ってp要素を自由に操作できるというわけです。

ただし、このままだとp要素はJavaScript内にだけ存在することになり画面に表示されることはありません。

次の章で解説する方法で、HTMLとしてDOMに追加しなくてはいけないのです！

HTML要素を追加する方法

JavaScript側で生成したHTML要素をDOMに追加して画面に出力できるようにしましょう！

そのために利用するメソッドとして「appnedChild()」があります。「appendChild()」を使うとJavaScript側で生成したHTML要素をDOMに追加して画面に出力できるようになります。

次のサンプル例を見てください！

var p = document.createElement('p');

//テキストを追加する
p.textContent = 'これはサンプルです';

//body要素内にp要素を配置する
document.body.appendChild( p );

実行環境

<p>これはサンプルです</p>

この例では、p要素を生成して「textContent()」メソッドでテキストを追加しています。そして、documentオブジェクトに続けて「body.appendChild( p )」と記述することでbody要素の中にp要素を配置することができます。

これによりDOMにp要素が追加されるので、画面にも生成したp要素が出力されるというわけです！

イベント処理について

これまで、DOMについての仕組みやJavaScript側からのHTML操作について学習をしてきました！

これらはすべてDOMによるオブジェクト化によって実現しているのですが、実はDOMが作られるタイミングも重要になります。そこで、読み込みタイミングの取得やイベントリスナーの作成方法について見ていきましょう！

DOMが読み込まれた（load）タイミングを取得する方法

DOMによってHTML文書がオブジェクト化されると、JavaScript側から自由に操作できることは分かりましたね？しかし、逆を言うとDOMによるオブジェクト化がされていないとJavaScript側からはHTMLを何も操作できないことになります。

そこで、必ずDOMが読み込まれた後にJavaScriptを実行できるようにする必要があるわけです。

最も簡単な方法としては「onload」イベントを記述することです！

window.onload = function() {

    //ここに処理を書く

}

この例のように、「window.onload」に対して処理を記述することでDOMによってオブジェクト化されたあとに処理を実行できるのです。

ちなみに、「onload」イベントによるJavaScriptの活用法については、次の記事で詳しくまとめているのでぜひ参考にしてみてください！

【JavaScript入門】onloadイベントの使い方とハマりやすい注意点とは
更新日：2024年4月16日

「addEventListener」を使ったイベント処理の方法

「onload」以外にも「addEventListener」を使ったイベント処理の方法もあるのでご紹介しておきます！実を言うと「onload」は複数同時に処理を記述できないという弱点があります。

次のサンプル例を見てください！

window.onload = function() {
//処理１
}

window.onload = function() {
//処理２
}

window.onload = function() {
//処理３
}

この例では、3つの「onload」イベント処理を記述しています。これを実行すると3つの処理が行われそうですが、実際には最後の「処理３」だけが実行されます。

なぜなら「onload」イベントは複数記述すると、その度に処理内容が上書きされる仕様になっているからです。

そこで、まったく同じ処理を「addEventListener」に置き換えてみましょう！

window.addEventListener('load', function() {
//処理１
})

window.addEventListener('load', function() {
//処理２
})

window.addEventListener('load', function() {
//処理３
})

「addEventListener」は第1引数にイベント名（load）を記述し、第2引数に実行する関数処理を記述します。これで「onload」イベントと同じ処理を実現できますが、この場合は3つの処理をそのまま実行することができます。

つまり「addEventListener」は上書きされないので、同時に複数の処理を記述できるというわけですね。

DOMレンダリングの効率化

最後に、DOMのレンダリングについての注意点をしておきます！ここで言うレンダリングとは、Webの画面にHTML要素を出力（表示）することを意味しています。

注意しなければいけない点として、もともとHTMLに存在している要素にアクセスするのは処理が遅いという点です！

次のサンプル例では、1000個のリスト要素をJavaScript側で生成しています。

var ul = document.createElement('ul');

console.time('log');
//-----------------------------------

for(var i=0; i<1000; i++) {
    var li = document.createElement('li');
    
    li.textContent = '項目' + i;
    ul.appendChild(li);
    document.body.appendChild(ul);//毎回、画面へ出力する
}

//-----------------------------------
console.timeEnd('log');

計測結果

143.353ms

この例では、for文の中で生成したul要素に1つずつ「li要素」を追加していきbody要素内に出力しています。

「console.time()」で計測してみると「143.353ms」になりました。注目して欲しいのは、「ul要素」「li要素」はJavaScript側で生成していますが「body要素」はもともと存在しているという点です。

もともとHTMLに存在している要素へのアクセスは処理が遅いので、ループ処理内で毎回アクセスするのはとても効率が悪いわけです。

そこで、body要素へのアクセスをfor文の外に出してみましょう！

var ul = document.createElement('ul');

console.time('log');
//-----------------------------------

for(var i=0; i<1000; i++) {
    var li = document.createElement('li');

    li.textContent = '項目' + i;
    ul.appendChild(li);
}
document.body.appendChild(ul);//最後にまとめて画面に出力する

//-----------------------------------
console.timeEnd('log');

計測結果

12.825ms

まずは計測結果を見てください！

先ほどは「143.353ms」だったのに対して、今回は「12.825ms」でかなり高速化できたことになります。理由は簡単で、for文の中がJavaScript側で生成した「ul要素」と「li要素」だけになったからですね。

そして、最後にbody要素へ1000個のリスト要素を保持した「ul要素」を追加することで、1回の処理で画面に出力できるわけです。このように、JavaScriptでDOMを扱う場合にはレンダリングの効率化についても意識するようにしておきましょう！

JavaScriptを使って未経験から仕事獲得したいなら

いかがでしたか？今回はDOMの使い方に関して基本から応用編まで解説しました。

中には「少し難しいな…」と感じた方もいるのではないでしょうか？JavaScriptを筆頭に、プログラミング学習を効率的に進めるためには、経験者からアドバイスをもらえる環境が大切になります。しかし、未経験者の場合はなかなか知り合いを作ることは難しいですよね。

そんな悩みを解決してくれるのが「プログラミングスクール」です。弊社侍エンジニアでは、1人のインストラクターが最後まであなたのプログラミング学習を徹底サポートいたします。

オンラインのマンツーマンレッスンであなたの進捗に合わせて授業が進むため、躓くことなく効率的にプログラミングを学ぶことが出来ますよ。

また、弊社ではフリーランスの案件獲得サポートや転職・就職支援も行っているため、プログラミングを仕事にしたいという方にも是非ご利用頂きたいです。随一のコンサルタントがあなたのプログラミング習得から転職成功までサポートさせて頂きます。

少しでも興味のある方はまずは無料カウンセリングをご利用してみてはいかがでしょうか？専属コンサルタントがあなたの悩みや不安、目標をヒアリングし、最適な学習プランを提供させて頂きます。さらに今なら無料カウンセリング受講者全員に以下の豪華3大特典をプレゼントしています！

  • 「最短1ヶ月で開発ができる学習方法」電子書籍（非売品）
  • 効率的なオリジナル学習カリキュラム
  • 未経験の転職を可能にするキャリアサポート

対面（渋谷）はオンライン受講もできますので、ご興味のある方はぜひお試し下さい。下記カレンダーから直接予約可能となっています。

お急ぎの方はこちらからお問い合わせください。

読み込みに失敗しました。
大変お手数ですが、本ページを再度読み込んでください。

再度読み込んでも、読み込み失敗が起こる場合は
こちらからお問い合わせください。

カウンセリングはオンラインにて実施しております。

※予約完了後に、カウンセリングのためのURLやIDなどをメールにてご案内します

1.ご希望の日時を選択してください

空きあり 満席
前週
次週

ご希望日時に空きがない場合、こちらからお問い合わせください。

2.必須事項を入力してください

必須選択された日時

日時を選択してください

開催場所 オンライン

日時を選択する

必須お名前

必須電話番号

必須メールアドレス

    ご予約により、個人情報の取り扱いおよび利用規約に同意するものとします。

    Javascript学習
    JavaScript

    この記事を書いた人

    貝原 輝昌のアバター 貝原 輝昌

    こんにちは！貝原（@touhicomu）と申します。
    現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。
    現住所は、日本の西海岸、長崎県は波佐見町です。田舎ライフです。^^
    地元の観光団体「笑楽井石」にボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。
    以下の活動も行っています。
    　・笑楽井石のブログ
    　・エクセル関数を日本語化するソフト
    　・エクセルVBAを日本語で記述するソフト

    この著者の記事一覧へ
    目次