javascript sélecteurs

Comment sélectionner des éléments du DOM en javascript?

Comme par exemple:

<div class="des">
    <h1>Test</h1>
        <div class="desleft">
          <p>Lorem Ipsum.</p>
        </div>
        <div class="Right">
           <button>Test</button>
        </div>
</div>

Maintenant, comment puis-je sélectionner h1? C'est juste une partie d'une plus grande Page, donc ne peut pas utiliser getElementsByTagName(), puisque les autres peuvent avoir sélectionné. Aussi car il pourrait y avoir d'autres h1's dans le document plus tard, je ne peux pas joindre l'index(du corps) ci-dessus.

Est-il un moyen simple de choisir, de dire <h1> balise qui est sous le nom de classe de desleft?
Je ne peux pas utiliser jQuery ou toutes les autres bibliothèques.

Il n'est tout simplement pas productif de ne pas utiliser une sorte de sélecteur de bibliothèque moderne de programmation javascript. Si vous ne pouvez pas utiliser jQuery, alors au moins utiliser le Grésillement qui est juste un sélecteur moteur (et c'est ce qui est utilisé à l'intérieur de jQuery et YUI). Elle est très petite et vous permettra d'économiser des centaines d'heures de développement, de prévenir beaucoup de bugs et de vous sauver de beaucoup de croix-les problèmes de navigateur. Il est tout simplement pas productif de réinventer la roue vous-même.
Oui, je suis absolument d'accord. J'ai eu le sentiment qu'il y avait des façons de le faire, et je ne sais pas d'eux.
Dans l'un de ces sélecteur de bibliothèques, vous utilisez simplement le sélecteur: ".des h1" pour accéder à la <h1> objet dans votre exemple. Dans Grésillement, il serait tout simplement: var list = Sizzle(".des h1");.
Vous n'avez probablement pas besoin d'une bibliothèque: caniuse.com/#search=querySelector

InformationsquelleAutor Aaditi Sharma | 2011-09-08

4
```
getElementsByTag()
```
Serait une fonction que vous pouvez commencer avec, et puis vous pouvez filtrer les DOMElements qui ont la classe.
```
var h1_array = document.getElementsByTag('h1');

var h1_class_array = [];
for (var i=0, len=h1_array.length; i < len; i++) {
    if (h1_array[i].className.indexOf('classname') !== -1) {
        h1_class_array.push(h1_array[i]);
    }
}
```
La .indexOf fonction renvoie -1 si l'aiguille ne se trouve pas dans la botte de foin.

Maintenant re-lecture de votre question, pourquoi ne pas simplement donner votre h1 id ?

DOM traversée est l'un des javascript est flagrante questions (entrée jQuery).

un simple getElementById() serait vous faire économiser des maux de tête et des id sur tous vos h1 serait beaucoup plus propre en fin de compte que d'essayer de formuler un algorithme pour les sélectionner par d'autres moyens.
- Grâce, qu'elle n'en résout 🙂 Cependant, par curiosité, disons que je l'utilise pour trouver autour de 5 éléments différents, et depuis un tableau est créé pour chaque <h1>, <p>, etc, etc, car il y a beaucoup de <p> ou d'autres balises, le tableau va être assez grand. Dans le monde réel scénario, il va consommer beaucoup de mémoire/de traitement?
- Évidemment, sans limitation, tous les scénarios finira par tomber à l'extérieur du domaine de l'acceptable, mais encore une fois, la vanille javascript DOM traversée est une de ces choses que vous venez de grin et le supporter.
- Bien <h1> est juste pour l'exemple, je vais l'utiliser pour d'autres éléments, je me demandais si il y avait un moyen facile et moyen sympa de faire DOM traversée à l'aide de javascript. Je suppose que, donnant l'identifiant devra être le plus intelligent de l'option, plutôt que l'augmentation de la taille et de traitement de grâce juste pour traversals
- oui, et c'est exactement la question qui a donné une telle popularité à la concurrence des bibliothèques JavaScript, comme leur principale fonction est DOM de la traversée et de la sélection.
InformationsquelleAutor jondavidjohn

Vous pouvez utiliser pour obtenir votre H1:

var des = document.getElementsByClassName('des')
var fc = des[0].getElementsByTagName('h1')
alert(fc[0].innerHTML)

InformationsquelleAutor Diodeus - James MacFarlane

w3.org a sélecteurs maintenant (http://www.w3.org/TR/selectors-api/#examples). Voici 2 façons différentes de ce qui a fonctionné pour moi sur Chrome. Vous souhaiterez peut-être utiliser querySelectorAll fonction qui retourne une liste.

<script type="text/javascript">
//looks for <h1> tag under <div> with className "des"
showOff1 = function() {
  var x = document.querySelector(".des h1");
  alert(x.innerHTML);      
}
//looks for <div> tag with className "desleft" and then use previousSibling to traceback <h1> tag
showOff2 = function() {
  var y = document.querySelector("div.desleft");
  var z = y.previousSibling.previousSibling;
  alert(z.innerHTML);      
}
</script>
<body onload="showOff2();">

InformationsquelleAutor StackRover

Utilisation querySelectorAll

Vous pouvez utiliser querySelectorAll:

//Will return a NodeList even if there is only one element found
var heading = document.querySelectorAll('.des > h1');

heading[1].style.color = 'red'; //NodeList is similar to an array

Cela renvoie un NodeList.

ou

Utilisation querySelector de retourner le premier élément trouvé:

var first_heading = document.querySelector('.des > h1');

first_heading.style.color = 'blue';

Couramment utilisé avec un sélecteur d'id #single-header-id.

Voici une démo

InformationsquelleAutor hitautodestruct

1

Si vous voulez sélectionner un h1 qui est avant la première élément de classe desleft, vous pouvez toujours le faire:
```
document.getElementsByClassName("desleft")[0].previousSibling.previousSibling
```
Exemple: http://jsfiddle.net/Xeon06/ZMJJk/

previousSibling doit être appelé deux fois en raison de la zone de texte vide nœud entre les deux. C'est pourquoi l'utilisation de bibliothèques de faire ce genre de choses est vraiment la meilleure façon d'aller.
- note getElementsByClassName est uniquement pris en charge > firefox 3
- Notez que cela ne fonctionne pas sur les anciennes versions d'IE. (besoin d'IE9 du moins je pense) Pas de jQuery est un vrai pisser quand vous êtes en train de faire des trucs comme ça, j'ai eu donc l'utiliser pour ne pas se soucier DOM bizarreries.
- Je n'ai jamais utilisé previousSibling avant, va passer par là, Merci 🙂
- Merci, je ne savais pas que. De retour à plus de codage de trouver des éléments :/
- si vous avez besoin de soutenir les anciens navigateurs et ne peut pas utiliser une bibliothèque tierce, je serais prêt à écrire BEAUCOUP plus de code.
- Crois qu'il est poussé comme html5 (FF3, Chrome et Opera 9+), déjà en charge.
- Deviner, suffira de donner l'id du tout.Cela semble être le moyen de sortir.Pas de sens d'écrire du code supplémentaire pour les transversales, que trop éteinte navigateurs :/
InformationsquelleAutor Alex Turpin
0
```
var h1 = document.querySelector('.desleft').previousElementSibling;
```
1. Rechercher un élément avec className='desleft' a l'aide du sélecteur '.desleft'
2. Juste revenir à l'élément précédent (pas de nœud précédent!)
- s'il vous plaît, fournir une explication à votre code
InformationsquelleAutor Volodymyr Fedorov

Vous devez vous connecter pour publier un commentaire.