firefoxでchildNodesの代用

解決済

質問者：bakenshibakenshi
質問日時：2006/10/23 00:00
回答数：4件

お世話になります。

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>

ご教授宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： himajin100000
回答日時：2006/10/23 01:25

<?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.dt …
<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>

- 0
- 件

通報する

この回答へのお礼

himajin100000様、ご教授有難う御座います。
前者と後者で挙動が違うんですね。
A.No３でもご解答いただいたとおり
＞確かＩＥでは、改行のみは、テキストノードにはならないけど、
＞Firefox ではなったと思うので多分そういうことかと思います。
だったんですね。詳しく書いていただいたので理解できました。
誠に有難う御座いました。

通報する

お礼日時：2006/10/23 12:27

No.4

回答者： BLUEPIXY
回答日時：2006/10/23 02:45

質問の説明のためにid を振っているのでないのであれば、

element.parentNode.parentNode.id
でid が取得できるので、
id のp2 から数字を分離し-1(+1)して目的のエレメントのid を作成してgetElementById で捕まえる方が簡単かもしれません。

- 0
- 件

通報する

No.3

回答者： BLUEPIXY
回答日時：2006/10/23 02:40

Firefox でもchildNodes は、使えたと思いますよ。

確かＩＥでは、改行のみは、テキストノードにはならないけど、
Firefox ではなったと思うので多分そういうことかと思います。
つまり、
function f(element){
alert(element.parentNode.parentNode.previousSibling.innerHTML);
}
と書いたとき
ＩＥでは、p1 の中味がとれてFirefox では、p1 の次の改行になっているということです。
なので、両方で同じ動作をさせるには、それを考慮したスクリプトにするか
<td>…</td><td>…</td><td>…</td>
のように改行を挟まないようにします。