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>
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>
#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>
<button onclick="getNodeName();">getNodeName()</button>
<p>id属性がsampleである子要素たちのタグ名：<span id="sampleOutput1"></span></p>
</div>