.innerHTMLの不一致？

質問

こんにちは。
Javascriptは全くの初心者です。
よろしくお願いします。

<div id="test">
<ul>
<li><a href="a.html"><span>AAA</span></a></li>
<li><a href="b.html"><span>BBB</span></a></li>
<li><a href="c.html"><span>CCC</span></a></li>
</ul>
</div>

<script type="text/javascript">
<!--
var data = "AAA";// AAAは自動取得させる予定
var nodes = document.getElementById('test').getElementsByTagName("a");
for (i = 0; i < nodes.length; i++) {
if(nodes[i].innerHTML == data){
nodes[i].setAttribute("class","ddd");
}
}
//-->
</script>

上記のようなjavascriptを設置し、
<li><a href="a.html"><span>AAA</span></a></li>
の<a>にclass="ddd"を適用させようと思います。
（<span>には適用させたくない。）

しかし、
var data = "AAA";
だと<a>の.innerHTMLは<span>AAA</span>なので
<span>AAA</span> ≠ AAA
で一致しません。
そこで、
var data = "<span>AAA</span>";
としたところ、FirefoxとNNでは成功しましたが、それ以外のブラウザでは駄目でした。

初心者でお恥ずかしい限りですが、
どうしたらよいのかご教授いただければ幸いです。
よろしくお願いします。

回答No.1

yambejp · ベストアンサー

こんな感じでチェックしてみてはいかがですか？

<style>
.ddd{
background-Color:red;
}
</style>

<div id="test">
<ul>
<li><a href="a.html"><span>AAA</span></a></li>
<li><a href="b.html" class="ddd"><span>BBB</span></a></li>
<li><a href="c.html"><span>CCC</span></a></li>
</ul>
</div>

<script type="text/javascript">
window.onload=function(){
var data = "AAA";// AAAは自動取得させる予定
var test = document.getElementById('test');
var nodes=test.getElementsByTagName("a");
for (i = 0; i < nodes.length; i++) {
var cnodes=nodes[i].childNodes;
for (j = 0; j < cnodes.length; j++) {
if(cnodes[j].nodeName=="SPAN"){
if(cnodes[j].innerHTML == data){
// nodes[i].setAttribute("className","ddd");
nodes[i].className="ddd";
break;
}
}
}
}
}
</script>

コメントアウト部分・・・
なんか試してみるとIEはclassをsetAttributeで指定するとき
setAttribute("className","ddd");
としないといけないみたいですね。
firefoxだとsetAttribute("className","ddd")はきかず
setAttribute("class","ddd");
のみしか反応しません。
なので nodes[i].className="ddd";
とするのが妥協案でしょうか？

またIEはgetElementById()に直で.getElementsByTagName()
をつなげられないようなので一度testオブジェクトをつくってから
nodesオブジェクトを作成したほうがよいようです。

お礼

お忙しい中、早速のご回答ありがとうございました。
Javascriptも説明も、『なるほど！！』という感想しかありません。
非常に参考になりました。

ご記入いただいたJavascriptを早速試したところ、見事上手くいきました。
当方WindowsXP環境下で、
IE6/IE7/FF2/NN7/Opera9/Safari3、すべてOKでした。
これで作業を進めることができます。
本当にありがとうございました。