element.tagNameプロパティ

element.tagNameは、「element」に指定した要素のタグ名を文字列として返すプロパティ。

構文

var $tagName = $elementNodeReference.tagName;

戻り値

指定した要素のタグ名。

例えば、p要素であれば「P」、button要素であれば「BUTTON」という文字列を返す。

サンプル

id属性がsampleである子要素たちのタグ名:

サンプルの動作について

「getNodeName()」ボタンをクリックすると、「id属性がsampleである子要素たちのタグ名:」の右横に「BUTTON, P,」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function getNodeName() {
 var $elementNodeReference = document.getElementById( "sample" );
 var $children = $elementNodeReference.children;
 var $tagName = "";
 for( i=0; i < $children.length; i++ ){
  $tagName += $children[i].tagName + ", ";
 }
 document.getElementById( "sampleOutput1" ).innerHTML = $tagName;
}
</script>

CSS

<style type="text/css">
#sample{
 height: 100px;
 width: 400px;
 padding: 10px;
 background-color: #fffee7;
 border: 1px solid #dddddd;
 border-radius: 5px;
}
</style>

HTML

<div id="sample">
 <button onclick="getNodeName();">getNodeName()</button>
 <p>id属性がsampleである子要素たちのタグ名:<span id="sampleOutput1"></span></p>
</div>

スポンサード リンク

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