element.idプロパティ

投稿日: 2013年8月15日 作成者: alphasis

element.idは、「element」に指定した要素のid属性の値を取得、もしくは、設定するプロパティ。

構文

取得

var $id = $elementNodeReference.id;

戻り値

指定した要素のid属性の値。

設定

$elementNodeReference.id = id属性値;

サンプル

class属性がsampleClassNameである最初の要素のid属性の値：

id属性の値を変更後：

サンプルの動作について

  1. 「getIdValue()」ボタンをクリックすると、「class属性がsampleClassNameである最初の要素のid属性の値：」の右横に「sampleIdValue1」と表示する。
  2. 「setIdValue()」ボタンをクリックすると、「id属性の値を変更後：」の右横に「sampleIdValue2」と表示する。
  3. 再度、「getIdValue()」ボタンをクリックすると、「class属性がsampleClassNameである最初の要素のid属性の値：」の右横に「sampleIdValue2」と表示する。
  4. 「setIdValue()」ボタンをクリックする度に、class属性がsampleClassNameである最初の要素のid属性の値を、「sampleIdValue2、sampleIdValue3、sampleIdValue4、sampleIdValue5」のように数字部分をカウントアップする。
  5. 「getIdValue()」ボタンをクリックすると、class属性がsampleClassNameである最初の要素のid属性の現在の値を、「class属性がsampleClassNameである最初の要素のid属性の値：」の右横に表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
var $count = 1;
function getIdValue() {
 var $elementNodeReference = document.getElementsByClassName( "sampleClassName" );
 var $id = $elementNodeReference[0].id;
 document.getElementById( "sampleOutput1" ).innerHTML = $id;
}
function setIdValue() {
 var $elementNodeReference = document.getElementsByClassName( "sampleClassName" );
 $elementNodeReference[0].id = "sampleIdValue" + ++$count;
 var $id = $elementNodeReference[0].id;
 document.getElementById( "sampleOutput2" ).innerHTML = $id;
}
</script>

HTML

<div id="sampleIdValue1" class="sampleClassName"></div>
<button onclick="getIdValue();">getIdValue()</button>
<p>class属性がsampleClassNameである最初の要素のid属性の値：<span id="sampleOutput1"></span></p>
<button onclick="setIdValue();">setIdValue()</button>
<p>id属性の値を変更後：<span id="sampleOutput2"></span></p>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, プロパティ, リファレンス パーマリンク