- ベストアンサー
firefoxでchildNodesの代用
お世話になります。 IEですと以下の記述で機能しますが、firefoxではchileNodesが使えません。 何か他に代用する方法はありませんでしょうか？ element.parentNode.previousSibling.childNodes[0].innerHTML; 実際にやりたいこととしては id=p2のclickが押下された場合にp1、p3要素のinnerHTMLを取得したい。 <table> <tr> <td id="p1"><span><a href="#" onClick="click(this);">hoge1</a>ほげほげ１</span></td> <td id="p2"><span><a href="#" onClick="click(this);">hoge2</a>ほげほげ２</span></td> <td id="p3"><span><a href="#" onClick="click(this);">hoge3</a>ほげほげ３</span></td> </tr> </table> ご教授宜しくお願い致します。
- bakenshibakenshi
- お礼率81% (115/141)
- JavaScript
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <script type="text/javascript"> function click(what){ alert(what.parentNode.parentNode.localName) alert(what.parentNode.parentNode.getAttribute("id")) alert(what.parentNode.parentNode.previousSibling.localName) alert(what.parentNode.parentNode.previousSibling.innerHTML) alert(what.parentNode.parentNode.nextSibling.localName) alert(what.parentNode.parentNode.nextSibling.innerHTML) alert(what.parentNode.parentNode.childNodes[0].innerHTML) alert(what.parentNode.parentNode.childNodes[1].textContent) } </script> <title>ちょっとしたテストケース。質問者様は考えるタイプの人みたいなので実験してみるとわかるでしょう</title> </head> <body> <p> childNodes自体は有効。前者(ほげほげ1～ほげほげ3)と後者(ほげほげ4～ほげほげ6)の挙動は違う。 </p> <table> <tr><td id="p1"><span><em onclick="click(this);">ほげほげ1</em></span>hoge1</td><td id="p2"><span><em onclick="click(this);">ほげほげ2</em></span>hoge2</td><td id="p3"><span><em onclick="click(this);">ほげほげ3</em></span>hoge3</td></tr> </table> <table> <tr> <td id="p4"><span><em onclick="click(this);">ほげほげ4</em></span>hoge4</td> <td id="p5"><span><em onclick="click(this);">ほげほげ5</em></span>hoge5</td> <td id="p6"><span><em onclick="click(this);">ほげほげ6</em></span>hoge6</td> </tr> </table> <p><a href="http://www.agavegroup.com/?p=32">参考リンク</a></p> </body> </html>
その他の回答 (3)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
質問の説明のためにid を振っているのでないのであれば、 element.parentNode.parentNode.id でid が取得できるので、 id のp2 から数字を分離し-1(+1)して目的のエレメントのid を作成してgetElementById で捕まえる方が簡単かもしれません。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
Firefox でもchildNodes は、使えたと思いますよ。 確かＩＥでは、改行のみは、テキストノードにはならないけど、 Firefox ではなったと思うので多分そういうことかと思います。 つまり、 function f(element){ alert(element.parentNode.parentNode.previousSibling.innerHTML); } と書いたとき ＩＥでは、p1 の中味がとれてFirefox では、p1 の次の改行になっているということです。 なので、両方で同じ動作をさせるには、それを考慮したスクリプトにするか <td>…</td><td>…</td><td>…</td> のように改行を挟まないようにします。
お礼
BLUEPIXY様、ご教授有難う御座います。 改行がfirefoxでテキストノードになるとは思いませんでした。 大変勉強になりました。 しかし、IE、forefoxで統一してくれないものなんでしょうか。
>element.parentNode.previousSibling.childNodes[0].innerHTML; ええと これコピペ？ だとしたら「elements」なのでは・・・？
お礼
himajin100000様、ご教授有難う御座います。 前者と後者で挙動が違うんですね。 A.No３でもご解答いただいたとおり ＞確かＩＥでは、改行のみは、テキストノードにはならないけど、 ＞Firefox ではなったと思うので多分そういうことかと思います。 だったんですね。詳しく書いていただいたので理解できました。 誠に有難う御座いました。