nodeValue プロパティ 1

■nodeValue プロパティ
　・ノードの値を取得・設定する
　・戻り値はそのノードのタイプによって異なる。
　　　　　テキストノード ･･･テキスト文
　　　　　属性ノード ･･･属性の値
　　　　　コメントノード ･･･コメント文
　　　　　処理命令ノード ･･･ターゲットを除いた内容の全て
　　　　　他は全て　null　を返す
　　　　　　　* 要素ノードの値も＜null＞。要素の内容を取得するには子ノードのnodeValue値を取得すること。

■下のサンプルは単純なタグ構成（DOMツリー）になっています。
<p id="sample" style="width:150px;border:1px solid green">私は<span style="color:red">太郎</span>です</p>

　　(注意：上記のHTMLソースは途中で改行しないで、一直線に記述します。
　　　　　　　　　　改行すると別のノードが挿入され、さらにややこしい問題が生じます）

Pタグは3個の子ノードから構成されている。
　　1番目の子ノード ･･･textノード（「私は」）
　  2番目の子ノード ･･･<span>タグ
　　　　　*「太郎」は子ノード<span>タグの子ノード、Pタグから見れば孫ノードになる
    3番目の子ノード ･･･textノード（「です」）

Sample

私は太郎です

（nullが返ります。HTML要素自体はnodeValue値を持たない）

Pタグの内にあるテキスト文を参照するにはどの子供かを指定しなければ参照できない。 （これで「私は」が取り出せる）
（これで「です」が取り出せる）
孫ノード「太郎」を取り出す
　　　　(指定法はチョットややこしく、「2番目の子供の最初の子供」。↓のソース参照）

属性値を取得するSample

上のサンプルのid属性値を取り出す･･･→
（id名を使ってid名を取り出すなんて不条理ですが、一応例題として･･･カンベン！）

Sample Source......................................................................>>>

<script language="JavaScript"><!--
function Test(n){
　　var elem_p = document.getElementById("sample");
　　if(n == 1)alert(elem_p.nodeValue);
　　if(n == 2)alert(elem_p.firstChild.nodeValue);
　　if(n == 3)alert(elem_p.lastChild.nodeValue);
　　if(n == 4)alert(elem_p.childNodes[1].firstChild.nodeValue);
}

function AttrTest(){
　　var p_id = document.getElementById('sample').getAttributeNode('id').nodeValue;
　　alert("id名は：" + p_id);
}

//--></script>
</head>

<body>
<p id="sample" style="width:150px;border:1px solid green">私は<span style="color:red">太郎</span>です</p>

　<button onclick="Test(1)">PタグのnodeValue値は</button>
　<button onclick="Test(2)">Pタグの最初の子ノードのnodeValue値は</button>
　<button onclick="Test(3)">Pタグの最後の子ノードのnodeValue値は</button>
　孫ノード「太郎」を取り出す<button onclick="Test(4)">おおーイ、太郎ヨ！</button>　　

<p>上のサンプルのid属性値を取り出す･･･→<button onclick="AttrTest()">id名は</button>

(最終更新:12/12/31)
フレーム構成になっています･･･＜[ホーム]　>>　[HTML整理ノート]＞