JavaScript 基礎第11回『DOM操作について学ぼう』

2024年5月14日2024年5月20日

JavaScript 基礎第10回ではオブジェクトを学んで頂きました。
今回はオブジェクトを通して、HTMLやCSSの操作をしていきます！

DOM(ドム)とは

JavaScript でHTML文書にオブジェクトを通じて、アクセスするための仕組み(※API)のことをDOM (Document Object Model)と言います。
また、HTML文書の構造を、ツリー構造で表したもののことです。

※API（エーピーアイ）は、”Application Programming Interface”（アプリケーション・プログラミング・インターフェース）の略。異なるソフトウェアやプログラム同士がコミュニケーションをとるためのルールや手順のことです。

HTML文書にアクセスしてみよう

HTML要素の取得

早速HTMLの特定の要素をオブジェクトとして取得する方法を試していきましょう！
HTMLの要素が持つid属性の値から、HTMLの要素を取得してみましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>MY HOMEPAGE</title>
        <meta name = "description" content="私のホームページです">
    </head>

    <body>
        <h1>ここは私のホームページです</h1>
        <div id="main">本文</div>
		<script src="homepage.js"></script>
    </body>
</html>

let element = document.getElementById('main');
console.log(element);

実際にHTMLの要素が取得できたのが確認できました。
取得ができたので、次は取得したものを書き換えてみましょう！

HTML要素の書き換え

先ほど使用したJavaScriptのファイルに1行追加して書き換えを行います。

let element = document.getElementById('main');
console.log(element);
element.innerHTML = 'ホームページの本文';

取得したHTMLの要素の内容を「innerHTML」で確認し、値を上書きすることでHTMLを直接書き換えずに変更を行うことができました。

HTML要素の追加

タグを指定して要素を作るには「createElement」メソッドを使用します。
要素を作成した後には属性を指定するための「setAttribute」メソッドで第1引数に属性名と第2引数にその値を渡します。
最後に要素を追加するために、「insertBefore」メソッドを使用し、第1引数に追加する要素、第2引数に追加場所(指定した要素の前に追加がされる)を渡します。第2引数にnullを渡すと最後の子要素として後ろに追加ができます。
では、実際に上記を使用して要素の追加をしていきましょう！引き続き同じファイルを使用します。

let element = document.getElementById('main');
console.log(element);
element.innerHTML = 'ホームページの本文';

// 新しい <div> 要素を作成する
let sub = document.createElement('div');

// 作成した <div> 要素に 'id' 属性を設定し、その値を 'sub' にする
sub.setAttribute('id', 'sub');

// <div> 要素の中に <p> 要素を追加し、その内容を 'ホームページの追加文' にする
sub.innerHTML = '<p>ホームページの追加文</p>';

// 既存の要素 (element) の中に、新しく作成した <div> 要素を追加する
// 第二引数が null のため、新しい <div> は既存の要素の最後に追加される
element.insertBefore(sub, null);

これで「ホームページの本文」の後にHTML要素を追加し、「ホームページの追加文」が表示できました。

HTML要素の削除

要素の削除ではまず、削除する要素の親要素を取得する必要があります。
親要素の取得は「parentElement」を使用します。
親要素を取得した後に、子要素の削除が可能な「removeChild」メソッドを使用し、
引数に削除したい要素のオブジェクトを渡して削除をする。
また、実際に要素の削除をしていきます。ファイルも引き続き同じものを使用します。

let element = document.getElementById('main');
console.log(element);
element.innerHTML = 'ホームページの本文';

let sub = document.createElement('div');
sub.setAttribute('id','sub');
sub.innerHTML = '<p>ホームページの追加文</p>';
element.insertBefore(sub, null);

let sub2 = document.createElement('div');
sub2.setAttribute('id','sub2');
sub2.innerHTML = '<p>ホームページの追加文2</p>';
element.insertBefore(sub2, null);

// 'sub' 要素の親要素を取得する
let parent = sub.parentElement;

// 親要素から 'sub' 要素を削除する
parent.removeChild(sub);

上記のコードでは、「ホームページの追加文」の親要素を取得し、その後親要素から、削除したい子要素を指定し削除ができました。
これで一通りのDOMの操作の流れを学ぶことができました！

よく使うDOM操作

要素の取得

document.getElementById('id'): 特定のIDを持つ要素を取得します。
document.getElementsByClassName('className'): 特定のクラスを持つ要素をすべて取得します（配列のように扱います）。
document.getElementsByTagName('tagName'): 特定のタグ名を持つ要素をすべて取得します。
document.querySelector('selector'): CSSセレクタを使って最初の一致する要素を取得します。

要素の作成と追加

document.createElement('tagName'): 新しい要素を作成します。
element.appendChild(newElement): 指定した親要素の最後に新しい要素を追加します。
element.insertBefore(newElement, referenceElement): 指定した親要素の特定の子要素の前に新しい要素を挿入します。