負けてたまるか。

脳トレ、プログラミング、PHP、WEB製作などのメモ

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- --:-- | スポンサー広告 | トラックバック(-) | コメント(-) | Edit

子ノード・親ノードを調べる


命令一覧

parentNode 親ノードを返します

chileNodes[0] 子ノードのリストを「ノードリスト」として返します

firstChild 最初の子ノードを返します

lastChild 最後の子ノードを返します

nextSibling 直後にあるノードを返します

previousSibling 直前にある子ノードを返します



親ノードを調べる parentNode

対象となるノードの親ノードを返します。



たとえば <DIV>タグの中に <P>タグがあるとします。

その <P>タグの親ノード(parentNode)は <DIV>タグということになります。





サンプル - 親ノード名をダイアログで表示する

親ノードの名前をダイアログで表示するサンプルです。

サンプルでは、ボタンのクリック時に<span>の親ノード<p>を調べて、そのノードの名前をダイアログに表示しています。

たべてもたべても ふとらない もの なあに?


<p>たべてもたべても <span id="par_oya_1">ふとらない もの なあに?</span></p>

<form>
<input type="button" onclick="

popo = document.getElementById('par_oya_1').parentNode.nodeName;
alert(popo);"

value="クリック!">
</form>



全ての子ノードを調べる chileNodes[0]

対象となる全ての子ノードを調べ、そのノードリストを返します。

取得したノードリストの1番目にアクセスしたいときはchildNodes[0]と書きます。
2番目ならchildNodes[1]、3番目ならchildNodes[2]…このように番号でアクセスします。



HTMLサンプル

次のようなHTMLサンプルを使って説明していきます。

  • あいうえお
  • かきくけこ
  • さしすせそ
  • たちつてと
  • なにぬねの
<ul id="fadsf3449rf4">
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの</li>
</ul>

リストの数を調べる

リストの数を調べたいときは次のように書きます。

  • あいうえお
  • かきくけこ
  • さしすせそ
  • たちつてと
  • なにぬねの

<form>
<input type="button" value="リストは全部で何個ありますか?"
onclick="

hu = document.getElementById('fadsf3449rf4').childNodes;
alert('リストは全部で'+hu.length+' 個あります');

">
</form>



手順1 - リストの<ul>にジャンプする

リストの<ul>にジャンプします。ジャンプするには、<ul>の中にあるIDにアクセスすることが必要になります。

<ul id="fadsf3449rf4">

IDにアクセスするには、getElementById() をつかいます。

getElementById('fadsf3449rf4')

これでリストの<ul>にジャンプできました。



手順2 - リストの中にある全ての<li>を取得する

次に、リストの中にある全ての<li>を取得します。

<ul id="fadsf3449rf4">
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの</li>

</ul>

<li>を取得するには、childNodes[0] をつかいます。手順1のスクリプトにchildNodesを加えてみます。

getElementById('fadsf3449rf4').childNodes

これでリストの中にある全ての<li>を取得しました。



手順3 取得した<li>の数を調べる

取得した<li>の数を調べてみます。調べるには length をつかいます。

getElementById('fadsf3449rf4').childNodes.length // 5

このように記述すると、<li>の個数を返してくれます。
このサンプルの場合は、<li>の個数は5個あるで、5が返されます。

先ほどの結果(5)をダイアログに表示して、リストの数を調べるサンプルの完成です。



最初の子ノードを調べる firstChild

対象となるノードの最初の子ノードを返します。



firstChildを使ったサンプル

次のようなリストがあるとします。このリストの一番最初の値「あいうえお」を取りだしてみましょう。

  • あいうえお
  • かきくけこ
  • さしすせそ
  • たちつてと
  • なにぬねの
<ul id="tgrvvttb">
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの</li>
</ul>



  • あいうえお
  • かきくけこ
  • さしすせそ
  • たちつてと
  • なにぬねの

<form>
<input type="button" value="リストの一番最初の値は?"
onclick="

hu = document.getElementById('tgrvvttb').firstChild.firstChild;
alert('リストの一番最初の値は '+hu.nodeValue+' です。');

">
</form>



 手順1 - リストの<ul>にジャンプする

リストの<ul>にジャンプします。ジャンプするには、<ul>の中にあるIDにアクセスすることが必要になります。

<ul id="tgrvvttb">

