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

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