JavaScriptでDOMを操作する方法【初心者向け】
初心者向けに、JavaScriptで【DOMを操作する方法】を解説した記事です。DOM（document Object Model）はdocumentオブジェクトを通して、個々の要素を取得・操作することができます。業務でも役立つ知識です。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
高田 悠
今回は、JavaScriptでDOMを操作する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
（動画は2つに分かれています）
DOMとは
JavaScriptでは、表示されたWebサイトを動的に書き換えることができるというのが大きな特徴です。
そして、その特徴を支えているのがDOM（Document Object Model）です。
田島メンター！DOMというのは何でしょうか？
簡単に言うと、HTMLのタグなどにアクセスして、CSSを追加したり、あるいはタグを追加したり・削除したりする仕組みのことなんだ。
HTMLをJavaScriptで操作できるってことですか？
その通り！実際にDOMがどんなものなのか詳しく解説していくね。
Windowオブジェクト
DOMを理解するには、まずWindowオブジェクトを知る必要があります。
Windowオブジェクトは、ブラウザが持っている情報をそのまま持っています。
ブラウザのコンソールに以下のように記述すると、Windowオブジェクトの中身が見られます。
console.log(window);
Windowオブジェクトが持っている、プロパティやメソッドがずらりと出てきます。
開発でよく使われるWindowオブジェクトのプロパティ / メソッドには、以下のようなものがあります。
- location : 現在開いているページのURLに関する情報が格納されるプロパティです。
- innerWidth / innerHeight : ブラウザ画面の幅や高さの情報が格納されるプロパティです。
- alert : アラートを表示するためのメソッドです。
- setTimeout / setInterval : 一定時間後や一定時間おきに処理を行うためのメソッドです。
また、Windowオブジェクトのプロパティ / メソッドのアクセスの際には、windowの記述を省略できるという特性があります。
console.log(window.location);
console.log(location);
//どちらも現在のURLの情報が入ったオブジェクトが表示される！まとめると、今開いているタブが持っている情報をすべて格納しているのがWindowオブジェクトということです。
Documentオブジェクト
DocumentオブジェクトはWindowオブジェクトのプロパティの1つで、こちらも現在のサイトに関する情報を保持しています。
Windowオブジェクトがブラウザそのものに関する情報だったのに対し、Documentオブジェクトはブラウザで表示しているHTMLに関する情報と言えるでしょう。
中身をみていくと、いろいろプロパティがありますね。
たとえば、bodyはHTMLのbodyタグの中身をあらわしています。
本題のDOMに戻ります。
名前の通り、DOM（Document Object Model）ではDocumentオブジェクトを通して、個々の要素を取得・操作できるのです。
次の章からは、DOMの仕組みやDOMの操作方法を具体的に見ていきましょう。
DOMのツリー構造
それでは、DOMの操作の仕方について見ていきましょう。
個別の操作方法の前に、「ツリー構造」と言われるDOMの構造について見ていきます。
ツリー構造は簡単に言えば、1つの親要素の下に子要素があって、さらにその子要素がそれぞれ親になり、またその下に子要素を持つ……というぶら下がり構造を意味します。
実際のHTMLのコードも、ツリー構造として捉えられます。
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<h1>見出し</h1>
<div>
<p>テキスト1</p>
<p>テキスト2</p>
</div>
</body>
</html>コードのインデント=字下げによって、親子関係を判断できます。
例えば、<body></body>の間には字下げされたh1タグとdivタグがあり、これは「h1とdivはbody要素の子要素である」と言うことができます。
また、上記のHTMLコードの親子関係は、以下のように図で表せます。
DOMの仕組みにおいては、ツリーにぶら下がった要素1つ1つを「ノード」と呼びます。
ツリー構造とノードを理解することで、DOMへのアクセスが自在に行えるようになります。
DOMの操作方法
DOMを操作するために、JavaScriptには様々な機能が備えられています。
DOMを操作する機能は、Documentオブジェクトのプロパティである場合と、各要素であるNodeのプロパティである場合とに分かれます。
HTMLそのものに対してアクションをする場合はDocumentオブジェクト、特定のHTML要素に対してアクションする場合はNodeのプロパティになることを意識して、ここからの解説を読み進めてみましょう。
それでは実際にDOM操作の具体例を紹介していきます！
DOM要素を取得する
DOMを操作するためには、まず操作する対象の要素を取得する必要があります。
いくつかの要素取得のためのメソッドがDocumentオブジェクトに登録されていますが、本記事では頻繁に用いるメソッドに絞って紹介します。
idを指定して要素を取得する：document.getElementByIdメソッド
document.getElementByIdは、HTML要素に指定されたidをもとに対象要素を取得するメソッドです。
idは重複が禁止されているため、確実に特定の要素を取得できます。
次のコードでは、HTMLにある、titleというidを持つ要素を取得します。
<body>
<h1 id="title">タイトル１</h1>
</body>const title = document.getElementById('title');
console.log(title)；;
コンソールには該当のh1要素が表示されました。
タグ名やクラス名を指定して要素を取得する：document.querySelectorAllメソッド
document.querySelectorAllでは、タグの名前やクラス名を指定して、該当する複数の要素をすべて取得できます。
共通のクラス名を持つ要素を一括で操作したい場合などに便利です。
以下のコードでは、elementというクラスを持つ要素2つと、aタグの要素2つをそれぞれ取得します。
<body>
<p class="element">要素１</p>
<p class="element">要素２</p>
<a>要素１</p>
<a>要素２</p>
</body>//クラス名で指定する場合は、クラス名の前にドットをつける
const elements = document.querySelectorAll('.element');
//タグ名で指定する場合は、そのままタグ名を記述
const links = document.querySelectorAll('a');
console.log(elements)
console.log(links)
ブラウザで確認すると、NodeListという配列のような形式に要素が格納されています。
「ツリーにぶら下がる各要素はノード（Node）である」ことを思い出すとしっくりきますね。
DOM要素の中身を取得・変更する
先ほどまでは、DOM要素そのものの取得について説明をしました。
では、その要素の中の文字列やスタイルを取得したり書き換えたりするにはどうすればよいでしょうか。
文字列の取得・変更：textContentプロパティ
取得したDOM要素に対してtextContentというプロパティを使えば、指定した要素のテキスト部分のみを取り出せます。
<body>
<h1 id="title">タイトル１</h1>
</body>const h1 = document.getElementById("title");
const title = h1.textContent;
console.log(title);
このように、「タイトル1」というテキスト部分だけが取得できたのがわかると思います。
また、textContentプロパティを使えば、テキストの内容を書き換えることもできます。
const h1 = document.getElementById("title");
h1.textContent = "タイトル変更";
画面上のタイトルの文言が「タイトル」から「タイトル変更」に書き換えられました。
textContentなどのプロパティを使って要素を取得し、また中身を書き換えることができるというのが、DOMの非常に便利なところです。
要素のクラスを追加・削除する：classListプロパティ
ある要素のスタイルを変更した場合、classListプロパティを使うと便利です。
classListプロパティ単体の機能は「クラス名の追加・削除」であり、直接スタイルを変更するものではありません。
しかし、CSSは基本的にクラス名で記述されているため、CSSと連携することで柔軟に見た目を変更できます。
以下のコードは、タイトルにredというクラス名を追加することで、文字色を赤色に変更する例です。
<body>
<h1 id="title">タイトル１</h1>
</body>//redというクラスがついている場合、文字色を赤色にする
.red {
color: red;
}const h1 = document.getElementById("title");
//h1にredというクラスを追加する
h1.classList.add('red');
h1にredというクラスが付与され、タイトルの文字色が赤色になりましたね。
同様に、クラスを削除したい場合、addメソッドではなくremoveメソッドを使用します。
h1.classList.remove('red');JavaScriptを使ってスタイルの変更ができるようになれば、ユーザーの操作やアプリケーションの状態に応じて見た目が変化する本格的なWebサイトが作れるようになります。
要素を新たに作成する
既存のHTML要素に変更を加えるだけでなく、JavaScript側で要素を新しく作ることもできます。
要素を作成する：document.createElementメソッド
要素を新たに作成するには、DocumentオブジェクトのプロパティであるcreateElementというメソッドを使用します。
createElementの引数には要素のタグ名を指定します。
次のコードでは、空のp要素を1つ作成します。
const p = document.createElement('p');しかし、これだけではブラウザ上にp要素は追加されません。
現時点では、あくまでJavaScriptの中でDOMを生成しただけであり、HTML上に表示させるにはdocumentに該当要素を追加する必要があります。
documentへの要素の追加を担うのが、次のdocument.appendChildメソッドです。
HTMLに要素を追加する：document.body.appendChildメソッド
先ほど作成したp要素をHTML上で表示させるには、document.body.appendChildメソッドの引数に該当する要素を指定します。
const p = document.createElement('p');
document.body.appendChild(p);
このままではp要素の中身が空なので、「テキストテキスト」という文字列を追加しましょう。
文字列の追加は、textContentプロパティでしたね。
p.textContent = 'テキストテキスト';
ようやくブラウザに「テキストテキスト」というp要素を表示できました。
まとめ
今回は、DOMとはなにかということと、要素の取得・作成・追加という基本的な操作について紹介しました。
主なポイントは以下の通りでした。
- ブラウザそのものに関する情報をもつWindowオブジェクト
- Webページに関する情報を持つDocumentオブジェクト
- documentの各要素であるNode
- DOMはツリー構造でできている
- DOM操作のためのプロパティ・メソッド
本記事で紹介した以外にも、DOM操作のためのプロパティ・メソッドはたくさん用意されています。用途に応じてぜひ使ってみてくださいね。
JavaScriptをさらに勉強したい場合は、JavaScriptでオブジェクトを使う方法もあわせてお読みください。
JavaScriptでHTMLを追加したり、後から操作することができるんですねー。
そうそう。JavaScriptはブラウザ上で動作しているので、ブラウザ上で組み立てられて表示されるHTMLなどの変更ができるんだ。
getElementByIdで返ってくる値というのは、オブジェクトなんですよね？
そうなんだよ。オブジェクトに最初から用意されている関数を利用することができるんだよ。
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