IDにアクセスするには、getElementById() をつかいます。

getElementById('tgrvvttb')

これでリストの<ul>にジャンプできました。



 手順2 - リストの中にある最初の<li>だけを取得する

次に、リストの中にある最初の<li>だけを取得します。

<ul id="fadsf3449rf4">
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの</li>
</ul>

最初の<li>だけを取得するには、firstChild をつかいます。手順1のスクリプトにfirstChildを加えてみます。

getElementById('tgrvvttb').firstChild

これでリストの中にある最初の<li>だけを取得しました。



 手順3 <li>の中にあるテキストを取得する

<li>の中にあるテキストを取得します。

<ul id="fadsf3449rf4">
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの</li>
</ul>

取得するには、 nodeValue をつかいます。

getElementById('tgrvvttb').firstChild.nodeValue //あいうえお

このように記述すると、<li>の中にあるテキストを取得してくれます。
このサンプルの場合は、最初の<li>のテキストは「あいうえお」なので、「あいうえお」を取得します。

これで、リストの一番最初の値「あいうえお」を取りだすことができました。
ダイアログにこの結果を表示して完成となります。



最後の子ノードを調べる lastChild

対象となるノードの最後の子ノードを返します。



lastChildを使ったサンプル

次のようなリストがあるとします。このリストの一番最後の値「なにぬねの」を取りだしてみましょう。

  • あいうえお
  • かきくけこ
  • さしすせそ
  • たちつてと
  • なにぬねの
<ul id="gtb4gbv">
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの</li>
</ul>



  • あいうえお
  • かきくけこ
  • さしすせそ
  • たちつてと
  • なにぬねの

<form>
<input type="button" value="リストの一番最初の値は?"
onclick="

hu = document.getElementById('gtb4gbv').lastChild.lastChild;
alert('リストの一番最初の値は '+hu.nodeValue+' です。');

">
</form>



 手順1 - リストの<ul>にジャンプする

リストの<ul>にジャンプします。ジャンプするには、<ul>の中にあるIDにアクセスすることが必要になります。

<ul id="gtb4gbv">

<ul id="gtb4gbv">
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの</li>
</ul>

IDにアクセスするには、getElementById() をつかいます。

getElementById('gtb4gbv')

これでリストの<ul>にジャンプできました。



 手順2 - リストの最後の<li>にジャンプする

リストの最後の<li>にジャンプします。

<ul id="gtb4gbv">
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの</li>
</ul>

ジャンプするには lastChild をつかいます。

getElementById('gtb4gbv').lastChild

これでリストの最後の<li>にhジャンプできました。



 手順3 - テキスト(なにぬねの)にジャンプする

「なにぬねの」と書かれたテキストにジャンプします。

<li>なにぬねの</li>

ジャンプするには lastChild をつかいます。

<li>の子ノードは「なにぬねの」の1つだけなので、lastChildの代わりにfirstChildをつかっても問題なく動作します。

getElementById('gtb4gbv').lastChild.lastChild

これで「なにぬねの」と書かれたテキストにジャンプできました。



 手順4 - 「なにぬねの」を取得する

「なにぬねの」と書かれたテキストを取得します。

<li>なにぬねの</li>
  ↑↑取得

lastChildだけでは、「なにぬねの」というテキストの場所にジャンプしただけなので、テキストを取得したことにはなりません。

テキストを取得するには、nodeValueをつかいます。

getElementById('gtb4gbv').lastChild.lastChild.nodeValue

これで「なにぬねの」と書かれたテキストを取得しました。
あとはダイアログに表示して、「なにぬねの」を取りだすサンプルの完成となります。

alert(getElementById('gtb4gbv').lastChild.lastChild.nodeValue)



直後にある兄弟ノードを調べる nextSibling


対象となるノードの直後にある兄弟ノードを返します。子ノードではありません。

例えば次のようなHTMLがあるとして、<div id="ai">から見た兄弟ノード<div id="kaki">となります。間違えやすいので気をつけていきましょう。

<div id="ai"><p>あいうえお</p></div>
<div id="kaki">かきくけこ</div> ←兄弟ノード

<div id="ai">からの視点では、<p>あいうえお</p>は子ノード、<div id="kaki">は兄弟ノード



nextSiblingを使ったサンプル

「あいうえお」の文字をクリックすると、その兄弟ノード「かきくけこ」のID名”kaki”を表示します。

