Javascript

【Javascript】DOM Samples /Core　Node/nodeType

Javascript関連情報

更新日：2004年03月15日

DOM Samples /Core　Node/nodeType

高橋登史朗

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

JavaScript Samples
Dom編

DOM1 | DOM2 | DOM3

nodeType

説明 :

基本的なオブジェクト型を表すコード

インターフェイス :

/Core/Node

read/write :

readonly

Syntax :

oj.nodeType

値 :

数値短整数型 (200までの値が予約されています)
たとえば、divタグやaタグなどのエレメント(ELEMENT_NODE)は1を、文字列(TEXT_NODE)は3を、タグ内の属性(ATTRIBUTE_NODE)は2 を返します。

nodeTypeと番号の一覧
ELEMENT_NODE	1
ATTRIBUTE_NODE	2
TEXT_NODE	3
CDATA_SECTION_NODE	4
ENTITY_REFERENCE_NODE	5
ENTITY_NODE	6
PROCESSING_INSTRUCTION_NODE	7
COMMENT_NODE	8
DOCUMENT_NODE	9
DOCUMENT_TYPE_NODE	10
DOCUMENT_FRAGMENT_NODE	11
NOTATION_NODE	12

サンプル : 1

下記「test1」をクリックするとノードタイプをダイアログ表示します

test1

<div onclick="alert(this.nodeType)">test1</div>

この文字列 test1 はdivタグ内にあり、文字列(Text)ですが、 div内に書かれた onclick="alert(this.nodeType)" のthisはdivエレメントを指しています。したがって、このthis.nodeTypeで得られるノードタイプはElementノードのタイプである「1」となります(Textノードタイプである「3」にはなりません)。

サンプル : 2

下記「あいうえお」に触ると子ノードの数だけノードタイプをダイアログ表示します

あいうえお


<script>
<!--

  function getNodeType(oj)
  {
    // 子ノードの数だけ処理を繰り返す
    for (i=0;i<oj.childNodes.length;i++)
    {
      // ノードタイプをダイアログ表示する
      alert(oj.childNodes.item(i).nodeType)
    }
  }

//-->
</script> <p onmouseover="getNodeType(this)" ><b>あ</b>いう<i>え</i>お</p>

このpタグの中には「あ」と「いう」と「え」と「お」の4つのノードが含まれいています。これらは順に「Elementノード」[Textノード]「Elementノード」[Textノード]なので、マウスで「pタグ」に触ると関数getNodeTypeが起動し、それぞれのノードのタイプ番号を「1」「3」「1」「3」の順にダイアログ表示します。

回答募集中のトピック（お題）

男のカバン完全カタログ

ビジネススタイルは、スーツの着こなしのルールを遵守しつつ、小物で個性を打ち出すのがセオリー。だからこそ、比較的自由度の高いバッグが重要だ。そこで今回は、「ブリーフケース」と「トートバッグ」という今おすすめのタイプから15点ずつアイテムをピックアップ。品質や素材が秀でているだけでなく、機能面も優れる才色兼備な逸品を厳選した。バッグを新調するだけで、不思議なほど心躍る。

For M タブレット版アプリvol.16配信中！

フライパン一つの超簡単男メシ

楽しく痩せるスポーツアイテム

速報！メンズファッションニュース

人気Javascriptランキング

【Javascript】DOM Samples /Core Node/nodeType

DOM Samples /Core Node/nodeType

【Javascript】DOM Samples /Core　Node/nodeType

DOM Samples /Core　Node/nodeType