子の要素へアクセス

質問

お世話になります。

「offsetParent」や「parentElement」とは逆に、
子にある要素を取得したりアクセスする方法はあるのでしょうか？
（<td>から<a>へアクセスと言う感じです）
<td>
<a href="#">abc</a>
</td>

よろしくお願い致します。

回答No.5

Chaire

まだ見ておられるか分かりませんが色々と勘違いなさっているようなので付け足しておきます。

No.2 への返信より
> ＣＳＳでは、tdにポイントした際にa:hoverは反応しませんでした。

少なくとも IE, Fx, Safari, Opera の現行ブラウザでそんなことはありません。むしろ今回の件で互換性を重視するなら CSS が一番です。

No.3 への返信より
> setAttribute('class',*)ではIE5.5でバグがあるらしいです。
> setAttribute('className',*)では大丈夫の様です。

そもそも className が使えない場合というのは Element が HTMLElement でない場合（例えば XMLDocument の場合）です（それとて要素の名前空間が (X)HTML を示していれば HTMLElement になるはず）。

setAttribute('class')，setAttribute('calssName', '..') というのは逆に危険（Opera 6 では両方ともダメ）。HTML しか用いないのであれば node.className を使わないのはかえって互換性に響きます。

また，互換性重視ということならば id を割り振るよりも NodeList を逐次走査した方がかえって良い場合もあります（getElement 系メソッドに意外なバグを持つブラウザは多い…もちろん逐次走査は時間がかかりますので一般には id で解決する問題なら id を使うのが賢明です）。

お礼

ご回答有難う御座います。

皆様、様々な方法をお教え下さいましたが、
メソッドの説明よりも具体的なソースを頂きたかったです。

IEとネスケで動けば良いと思いますので、
idを割り振る方法にしました。

回答No.4

steel_gray

#2さんおおっしゃるとおり添え字の決めうちはできないので以下のようにすると最初のアンカーを指定できます。
<td
onmouseover="this.getElementsByTagName('a')[0].setAttribute('class','GetFocus')">

また、#3さんも触れていますが td への onmouseover 、onmouseout の使い方を見る限りやりたいことはCSSだけで出来そうですね。

td a{display:block;width:xxx;height:xxx;}
td a:hover{～}

お礼

ご回答有難う御座います。

setAttribute('class',*)ではIE5.5でバグがあるらしいです。
setAttribute('className',*)では大丈夫の様です。

現状では互換性が心配なので、
一番簡単にidを付けてアクセスする方法で済ませる事にしたいと思います。

回答No.3

BLUEPIXY

特に、下位要素全部が必要になると言うのでないなら、
エレメントにidを振って
document.getElementById()を使うといいかと思います。
あと、classNameが使えない場合があるかもしれませんから
setAttributeを使う必要があるかもしれません。

リンクにマウスオーバー時にスタイルを変更するということであれば、

td a { }
td a:hover { }

の様に
TD 配下の A のスタイルと
TD 配下の A:hover のスタイルを設定すれば事足りるような気もします

お礼

ご回答有難う御座います。

ＣＳＳでは、tdにポイントした際にa:hoverは反応しませんでした。

現状では互換性が心配なので、
一番簡単にidを付けてアクセスする方法で済ませる事にしたいと思います。

回答No.2

Chaire

No.1 で childNodes という回答を得ておられるのに何故 children という IE 専用のオブジェクトをお使いなのでしょうか（IE 専用でも良いならこちらの方が若干高速らしいですが）。

なおブラウザによっては改行がテキストノードと見なされることもあるので childNodes の添字の決め打ちは禁物です。nodeType を確認してから className を参照して下さい。

var I = this.childNodes.length;
var i = 0;

do if (this.childNodes[i].nodeType == 1 /* or ELEMENT_NODE */) { this.childNodes[i].className = 'GetFocus'; break; } while (++i < I);

また parentElement も IE 独自。IE4 を視野に入れる必要が無いのなら parentNode で十分です。

参考URL：

http://www2u.biglobe.ne.jp/%7Eoz-07ams/prog/dom-ref/Core/Node.html#Node-childNodes

お礼

ご回答有難う御座います。

現状では互換性が心配なので、
一番簡単にidを付けてアクセスする方法で済ませる事にしたいと思います。

回答No.1

BLUEPIXY

childNodes
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/collections/childnodes.asp
か
children
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/collections/children.asp
を使うということになるでしょうね

お礼

ご回答有難う御座います。

―――――――――――――――――――――――――――――
<td onMouseover="this.children(0).className='GetFocus'" onMouseout="this.children(0).className='LostFocus'">
<a href="#abc" class="LostFocus">
abcへ
</a>
</td>
―――――――――――――――――――――――――――――
の様に、<td>にカーソルを乗せると<a>のスタイルを変更する様に出来ましたが、
Netscape等では動作しなかったので、あきらめました。