.net column
.NET開発者のためのブログメディア

工場のイメージ

JavaScriptとhtmlの関係 | JavaScriptによるDOM操作を徹底解説

2020年11月30日
SE
JavaScriptとhtmlはどのような関係なのでしょうか。
PM
JavaScriptによるDOM操作を解説しますので、一緒に見ていきましょう。

JavaScriptとhtmlの関係


DOM(Document Object Model)という言葉を聞いたことがある方もいらっしゃるかもしれません。

しかし、DOMとは何かと聞かれたときに明確に答えるのは、ある程度のスキルを持つエンジニアになっても難しいものです。

この記事では、JavaScriptでhtmlを扱うのに必須知識の、DOMについて解説します。

DOMとは?

DOM(Document Object Model)とは、JavaScriptでhtmlを参照・操作するときに使用される、Webブラウザがhtmlを解析したときに構築されるhtmlの構造です。

DOMの各要素をノードと呼び、ノード間の関係のモデルをWebブラウザが使い、htmlを表示します。DOMにはhtmlのDOMとcssのDOMがあり、それらは独立したものです。Webブラウザによってレンダリング時にリンクされます。

しかしJavaScriptからDOMを操作するときは、一般的に区別しません。この記事でも、DOMと呼べばhtmlのDOMもcssのDOMも指すことにします。

JavaScriptでの要素の指定方法

JavaScriptではhtml文書全体を一つの要素(ノード)として扱います。html文書全体のノードには
document
でアクセスできます。

ここではセレクタ名で要素を取得する方法を紹介します。セレクタの指定方法はcssと同一です。

例えばhtmlが

<html>
<body>
<ul class=”list”>
<li id=”list_item1″>1</li>
<li id=”list_item2″>2</li>
</ul>
</body>
</html>

だったとしてJavaScriptを

element = document.querySelector(‘.list’);

とすると、elementはulのノードを参照します。

次の2つは同じノードを参照します。

element = document.querySelector(‘#list_item1’);
element = document.querySelector(‘.list:first-child’);

いずれも、最初のliのノードです。

JavaScriptでセレクタ名に該当するノードをまとめて取得したいときは

querySelectorAll

を使用します。NodeListオブジェクトというものが返ってくるので、forEachメソッドで一つひとつのノードを参照します。

JavaScriptでの要素の操作

JavaScriptで要素を生成したいとき、

createElement

を使います。

new_element = document.createElement(‘li’);
new_element.innerHTML = ‘3’;

JavaScriptで、この生成した要素を、親要素の末尾に子要素として追加するには

appaneChild

を使います。

document.querySelector(‘.list’).appandChild(new_element);

先ほどのhtmlに対してこのJavaScriptのコードを実行するとhtmlはこうなります。

<html>
<body>
<ul class=”list”>
<li id=”list_item1″>1</li>
<li id=”list_item2″>2</li>
<li>3</li>
</ul>
</body>
</html>

JavaScriptで要素を動的に削除したいとき

remove()

を使います。

上記のhtmlに対して

document.querySelector(‘#list_item2’).remove();

というJavaScriptのコードを実行するとhtmlは

<html>
<body>
<ul class=”list”>
<li id=”list_item1″>1</li>
<li>3</li>
</ul>
</body>
</html>

となります。

jQueryでのDOMの要素の指定方法

jQueryというのはJavaScriptのライブラリの一つです。要素を指定し、それに対する操作を実行するという順番でコーディングします。ここでは、代表的な指定方法を挙げます。

なお、jQueryで要素を指定すると、指定した条件に該当する要素全てが返ってきます。

$(‘div’) → 同じ文書内にあるdiv要素全て
$(‘div#main-containt’) → <div id=”main-containt”>
$(‘.colorful’)→ class=”colorful”

$(‘div,ul’) → &ltdiv>と&ltul>
$(‘div ul’) → &ltdiv>内の&ltul>
$(‘div>ul’) → &ltdiv>を親に持つ&ltul>

他にも様々な指定方法があります。

jQueryでの要素の操作

jQueryで親要素の末尾に子要素を追加するには

append

を、最初に追加するには

prepend

を使います。特に、ライブラリを使っていないJavaScriptだと最初に追加するのはやや難しいので、prependを使います。

一番初めに挙げた

<html>
<body>
<ul class=”list”>
<li id=”list_item1″>1</li>
<li id=”list_item2″>2</li>
</ul>
</body>
</html>

というhtmlに対して

new_element = document.createElement(‘li’);
new_element.innerHTML = ‘0’;
$(‘list’).prepend(new_element’);

というjQueryのコードを実行すると

<html>
<body>
<ul class=”list”>
<li>0</li>
<li id=”list_item1″>1</li>
<li id=”list_item2″>2</li>
</ul>
</body>
</html>

というhtmlになります。

SE
JavaScriptのコードを実行することで、htmlはこのように変化するのですね。
PM
実際に自分でコードを実行させて、理解を深めていけると良いでしょう。

JavaScriptとhtmlの関係を理解しよう

この記事では、JavaScriptやjQueryによるDOMの操作を見て、実際のhtmlを変化させてみました。簡単にDOMが変わることに驚いた方もいるのではないでしょうか。

DOMの操作はフロントエンド開発の基本です。DOMを操作することによって、ページネーションやアニメーションが実行されます。

ここに挙げたjQueryはDOMを直接操作するライブラリでしたが、最近ではVue.jsなどといった、htmlのDOMとは別にJavaScript独自の仮想DOMを内部で持っておき、仮想DOMを操作の対象にして、ライブラリが仮想DOMが変化した場合htmlのDOMに反映させる、といったライブラリ(この場合フレームワークとも呼びます)も出てきています。

DOMを理解できなければフロントエンド開発は理解できません。この記事を取っ掛かりとして、DOMの理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags