Как я могу использовать DOM, чтобы изменить это?

Question

Как мне изменить стиль элемента li с помощью DOM?

   <div id="tabbed-boosts">
     <ul>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
     </ul>
    </div>

getElementById ('tabbed-boosts'). ChildNodes приведет меня в UL, как мне изменить LI?

Также должен работать в IE6 ...

Answer 1

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 );
}

Answer 2

Проблема с использованием document.getElementById ('tabbed-boosts') .getElementsByTagName ('li') появится, если вы начнете использовать вложенные списки. Использование свойства childNodes предоставит вам доступ к прямым потомкам этого конкретного элемента ul. Например

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

Использование getElementsByTag вернет ВСЕ элементы 'li' во вложенном дереве tabbed-boosts, где childNodes вернет только элементы первого уровня 'li'. В приведенном выше примере вы получите коллекцию из 4 элементов, используя getElementById, включая вложенный LI, тогда как вы получите только коллекцию из 3 элементов li, используя myUl.childNodes (как показано ниже)

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;
}