JavaScriptでDOMを操作する方法【初心者向け】

初心者向けに、JavaScriptで【DOMを操作する方法】を解説した記事です。DOM(document Object Model)はdocumentオブジェクトを通して、個々の要素を取得・操作することができます。業務でも役立つ知識です。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptでDOMを操作する方法について解説します。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

目次

 

 

DOMとは

JavaScriptでは、表示されたWebサイトを動的に書き換えることができるというのが大きな特徴です。

そして、その特徴を支えているのがDOM(document Object Model)です。

 

 

Windowオブジェクト

DOMについて知るために、順々と解説していきます。

DOMを理解するには、まずWindowオブジェクトを知る必要があります。

Windowオブジェクトは、ブラウザが持っている情報をそのまま持っています。“ブラウザそのもの”と言ってしまうことができるでしょう。

 

言葉だけではわかりづらいですね。実際にオブジェクトの中身を見てみましょう。

 

基本のHTMLファイルのもと、console.logでWindowオブジェクトを呼び出します。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
      console.log(window);
    </script>
  </body>
</html>

windowオブジェクト

 

そして、▶︎をクリックしてWindowオブジェクトを開くと……

中身

このように、Windowオブジェクトが持っている、プロパティやメソッドがすべてずらりと出てきます。

 

簡単なプロパティには、次のようなものがあります。

オブジェクト例

 

  • outerHeight → ブラウザの高さのプロパティ
  • outerWidth → ブラウザの幅のプロパティ
  • screenX → ブラウザの左上の角のX座標をあらわすプロパティ
  • screenY → ブラウザの左上の角のY座標をあらわすプロパティ

 

また、locationプロパティを開いてみましょう。locationプロパティが持っているオブジェクトのなかには、このタブが今アクセスしている場所についての説明が並んでいます。

location たとえば、hrefプロパティには、このタブがアクセスしているWebページのURLが入っています。

 

このように、今開いているタブが持っている情報をすべて格納しているのがWindowオブジェクトになります。

 

 

documentオブジェクト

そして、このWindowオブジェクトのなかで非常に重要なプロパティがdocumentプロパティです。さらに、documentプロパティが持っているのが、documentオブジェクトになります。

documentオブジェクトとは、HTMLで表現されているコンテンツをすべて保持しているオブジェクトです。

単純に説明すれば、Windowオブジェクトがブラウザそのものだったのに対し、documentオブジェクトはアクセスしているWebサイトそのものと言えるでしょう。

document

中身をみていくと、いろいろプロパティがありますね。例えば、bodyはHTMLのbodyタグの中身をあらわしています。

HTMLに出てこないようなプロパティもありますが、それらもdocumentオブジェクトのなかに散点されています。

 

やっとDOMに戻ってきましたが、その名の通り、DOM(document Object Model)ではdocumentオブジェクトを通して、個々の要素を取得・操作することができるのです。

実際に、Webサイトの個々の要素を取得したり、削除したり、追加したりといった基本的な操作をやってみましょう。

 

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

DOMのツリー構造

それでは、DOMの操作の仕方について見ていきましょう。

個別の操作方法の前に、「ツリー構造」と言われるDOMの構造について見ていきます。

Windowオブジェクトは、HTMLをdocuentオブジェクトに変換するときに、ツリー構造というかたちで情報を保持します。
ツリー構造という言葉があまりなじみのないかたは、親子関係と捉え直してください。

要は、1つの親要素の下に複数の小要素があって、さらにその子要素がそれぞれ親になり、またその下に複数の小要素を持つ……というぶら下がり構造を意味します。

 

 

実際に見ていきましょう。

 

基本となるHTMLファイルに<h1><p>などで少し要素を加えてみました。

 

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <h1 id="title">タイトル1</h1>
    <p id="element1">要素1</p>
    <p id="element2">要素2</p>
    <script>
    </script>
  </body>
</html>

 

表示するとこんな感じですね。

DOM

HTMLをDOMに変換したのを見やすいかたちにしてくれているのが、Elements というタグです。

<html>という1番の親要素の下に、<head>と<body>という2つの小要素が並んでいるのがわかると思います。

 

そして、それぞれをまた親として<head>の下には<meta><title>要素が、<body>の下には<h1><p><script>要素が子要素として並列でぶら下がっています。

