{category}

JavaScript - 属性とプロパティ

getAttribute()

ゲットアトリビュート(DOM操作

意味 要素の属性の値を取得


getAttribute()とは?

getAttribute()メソッドは、指定した属性の値を取得します。

getAttribute()の具体的な使い方

要素の属性値を取得する例

const link = document.getElementById('myLink');
const href = link.getAttribute('href');
const target = link.getAttribute('target');
const nonExistent = link.getAttribute('nonexistent');

console.log('href:', href);
console.log('target:', target);
console.log('nonexistent:', nonExistent);

👇出力結果

href: https://example.com
target: _blank
nonexistent: null

リンク要素から'href'属性と'target'属性の値を取得します。存在しない属性を取得しようとすると、nullが返されます。

getAttribute()に関するよくある質問

Q. 存在しない属性を取得すると?
A. getAttribute()で存在しない属性を取得しようとすると、nullが返されます。
Q. 大文字小文字は区別される?
A. getAttribute()は属性名の大文字小文字を区別しません。例えば、'href'と'HREF'は同じように扱われます。
Q. データ属性の取得にも使える?
A. はい、getAttribute()を使ってdata-*属性の値を取得することもできます。例:element.getAttribute('data-custom')

getAttribute()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか?
プログラミング単語帳には、JavaScriptのgetAttribute()やNodeList、innerHTML、outerHTML、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。

1日5分の暗記でプログラミンが身に付く!プログラミング単語帳 公式ストアで発売中!

HTML編、CSS編、JavaScript編、PHP編、Ruby編、その他単語編の6シリーズ分が公式ストアにて販売中です。気になった方はぜひ購入してみてください。


JavaScriptを学べる「プログラミング単語帳」アプリ

プログラミング単語帳がアプリになりました!JavaScriptはもちろん、10種類のプログラミング言語の中から、よく使われる単語をスマホで学習できます。

収録単語は2,000単語以上!
現在は、HTML、CSS、JavaScirpt、PHP、Laravel、Ruby、Python、MySQL、Linux、など10カテゴリーの単語帳が1つのアプリに収録されています。

いつでも、どこでも、隙間時間を有効活用して、プログラミングを効率的に学べるので、ぜひダウンロードしてみてください。

2024年7月アップデート情報:「Laravel」カテゴリーが追加されましました!

2024年8月アップデート情報:「MySQL」「Linux」カテゴリーが追加されましました!


関連するそのほかの単語

NodeList

ノードのコレクション

種類: 基本的なDOMの要素とプロパティ

innerHTML

HTML内容の変更

種類: 基本的なDOMの要素とプロパティ

outerHTML

HTML全体の取得

種類: 基本的なDOMの要素とプロパティ

throw

エラーを発生させる

種類: 基本的なエラーハンドリング

クロージャ

覚えている関数

種類: スコープとクロージャ