Javascript で 要素の属性を取得する方法

Javascript で要素の属性を取得する方法について紹介します。

属性とは?

属性とは、


<div class="editors" id="ace1" codeLang="javascript" codeurl="/code/html/innerhtml.js"></div>

の場合、

  • class
  • id
  • codeLang
  • codeurl

が属性になります。

これらの属性を Javascript で取得する方法について、紹介します。

コードサンプル

// document.getElementsByClassName("クラス名")でDOM要素を取得する
// https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
var element = document.getElementsByClassName("editors");

// DOM要素.getAttribute("属性名")で、属性の値を取得する
// https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
var elId = element.getAttribute("id");
var codeLang = element.getAttribute("codeLang");
var codeurl = element.getAttribute("codeurl");

このように、element.getAttribute()メソッドを使用して取得します。

この例では、

  • 属性:id の値 "acee1" を elId にセット
  • 属性:codeLang の値 "javascript" を codeLang にセット
  • 属性:codeurl の値 "Javascript/GetElementAttribute.js" を codeurl にセット

しています。

MDN Web Docs リンク

Element.getAttribute() | MDN Web Docs

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です