あいうえお

かきくけこ
<div id="ai" onclick="
fd = this.nextSibling.id;
alert(fd);
"><p>あいうえお</p></div><div id="kaki">かきくけこ</div>



手順1 - 「あいうえお」の<div>タグにジャンプする

「あいうえお」の<div>タグにジャンプします。ジャンプするには、<div>の中にあるIDにアクセスすることが必要になります。

<ul id="ai">

<div id="ai"><p>あいうえお</p></div>
<div id="kaki">かきくけこ</div>

IDにアクセスするには、getElementById() をつかいます。

getElementById('ai')

同じ<div>の中から指定したい場合は、getElementById()の代わりにthisをつかっても指定できます。

変更前: getElementById('ai')
変更後: this

これで「あいうえお」の<div>にジャンプできました。



手順2 - 「あいうえお」から「かきくけこ」にジャンプする

「あいうえお」の兄弟ノードにジャンプします。兄弟ノードは「かきくけこ」になります。

あいうえお

かきくけこ

ジャンプするには、nextSiblingをつかいます。

this.nextSibling

これで「あいうえお」から「かきくけこ」にジャンプできました。

あとはIDを取得して(this.nextSibling.id)、ダイアログに表示すれば完成となります。



直前にある兄弟ノードを調べる previousSibling


対象となるノードの直前にある兄弟ノードを返します。子ノードではありません。

例えば次のようなHTMLがあるとして、<div id="ai">から見た直前の兄弟ノード<div id="kaki">となります。間違えやすいので気をつけていきましょう。

<div id="saba">はにほへと</div> ←直前の兄弟ノード
<div id="ai"><p>あいうえお</p></div> ←ここからの視点
<div id="kaki">かきくけこ</div>

視点: <div id="ai">
子ノード: <p>あいうえお</p>
直後の兄弟ノード: <div id="kaki">
直前の兄弟ノード: <div id="saba">

 <div id="ai">から見たノードの相対関係

視点: <div id="ai">
子ノード: <p>あいうえお</p>
直後の兄弟ノード: <div id="kaki">
直前の兄弟ノード: <div id="saba">



previousSiblingを使ったサンプル

「あいうえお」の文字をクリックすると、その直前の兄弟ノード「はにほへと」のID名”saba2”を表示します。

はにほへと

あいうえお ←クリック

かきくけこ
<div id="saba21">はにほへと</div>
<div id="ffd1" onclick="
fgv = this.previousSibling.id;
alert(fgv);"><p>あいうえお</p></div>
<div id="fffre2">かきくけこ</div>



手順1 - 「あいうえお」の<div>タグにジャンプする

「あいうえお」の<div>タグにジャンプします。ジャンプするには、<div>の中にあるID「ffd1」にアクセスすることが必要になります。

<ul id="ai">

<div id="saba21">はにほへと</div>
<div id="ffd1"><p>あいうえお</p></div>
<div id="fffre2">かきくけこ</div>

IDにアクセスするには、getElementById() をつかいます。

getElementById('ffd1')

同じ<div>の中から指定したい場合は、getElementById()の代わりにthisをつかっても指定できます。

変更前: getElementById('ffd1')
変更後: this

これで「あいうえお」の<div>にジャンプできました。



手順2 - 「あいうえお」から「はにほへと」にジャンプする

「あいうえお」の直前の兄弟ノードにジャンプします。直前の兄弟ノードは「はにほへと」になります。

はにほへと

あいうえお


ジャンプするには、previousSiblingをつかいます。

this.previousSibling

これで「あいうえお」から「はにほへと」にジャンプできました。

あとはIDを取得して(this.previousSibling.id)、ダイアログに表示すれば完成となります。


関連記事

直前にある兄弟ノードを調べる previousSibling

誤:<div id="ai">から見た直前の兄弟ノードは<div id="kaki">となります。

正:<div id="ai">から見た直前の兄弟ノードは<div id="saba">となります。

2010.09.02 09:31 URL | #mQop/nM. [ 編集 ]












管理者にだけ表示

トラックバックURL↓
http://taro4.blog37.fc2.com/tb.php/25-72ff80fb

| ホーム |

カレンダー

07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

最近の記事

月別アーカイブ

タグリスト

ブログ内検索

カテゴリー

RSSフィード

リンク

ブロとも申請フォーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。