また親子

このように、それぞれが親になって子の要素をいくつか持ち、さらに、その小要素が親になってさらに子要素を持つ……という入れ子構造になっていることを頭に入れておいてください。

 

 

DOMの操作方法

要素取得のメソッド:getElementById(id);

では、このツリー構造を前提に、DOM操作の方法について見ていきましょう。

まずは要素の取得です。取得には、 getElementById(id); という便利なメソッドがあります。

 

要素にふられたidをもとに(ById)、そのidを持つ要素(Element)を取ってきます(get)。

 

実際にやってみましょう。<h1>を取ってくるとします。

<script>
  var h1 = document.getElementById("title");
  console.log(h1);
</script>

 

これで、titleというidを持ったh1要素をそのまま取得してきます。

Consoleに表示を切り替えると、h1タグで囲まれたすべてが取得されているのが確認できます。

document.getElementById()

表示されましたね。

 

 

要素内のテキストの取得、変更:textContentプロパティ

では、h1タグのなかの文字列「タイトル1」だけを取ってきたいような場合はどうしましょう。

その場合は、textContentというプロパティを使います。textContentというプロパティを使えば、指定した要素のテキスト部分のみを取り出すことができます

<script>
  var h1 = document.getElementById("title");
  console.log(h1);
  var title = h1.textContent;
  console.log(title);
</script>

タイトル1

このように、「タイトル1」というテキスト部分だけが取得できたのがわかると思います。

 

 

textContentプロパティを使えば、テキストの内容を書き換えることもできます。

<script>
  var h1 = document.getElementById("title");
  console.log(h1);
  h1.textContent = "タイトル変更";
</script>

タイトル変更

簡単ですね。

 

このように、要素を取得し、また中身を書き換えることができるというのが、JavaScriptの非常に便利なところになります。

 

 

要素を作成するメソッド:
createElement(tag_type);、createTextNode(text);

要素にはh1やpといったタグタイプがあります。それも合わせて文字列で指定します。

さらに、その要素がテキストも持つよう作りたい場合は、createTextNode(text);で作ることができます。

 

「要素1」や「要素2」といったpタグがありますが、これにもう1つ、「要素3」というテキストを持つpタグを作成し追加してみましょう。

まずは、このように記述します。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <h1 id="title">タイトル1</h1>
    <p id="element1">要素1</p>
    <p id="element2">要素2</p>
    <script>
      var p = document.createElement("p");
      var text = document.createTextNode("要素3");
    </script>
  </body>
</html>

 

しかし、このままではまだp要素も「要素3」というテキストもどの親要素の下につくかを指定していません。ですので、実行してもまだ画面は変わりません。

要素3

ですので、「要素3」をブラウザで表示させるためには、既存の要素のどれかを親要素に指定し、子要素として追加する必要があります。

次の追加の章で解説します。

 

 

要素を追加するメソッド:appendChild(element);

作成では、新しく「要素3」というテキストを持つp要素を作成しました。しかし、作っただけなので、まだツリー構造のなかに組みこまれていない状態です。当然、このままではブラウザ上には表示されません。そこで、「要素3」というテキストを持つp要素を、どれかの親要素の子要素として追加する必要があります。

特定の親要素の下に子要素を追加するためのメソッドがappendChild(element); です。

(ある要素(element)を子(Child)として追加(append)する! わかりやすいですね)

 

親を指定し、作ったp要素を子要素として追加してみます。

今回は、既にあるp要素(要素1、要素2)と並列に並べたいので、bodyタグを親に指定します。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <h1 id="title">タイトル1</h1>
    <p id="element1">要素1</p>
    <p id="element2">要素2</p>
    <script>
      var p = document.createElement("p");
      var text = document.createTextNode("要素3");
      document.body.appendChild(p).appendChild(text);
    </script>
  </body>
</html>

 

改めて、ブラウザを呼び出してみます。

要素3

要素3が現れましたね。

 

 

今回は、DOMとはなにかということと、要素の取得・作成・追加という基本的な操作について紹介しました。

このほかにも、DOMのためのメソッドはたくさん用意されています。用途に応じてぜひ使ってみてくださいね。

 

JavaScriptをさらに勉強したい場合は、JavaScriptでオブジェクトを使う方法も合わせてお読みください。

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。