【JavaScript】HTMLの要素を操作する基本方法(取得・変更・追加・削除)

JavaScript

はじめに

JavaScript は、HTMLと組み合わせることで、画面の表示内容や動きを動的に制御できます。今回は、HTMLの要素(タグ)を取得したり、内容を変更したり、追加・削除する方法を記載していきたいと思います。

 

HTML要素を取得する

JavaScriptでHTMLを操作するには、まず「どの要素を対象とするか」を特定する必要があります。このときに使うのが、DOM取得メソッドです。代表的なものに getElementByIdquerySelectorquerySelectorAll などがあります。

 

html

<div id="sampleId" class="sampleClass">サンプル</div>

 

JavaScript

// IDで取得(最もシンプル)
let elById = document.getElementById("sampleId");
console.log(elById)

// クラスで1つ取得(最初の1つだけ取得)
let elByClass = document.querySelector(".sampleClass");
console.log(elByClass)

// クラスで複数取得(すべての要素を取得)
let allEls = document.querySelectorAll(".sampleClass");
console.log(allEls)

 

要素の内容を変更する

取得した要素の中のテキストやフォームの値をJavaScriptから変更できます。これにより、ユーザーの操作に応じた表示の変化が可能になります。

html

<p id="text">変更前</p>
<input id="inputBox" type="text" value="初期値">

 

JavaScript

// テキストを変更
document.getElementById("text").textContent = "変更後のテキスト";

// 入力欄の値を変更
document.getElementById("inputBox").value = "新しい値";

 

要素を追加する

新しいHTML要素をJavaScriptで作成して、既存の要素に追加することができます。リスト項目やチャットメッセージの追加など、動的なコンテンツ生成に役立ちます。

 

html

<ul id="list">
  <li>リスト1</li>
</ul>

 

JavaScript

// li要素を作成し、テキストを設定
const newItem = document.createElement("li");
newItem.textContent = "リスト2";

// list要素の末尾に追加
document.getElementById("list").appendChild(newItem);

 

要素を削除する

JavaScriptでは、不要になったHTML要素を削除することもできます。削除には「自分自身で消える方法」と「親要素から削除する方法」があります。

 

html

<div id="container">
  <p id="removeMe">削除</p>
</div>

 

JavaScript

document.getElementById("removeMe").remove();

 

まとめ

JavaScriptの基本中の基本となるのが、HTML要素の取得・変更・追加・削除・属性/スタイル操作です。基本的にはイベントリスナー(addEventListenerと組み合わせることで、ユーザーの操作に応じた動的な反応を実現できるため、確認してみましょう。

 

最後に

JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript

以上、ログになります。
これからも継続していきましょう!!

JavaScriptフロントサイド関連
おすすめIT本
良いコード/悪いコードで学ぶ設計入門

「ITエンジニア本大賞2023」技術書部門で大賞を受賞した本です。
・コードの可読性
・普段意識したほうが良いこと
・リファクタリング考え方
等、普段のコードを設計する際に意識することが書かれています。
コードのあるべき姿に迷ったら一度読んでみると良い本です。

仕組みと使い方がわかる Docker&Kubernetesのきほんのきほん

Dockerって何?となったときに私が最初に読んだ本です。
Dockerがどんな仕組みで動いているのか、コマンドでは何を命令しているのかを理解できるように、イラストを多用して説明しています。

1冊ですべて身につくJavaScript入門講座

「ITエンジニア本大賞2024」技術書部門で大賞を受賞した本です。
私が次に読もうと思っている本なのでおすすめとして挙げておきたいと思います。

コメント

タイトルとURLをコピーしました