子要素の取得

質問

<h2 class="highlight">
<span>あああああああ</span>
</h2>

今、上記のようなhtmlに対してjaascriptで指定をしているのですが、クラスhighlightの子要素であるspanへの適用について悩んでいます。
getElementByClassの代わりのようなものはできているのですが、ある程度柔軟なスクリプトにしたいと思っていて、childNodesは改行も含めてしまうようなのでちょっと都合が悪い部分が出ています。
確実に子要素を選択するようにするにはどうしたらよいでしょうか？

一応
<h2><a href="#">あああああ</a></h2>
という感じに改行なし、子要素はspan以外の要素がくることも想定しています。

回答No.2

yambejp · ベストアンサー

こんなんで

<script>
window.onload=function(){
var tags=document.getElementsByTagName("*");
for(var i=0;i<tags.length;i++){
if(tags[i].className=="highlight"){
var n=tags[i].firstChild;
while(n){
if(n.tagName) break;
n=n.nextSibling;
}
alert(n.innerHTML);
}
}
}
</script>

<h2 class="highlight">
<span>あああああああ</span>
<span>いいいいいいい</span>
</h2>

お礼

最初に出てくる要素のみに適用できるあたり、すごく助かりました。
探すときにはwhileで回してif文で条件が合えばbreakで抜け出せばいいってことなんですね。初めて知りました・・・(自分が勉強不足なのですが)
いろいろ応用ができそうです。
ありがとうございました。

回答No.1

steel_gray

H2の子要素を検索して、
nodeName が SPAN かどうか判定する。
（nodeName が #text なら次を探す）
nodeType が 1:ELEMENT_NODE かどうか判定する。
（nodeType が 3:TEXT_NODE なら次を探す）
とかそういう事でしょうか。

http://www.doraneko.org/misc/dom10/19981001/level-one-core.html#ID-1950641247

例
var H2 = ～～～;//目的のH2の取得
for(var x=H2.firstChild;x;x=x.nextSibling){
if(x.nodeName == 'SPAN') {
// spanの処理
}
}

お礼

回答ありがとうございます。
最初は個別の要素というよりは、単に子要素という意味で質問したのですが、アンカーに対して個別のスタイルを適用するのに良いかも・・・と思い始めてきました。

javascriptに関してはなかなかまとまったところが見つけにくいので、リンク参考になります。
ありがとうございました。