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