如何使用DOM来修改它?

var lis = document.getElementById( 'tabbed-boosts' ).getElementsByTagName( 'li' );
for ( var i = 0; i < lis.length; i++ )
{
    lis[i].style.backgroundColor = '#' + Math.round( Math.random() * 0xFFFFFF ).toString( 16 );
}

如果开始使用嵌套列表,则会显示使用document.getElementById('tabbed boosts').getElementsByTagName('li')的问题。使用childNodes属性可以访问该特定ul元素的直接子元素。例如

<ul id='tabbed-boosts'>
   <li>...</li>
   <li>
       <ul>
          <li> ... </li>
       </ul>
   </li>
   <li>... </li>
</ul>

使用getElementsByTag将返回选项卡式boosts子树中的所有“li”元素,其中childNodes将只返回第一级“li”元素。在上面的示例中,您将使用getElementById接收4个元素的集合,包括嵌套的LI,而使用myUl.childNodes只接收3个LI元素的集合(如下所示)

var myUl = document.getElementById('tabbed-boosts');

var myLi = myUl.childNodes;

for(var i = 0; i<myLi.length; i++)
{
   myLi[i].style....;

   // do whatever you want to the li items;
}