firstChild／lastChildプロパティ

■ element.firstChild
　・elementノードの子ノード内で、最初の子ノードを参照
　・対象ノードが見つからない場合nullが返る

■ element.lastChild
　・elementノードの子ノードの内、最後の子ノードを参照
　・対象ノードが見つからない場合nullが返る　　

Sample
長男は太郎、次男の次郎です、三男のワン三郎

三兄弟の
　　　　･･････→　

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

<script language="JavaScript"><!--
　function Brothers1(){
　　　var brothers = document.getElementById("brothers");
　　　var son1 = brothers.firstChild.firstChild.nodeValue;
　　　document.getElementById("view").innerHTML = "<p>" + son1 + "</p>";
　}
　function Brothers2(){
　　　var brothers = document.getElementById("brothers");
　　　var son3 = brothers.lastChild.innerHTML;
　　　document.getElementById("view").innerHTML = "<p>" + son3 + "</p>";
　}
//--></script>
</head>

<body>
<div id="brothers" style="width:360px;border:1px solid red;padding:5px"><span>長男は太郎</span><span>、次男の次郎です、</span><span>三男のワン<img src="../../images/anime/16.gif" width="32" height="38" border="0">三郎</span></div>
　　//(注意)上の記述は、途中に改行を入れない。整形のため改行を挿入すると、IEとIE以外のプラウザで解釈の違いから
　　//異なった動作となる

<p>三兄弟の<button onclick="Brothers1()">長男は？</button><br>
　　<button onclick="Brothers2()">末弟は？</button>　　･･････→　</p>

<div id="view" style="position:absolute;top:315px;left:200px;width:150px;border:1px solid green"></div>　　

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