【JavaScript】HTML・CSSを動的に操作する方法|DOMにおける基本操作入門

こんにちは、DXCEL WAVEの運営者(@dxcelwave)です!

Javascriptを用いてHTML/CSSを操作するDOM操作の解説記事です。DOM操作の基礎を知りたい方向けであり、具体的に「HTML/CSSの操作方法」について徹底解説します。

目次

【JavaScript】HTML/CSSの動的操作の実現手順

HTML/CSSの操作手順

DOM操作のもと、HTML/CSSを操作する手順を上図に示します。

本記事では「③HTML/CSS操作メソッドを付与」を中心にプログラミング手法を解説します。

ここでDOM操作の概念・基本について事前に詳しく知りたい方はこちらの記事もご覧ください。

【JavaScript】HTML要素を取得する方法

HTML要素の取得方法は、下記の記事で詳しく解説しています。適時参照ください。

【JavaScript】HTML/CSSを操作する方法

HTML/CSS操作における代表的なメソッドを紹介します。それぞれの用途を理解しましょう。

要素を作成・追加

新たなHTML要素を作成・追加するメソッドを下記に示します。

メソッド 概要
document.createElement(“タグ名”) タグを指定し要素を作成
.setAttribute(“属性名”,”属性値”) 指定した要素に属性情報を付与
.insertBefore(“新規要素”, “既存要素”) 既存要素前に新規要素のHTML追加
.appendChild(“新規要素”) 最下部に子要素を追加

要素を編集

HTML/CSS要素を編集するメソッドを下記に示します。

メソッド 概要
.innerHTML = “要素情報” 指定要素を右辺記述のHTML要素情報に書き換え
.style.CSSプロパティ名 = “プロパティ値” 指定要素を右辺記述のCSSスタイル情報に書き換え

要素を削除

既存の要素を削除する際に用いるメソッドを下記に示します。

メソッド 概要
let parent = 子要素.parentElement 親要素のオブジェクトを取得
parent.removeChild(“削除したい子要素”) 引数に削除したい要素を渡すことで削除

【JavaScript実践】HTML/CSSを操作

実際にコードを用いた具体例をもとに、各メソッドの使用方法を解説します。

要素を作成・追加

上記イメージのように、JavaScriptを用いてHTML文を追加するプログラムを記述してみましょう。以下HTMLとJavaScriptコードを示します。

HTML

<html>
<h1 id="title">Hello World</h1>
<ul>
    <li class="list">アイウエオ</li>
    <li class="list">かきくけこ</li>
</ul>
</html>

JS

//要素を取得
let elem = document.getElementById("title");

//新しいdiv要素作成
let newElem = document.createElement("div");

//上記にid="new"という属性情報追加
newElem.setAttribute("id","new");

//divタグ要素とその中にテキスト情報を追加
newElem.innerHTML = "<div>要素を追加</div>";

//elem要素の下に新規のnewElem要素を挿入
elem.insertBefore(newElem, null);

JS(別解)

//新しいdiv要素作成
let newElem = document.createElement("div");

//上記にid="new"という属性情報追加
newElem.setAttribute("id","new");

//divタグ要素とその中にテキスト情報を追加
newElem.innerHTML = "<div>要素を追加</div>";

//既存要素下に新規のnewElem要素を挿入
document.getElementById("title").appendChild(newElem);

要素を編集

上記イメージのように、JavaScriptを用いてCSSスタイルを編集するプログラムを記述してみましょう。

HTML

<html>
<h1 id="title">Hello World</h1>
<ul>
    <li class="list">アイウエオ</li>
    <li class="list">かきくけこ</li>
</ul>
</html>

JS

//要素を取得
let elem1 = document.getElementById("title");

//要素を編集(フォントカラー変更)
elem1.style.color = "#E25B19";

//要素を取得
let elems2 = document.getElementsByClassName("list");

//2つ目の要素を編集(背景色変更)
elems2[1].style.backgroundColor = "red";

要素を削除

上記イメージのように、JavaScriptを用いてHTML要素を削除するプログラムを記述してみましょう。

HTML

<html>
<h1 id="title">Hello World</h1>
<ul>
    <li class="list">アイウエオ</li>
    <li class="list">かきくけこ</li>
</ul>
</html>

JS

//要素を取得
let elem = document.getElementById("title");

//削除する要素の親要素取得
let parent = elem.parentElement;

//対象の子要素を削除
parent.removeChild(elem);

最後に

この記事が気に入ったら
フォローしてね!

目次