Comment utiliser le DOM pour modifier cela?

Comment modifier le style de l'élément li en utilisant DOM?Comment utiliser le DOM pour modifier cela?

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

getElementById ('onglets-dope'). ChildNodes me rendre à l'UL, comment puis-je modifier la LI?

doit également travailler dans IE6 ...

Source

2010-10-18 spyderman4g63

J'utiliser CSS: '# tabbed-boosts li {....}' –

Pour les choses DOM, à moins d'une bonne raison de ne pas le faire, j'utiliserais une bibliothèque pour aplanir les plis et rendre les choses plus pratiques. Quelques liens: [jQuery] (http://jquery.com), [Closure] (http://code.google.com/closure/library), [Prototype] (http://prototypejs.org), [YUI ] (http://developer.yahoo.com/yui/), [plus sur Wikipedia] (http://en.wikipedia.org/wiki/List_of_JavaScript_libraries). Avec jQuery, par exemple, ce serait '$ ('# tabbed-boosts> ul> li'). Css (/ * ... truc de style ici * /)'. D'autres bibliothèques seront également faciles. –

Modifier * de quelle façon *? @Sime: alors que ma technique préférée, ce n'est pas forcément (et certainement pas * directement *) en utilisant le DOM ... – Shog9

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

Source

2010-10-18 18:13:06 poke

Cela ira à plusieurs niveaux de profondeur, donc si c'est une liste imbriquée, cela aura un effet négatif en traitant 'li' s il devrait laisser seul. Étant donné la structure, juste 'document.getElementById ('tabbed-boosts'). FirstChild.childNodes' le fera à condition qu'il n'y ait pas de nœuds de texte à partir d'espaces. –

@ T.J. Crowder: Je crois que c'est toujours correct d'abstraire une solution comme vous en avez besoin. Je ne voudrais généralement pas éditer du lis, si je ne sais pas déjà à quoi ressemble la structure DOM, donc je peux sans risque supposer que la manière de sélectionner le lis est assez bonne. Et après tout, c'est juste un exemple. – poke

J'ai réellement menti et c'était un élément A dont j'avais besoin mais cela a fini par fonctionner: document.getElementById ('tabbed-boosts'). GetElementsByTagName ('a') [0] .className = "tab" – spyderman4g63

Le problème avec l'aide sera affiché si vous commencez à utiliser des listes imbriquées document.getElementById ('onglets-dope') .getElementsByTagName ('li') . L'utilisation de la propriété childNodes vous donne accès aux enfants directs de cet élément ul particulier. Par exemple

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

en utilisant getElementsByTag retournera tous les éléments « li » au sous-arbre-onglets booste, où childNodes ne retournera le premier niveau des éléments « li ». Dans l'exemple ci-dessus, vous recevriez une collection de 4 éléments en utilisant getElementById, y compris la LI imbriqué alors que vous ne recevrez une collection de 3 éléments li à l'aide myUl.childNodes (ci-dessous)

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

Source

2010-10-18 18:31:30

Comment utiliser le DOM pour modifier cela?

Répondre

Questions connexes