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


\ シ ェ ア お ね が い し ま す ! ! /

目次