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

当ページには広告が含まれています。

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

こんな方におすすめ!
  • Javascriptを用いてHTML/CSSを操作するDOM操作について知りたい!
  • HTML/CSSの基本操作方法が知りたい!
目次

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

HTML/CSSの操作手順

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

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

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

あわせて読みたい
【JavaScript】HTML・CSS要素(ノード・タグ・属性・セレクタ)とは|DOMにおける基本操作入門 本記事は、JavaScriptを筆頭に、その他PythonやRuby等をプログラミングして、HTML/CSSを直接操作したいと考えている方向けの記事です。記事前半はHTML・CSS操作で理解すべき用語(オブジェクト・DOM・HTML要素等)を解説し、記事後半はJavaScriptを用いたHTML・CSSの操作手順を解説します。

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

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

あわせて読みたい
【Javascript】HTML・CSS要素(タグ・属性・クラス・セレクタ)の取得方法|DOMにおける基本操作入門 JavaScriptを用いてHTML/CSSを操作するDOM操作の解説記事です。DOM操作の基礎を知りたい方向けであり、具体的に「HTML/CSS要素を取得する方法」について徹底解説します。

【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);

【参考】JavaScript学習に役立つ記事一覧

当サイトではJavaScriptやフレームワークを活用したアプリ開発の学習記事を多数掲載してます。

Reactのおすすめ学習方法

あわせて読みたい
Reactの学習におすすめな入門本・動画教材7選|JavaScriptライブラリを活用したWeb開発 本記事ではReactを活用したWebアプリ開発に興味がある方向けに、React学習におすすめな教材をご紹介しています。

関連記事一覧

最後に

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

目次