Javascript

【Javascript】DOM Samples /Core　Node/nodeName

Javascript関連情報

更新日：2004年03月08日

DOM Samples /Core　Node/nodeName

高橋登史朗

DOM(Document Object Model)の仕様にそってサンプルを連載します。今回はNodeインターフェイスのnodeNameです。

JavaScript Samples
Dom編

DOM1 | DOM2 | DOM3

nodeName

説明 :

対象ノード名

インターフェイス :

/Core/Node

read/write :

readonly

Syntax :

oj.nodeName

値 :

値はそのノードのタイプによって異なる。下表のnodeName列を参照。

Interface	nodeName	nodeValue	attributes
`Attr`	アトリビュート名（ `Attr.name`と同じ）	`Attr.value`と同じ	`null`
`CDATASection`	`"#cdata-section"`	`CharacterData.data`と同じ, CDATA セクション	`null`
`Comment`	`"#comment"`	`CharacterData.data`と同じ, コメント	`null`
`Document`	`"#document"`	`null`	`null`
`DocumentFragment`	`"#document-fragment"`	`null`	`null`
`DocumentType`	document type 名 `DocumentType.name`	`null`	`null`
`Element`	タグ名 `Element.tagName`	`null`	`NamedNodeMap`
`Entity`	エンティティ名 entity name	`null`	`null`
`EntityReference`	参照されるエンティティ名　 entity referenced	`null`	`null`
`Notation`	表記法名 notation name	`null`	`null`
`ProcessingInstruction`	ターゲット `ProcessingInstruction.target`	`ProcessingInstruction.data`と同じ	`null`
`Text`	`"#text"`	`CharacterData.data`と同じ, テキストノード	`null`

サンプル : 1 (Elementの場合)

test1test2


<p id="pid"><i>test1</i><b>test2</b></p>

<form>

  <input type    = "button"
         value   = "クリックしてください"
         onclick = "
                  oj = document.getElementById('pid')
                  alert( oj.firstChild.nodeName )
  ">

</form>

クリックすると、<p id="pid">の最初の子ノード <i>test1</i> のノードネーム(タグ名「I」)が表示されます。
*この場合はfirstChildがタグだったのでタグ名が表示されましたが、もし、文字列の場合は次のようになります。

サンプル : 2 (Textの場合)

文字列1test1test2

<p id="pid2">文字列1<i>test1</i><b>test2</b></p>

<form>

  <input type    = "button"
         value   = "クリックしてください"
         onclick = "
                  oj = document.getElementById('pid2')
                  alert( oj.firstChild.nodeName )
  ">

クリックすると、<p id="pid">の最初の子ノード文字列1 のノードネーム(#text)が表示されます。

サンプル : 3

DIV

SPAN

DIV

<script>
<!--

  function big(oj){
    if( oj.nodeName == 'SPAN' )
      oj.style.fontSize = "20px"
  }

  function sml(oj){
    if( oj.nodeName == 'SPAN' )
      oj.style.fontSize = "1em"
  }

//-->
</script>

<div  onmouseover = "big(this)"
      onmouseout  = "sml(this)">DIV</div>
<div  onmouseover = "big(this)"
      onmouseout  = "sml(this)">DIV</div>
<span onmouseover = "big(this)"
      onmouseout  = "sml(this)">SPAN</span>
<div  onmouseover = "big(this)"
      onmouseout  = "sml(this)">DIV</div>

マウスカーソルが触れると spanタグの時だけフォントサイズが大きくなります

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！