JavaScript

A simple way to read values like id or data attributes from HTML tags using JavaScript.

getAttribute [method]

getAttributeメソッドは、HTML要素から指定した属性の値を取得するために使用される JavaScriptのメソッドです。要素の属性値を取得する際に活用できます。

getAttributeメソッドは以下のような構文で使用します。

var attributeValue = element.getAttribute(attributeName);

上記のコードでは、'element' は対象の HTML要素を指定する変数やセレクタであり、'attributeName' は取得したい属性の名前です。getAttributeメソッドは指定した属性の値を返します。

<div id="myDiv" data-id="1234">Sample Div</div>

var divElement = document.getElementById("myDiv");
var attributeValue = divElement.getAttribute("data-id");
console.log(attributeValue);
var outEl = document.createElement("p");
outEl.id = "resultText";
outEl.textContent = attributeValue;
document.currentScript.parentNode.appendChild(outEl);

上記のコードでは、getElementByIdメソッドを使用して 'myDiv' という IDを持つ <div>要素を取得し、getAttributeメソッドを使って data-id属性の値を取得しています。取得した属性値は console.logで表示されます。

この場合、コンソールには '1234' という値が表示されます。

このメソッドを使用することで、HTML要素の属性値を簡単に取得することができます。サンプルコードを実際に試してみて、getAttributeメソッドの使い方を覚えてください。