Obtenir des <li> SANS jquery
Ce qui peut avoir été demandé, mais en faisant défiler environ 40+ les résultats de la recherche révèle que seulement le jQuery solution. Disons que je veux obtenir le premier élément dans une liste non triée et d'appliquer une nouvelle couleur du texte pour elle, et elle seule. C'est simple avec jQuery.
Balisage ->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Avec jQuery ->
$("ul > li:first").css("color", "blue");
Question est, comment puis-je atteindre cet sans jQuery?
SOLUTION:
J'ai trouvé que cette méthode fonctionne sur tous les navigateurs (inc IE7+) ->
document
.getElementsByTagName("ul")[0]
.getElementsByTagName("li")[0]
.style.color = "blue";
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser
querySelector
(IE7 et inférieur ne sont pas supportés):Ou
querySelectorAll
:Ou
getElementsByTagName
:La meilleure façon de changer le style de l'OMI est de définir une classe. Vous faites cela en définissant (ou expansion) la
.className
propriété de l'élément obtenu.Sinon, vous pouvez définir les styles à l'aide de la
.style
propriété.mise à jour
Comme @Randy Hall souligné, peut-être que vous voulais d'abord
li
de tous lesul
éléments. Dans ce cas, je voudrais utiliserquerySelectorAll
comme ceci:Parcourir le résultat de définir le style.
À utiliser
getElementsByTagName
, vous pourriez faire ceci:Vous aurez besoin d'un
Array.prototype.map()
cale pour IE8 et inférieur.document.getElementsByTagName("ul").getElementsByTagName("li")[0]
- votre exemple n'obtient la premièreli
de premièreul
, cela devient premierli
de chaqueul
, juste pour plus de clarté. Le demandeur n'a pas préciser si elles étaient à la recherche de la premièreul
ou pas.Si vous avez besoin de changer de style uniquement, utiliser les CSS :premier enfant
fonctionne même dans IE7
http://caniuse.com/#feat=css-sel2
http://jsfiddle.net/Tymek/trxe3/
first-child
sélecteur dans IE<9. Voir quirksmode.org/css/contents.html#t17Depuis le seul enfant valide de
<ul>
est<li>
, vous pouvez le faire:Également envisager de grésillement, en fonction de vos besoins. Plus petit que celui de jQuery, mais gère tous vos sélecteur de normalisation.
À l'aide de la base de DOM opérations: