如何查找节点内元素并增加CSS

<div class="321"><li class="box"><a class="123" href="#">前端之路</a></li>
<li class="box"><a class="box" href="#">这是class为box的li</a> <ul>
<li>前端之路</li>
<li>前端之路</li>
<li class="box">这是class为box的li</li>
 </ul>
 <ul>
<li>前端之路</li>
<li>前端之路</li>
<li class="box">这是class为box的li</li>
</ul>
</li>
</div>
 上面一段代码用JS如何获得<li class="box"><a class="box" href="#">这是class为box的li</a>这一段的标签<a> 并向标签<a>中增加Class？
期待高手解答，先在这里谢谢啦

解决方案 »

  1.   

    PS:下面这一段代码可以自动生成相似的新代码，只不过文本内容不同<li class="box"><a class="box" href="#">这是class为box的li</a> <ul>
    <li>前端之路</li>
    <li>前端之路</li>
    <li class="box">这是class为box的li</li>
     </ul>
     <ul>
    <li>前端之路</li>
    <li>前端之路</li>
    <li class="box">这是class为box的li</li>
    </ul>
    </li>
      

  2.   

    <script type="text/javascript">
    var lis = document.getElementsByTagName('li');
    for (var i = 0; i < lis.length; i ++) {
    if (lis[i].className == 'box') {
    var links = lis[i].getElementsByTagName('a');
    for (var j = 0; j < links.length; j ++) links[j].className += ' test';
    }
    }
    </script>
      

  3.   


    var lis = document.getElementsByTagName("li");
           for(var i = 0 ; i< lis.length ; i++){
              var links =  lis[i].getElementsByTagName("A");          
              for(var j = 0 ;j<links.length;j++ ){
               if(links[j].innerHTML=="这是class为box的li")links[j].className+=" myclass";
              }
           }
      

  4.   

    你们都已经测试过，但是没法把li class="box"><a class="box" href="#">这是class为box的li</a>
    变色啊，还是要谢谢你们解答
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
    <html xmlns="http://www.w3.org/1999/xhtml ">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <script type="text/javascript">
        var test = function(){
           var lis = document.getElementsByTagName("li");
           for(var i = 0 ; i< lis.length ; i++){
              var links =  lis[i].getElementsByTagName("A");          
              for(var j = 0 ;j<links.length;j++ ){
               if(links[j].innerHTML=="这是class为box的li")links[j].className+=" myclass";
              }
           }
        }
       
    </script>
    <style>
    .myclass{color:Red;}
    </style>
    </head><body>
    <div class="321">
    <li class="box"><a class="123" href="#">前端之路</a></li>
    <li class="box"><a class="box" href="#">这是class为box的li</a> <ul>
    <li>前端之路</li>
    <li>前端之路</li>
    <li class="box">这是class为box的li</li>
     </ul>
     <ul>
    <li>前端之路</li>
    <li>前端之路</li>
    <li class="box">这是class为box的li</li>
    </ul>
    </li>
    </div>
    <input type="button" value="请猛击" onclick="test();"/>
    </body>是这样吗 ？
      

  6.   

    我测试了一下，在本地，写了一个CSS样式，然后，就代码运行，就是没看到变色的效果，不好意思，说错话了！请见谅！
      

  7.   

    推荐使用jqury，可以非常方便的定义到某一个元素，从而改变样式。
      

  8.   

    <a>的样式覆盖了外面<li>的样式!