【JavaScript】HTMLの操作~HTMLの属性を操作する~

JavaScript

JavaScriptでは、HTML要素の属性を動的に操作することで、ページの内容や振る舞いを変更することができます。属性の操作は、要素の見た目や動作を柔軟に制御するために非常に有用です。この記事では、HTML属性の基本的な操作方法や、特定の属性を操作するためのテクニックについて解説します。

属性値を取り出す

HTML要素の属性値を取り出すには、`getAttribute()`メソッドを使用します。このメソッドは、指定した属性の値を文字列として返します。

let image = document.getElementById("myImage");
let srcValue = image.getAttribute("src");
console.log(srcValue); // 画像のsrc属性の値を出力

属性値を書き換える

属性値を動的に書き換えるには、setAttribute()メソッドを使用します。このメソッドは、指定した属性に新しい値を設定します。

let image = document.getElementById("myImage");
image.setAttribute("src", "newImage.jpg"); // 画像のsrc属性を新しい画像に変更
image.setAttribute("alt", "新しい画像の説明文"); // alt属性も書き換え

各種プロパティ・メソッドを利用して属性を操作する

JavaScriptでは、特定のHTML属性に対して直接プロパティやメソッドを利用して操作することもできます。例えば、idsrchrefなどの属性は、プロパティとして直接アクセスできます。

let link = document.getElementById("myLink");
console.log(link.href); // リンクのhref属性の値を取得

link.href = "https://newurl.com"; // リンクのhref属性の値を変更

また、属性を削除したい場合は、removeAttribute()メソッドを使用します。

let button = document.getElementById("myButton");
button.removeAttribute("disabled"); // disabled属性を削除してボタンを有効化

class属性を操作する

class属性は、要素に適用されるCSSのスタイルを制御するために使用されます。JavaScriptでは、classListプロパティを利用してclass属性を操作することができます。

  • classList.add(): クラスを追加
  • classList.remove(): クラスを削除
  • classList.toggle(): クラスを切り替え
  • classList.contains(): クラスが存在するかを確認
let element = document.getElementById("myElement");

// クラスを追加
element.classList.add("active");

// クラスを削除
element.classList.remove("inactive");

// クラスを切り替え
element.classList.toggle("highlighted");

// クラスが存在するか確認
if (element.classList.contains("active")) {
    console.log("activeクラスが適用されています");
}

data-***属性を利用してHTMLにデータを残す

data-***属性は、カスタムデータをHTML要素に埋め込むための方法です。この属性を利用すると、JavaScriptを使ってデータを読み書きできます。data-*属性は、カスタム属性を定義する際に役立ちます。

例: data-属性の定義

<div id="product" data-id="12345" data-name="Laptop" data-price="1500"></div>

JavaScriptでのdata-属性の操作

JavaScriptでは、datasetプロパティを使ってdata-属性にアクセスできます。

let product = document.getElementById("product");

// data-id属性を取得
let productId = product.dataset.id;
console.log(productId); // "12345"

// data-name属性を書き換え
product.dataset.name = "Smartphone";

// 新しいdata-属性を追加
product.dataset.category = "electronics";

data-属性の利点

  • HTMLに追加のデータを持たせておくことで、JavaScriptがそのデータに基づいて処理を行うことが可能です。
  • CSSやサーバー側にデータを送信する必要がなく、クライアントサイドでの動作を簡単に制御できます。

まとめ

JavaScriptを使用してHTMLの属性を操作することで、Webページを動的に変更し、ユーザーの操作に応じた柔軟な動作を実現することができます。属性値の取得や書き換え、特定のプロパティやメソッドの活用、class属性やdata-*属性の操作など、さまざまなテクニックを駆使して、よりインタラクティブでダイナミックなWebアプリケーションを作成しましょう。

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

JavaScript
スポンサーリンク
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました