windowオブジェクトやDOMとは何？JavaScriptで画面を操作する方法についても解説します！

2024年7月15日 2024年7月15日

講師:中島

JavaScriptを学習していると「DOM」という言葉を聞いたことはありませんか？
この記事は「DOMとは何かイマイチ分からない」「DOMを使って、画面を操作したい！」という方に
読んでいただきたい記事になっています。
この記事を読み終えると、DOMとは何か、DOM操作の方法などを一通り知った状態になるでしょう。

目次：

この記事のポイント

windowオブジェクトとは何かが分かる
DOM（Document Object Model）とは何か、その基本的な概念が分かる
DOM要素を取得する方法が分かる
取得した要素のテキスト内容や属性、スタイルの変更、イベントリスナーの追加など、画面操作 (DOM操作) の方法が分かる

windowオブジェクトとは？

windowオブジェクトは、ブラウザのウィンドウを表すJavaScriptオブジェクトです。
ブラウザの標準で使える(グローバルスコープの)オブジェクトや関数、変数は全てこのwindowオブジェクトの中に存在します。
つまり、ブラウザが提供する機能や情報にアクセスするための入り口です。

主なプロパティとメソッド (一例)

プロパティ
- window.document: 現在表示されているHTMLドキュメントにアクセスできます。後ほどDOM操作の部分で紹介します。
- window.innerWidth: ウィンドウの内部の幅をピクセル単位で取得できます。
- window.innerHeight: ウィンドウの内部の高さをピクセル単位で取得できます。
- window.location: 現在のURLに関する情報を持ち、URLの変更やページのリダイレクトができます。
メソッド
- window.alert(): アラートダイアログを表示します。
- window.confirm(): 確認ダイアログを表示し、ユーザーの応答を取得します。
- window.open(): 新しいブラウザウィンドウまたはタブを開きます。
- window.console.log(): 開発者ツールなどにログを出します。開発で頻繁に使われます。

windowは記述を省略できます。省略しても同様に動くため問題ありません。
実は、よく使われているconsole.log()やalert()などのメソッドの記述は
(window.)console.log()、(window.)alert()だったのです。

// どちらでも動作は同じ。記述が短くなるので、省略して書けばOK
console.log("Hello World!")
//or
window.conosle.log("Hello World!")

DOM (Document Object Model) とは？

DOM (Document Object Model) は、HTMLやXMLドキュメントの構造をツリー形式で表現したもので、文書の内容をプログラムから操作するための方法 (API) を提供します。
DOMは、ドキュメント内の各要素をオブジェクト構造 (DOMツリー)として表現し、これによりJavaScriptなどのプログラミング言語からHTMLやXMLの内容を動的に操作することができます。
簡単に言えばJavaScriptからHTMLを扱うための仕組みのことです。

DOMツリーの構造 (階層構造)

DOMツリーは、ドキュメント内のすべての要素を階層的に表現します。以下は、シンプルなHTMLドキュメントとそのDOMツリーの構造です。
DOMツリーの各要素をnode(ノード)といいます。

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルドキュメント</title>
  </head>
  <body>
    <h1>こんにちは！</h1>
    <p>これは例文です。</p>
  </body>
</html>

このHTMLドキュメントは、以下のようなDOMツリーに変換されます。

- document
  - html
    - head
      - title
        - "サンプルドキュメント"
    - body
      - h1
        - "こんにちは！"
      - p
        - "これは例文です。"

JavaScriptで画面を操作する方法 (DOM操作)

ウェブページは、ドキュメントオブジェクトモデル (DOM) で操作することができます。
DOM を使い始めるのに、特別なものは必要ありません。JavaScript で直接APIを使用し、変更することができます。
ブラウザではDOM操作を行うためのAPIとして、Documentオブジェクトが標準で用意されています。

DOMでできることの例:

HTMLの特定の<h1>タグの中身のテキストを変える
HTMLの特定の<ul>タグの中に<li>タグを追加する
HTMLの特定の<button>タグがクリックされたときに確認アラートを表示する

では、実際に具体的なDOM操作のコードについてみていきましょう。
これから紹介するものは数が多いので全て暗記する必要はありません。挙動を理解することに集中しましょう。
種類が多いため、忘れた時に都度調べて使用すれば問題ないです。
以下で紹介するのは、ほんの一例です。

要素の取得

JavaScriptでは、以下の方法でDOM要素を取得することができます。

//指定されたIDを持つ要素を取得します。
const heading = document.getElementById('heading');

//指定されたクラス名を持つ要素を全て取得します（HTMLCollection)として返されます）。
const items = document.getElementsByClassName('item');
console.log(items[0]) // <input />

//指定されたタグ名を持つ要素を全て取得します（HTMLCollectionとして返されます）。
const paragraphs = document.getElementsByTagName('p');

//指定されたCSSセレクタに一致する最初の要素を取得します。
const firstItem = document.querySelector('.item');

//指定されたCSSセレクタに一致する全ての要素を取得します（NodeListとして返されます）。
const allItems = document.querySelectorAll('.item');

要素の変更

取得した要素に対して、以下のような操作を行うことができます。

テキストの変更

const heading = document.getElementById('heading');

//取得した要素のテキストを書き換え
heading.textContent = '新しいタイトル';
//or
heading.innerHTML = '新しいタイトル';
//or
heading.innerText = '新しいタイトル';

属性の変更

const link = document.querySelector('a');

//取得したaタグ要素のhref(リンク)を書き換え
link.href = 'https://www.example.com';

スタイルの変更

const paragraph = document.querySelector('p');

//取得したpタグ要素のスタイルを変更
paragraph.style.color = 'blue';
paragraph.style.fontSize = '20px';

クラスの追加・削除

const box = document.querySelector('.box');

//取得した要素の特定のclassを追加・削除
box.classList.add('active');
box.classList.remove('inactive');

イベントリスナーの追加

const button = document.querySelector('button');

//取得したbuttonタグ要素にクリックイベントを設定
button.addEventListener('click', () => {
  alert('ボタンがクリックされました');
});

要素の作成と追加

新しい要素を作成し、既存のDOMに追加する方法です。

//divタグ要素を生成
const newDiv = document.createElement('div');
//生成したdivタグ要素にテキストを設定
newDiv.textContent = '新しい要素';
//生成したdivタグ要素をHTML(DOM)に追加　→画面に映る
document.body.appendChild(newDiv);

要素の削除

既存の要素を削除する方法です。

const element = document.querySelector('.element');
const nested = document.getElementById("nested");

//elementの子要素であるnestedをDOMから削除
element.removeChild(nested);

//element自身をDOMから削除
element.remove();

まとめ

いかがでしたか？
メソッドやプロパティが多く出てきて混乱した人もいるでしょう。

しかし、これらはすべて丸暗記する必要はありません。忘れた際は検索して使えれば問題ないです。
処理の流れ、挙動、仕組みを「理解」することに集中してください。
あとはアプリを作りながら、JavaScriptのコードを書く練習をするうちに徐々に覚えていきます。
コードの意味や挙動が分かっていればコピペでもOKです。

この記事で紹介した内容はJavaScriptで操作の基礎となる重要なものです。
DOMの基本的な構造や操作方法を理解することで、より動きのあるサイトや動的なアプリを作成できます。
思い通りにHTMLを操作できるJavaScriptコードを書けるように頑張ってください。