web-dev-qa-db-fra.com

GetElementByID - ID multiples

doStuff(document.getElementById("myCircle1" "myCircle2" "myCircle3" "myCircle4"));

Cela ne fonctionne pas, ai-je besoin d'une virgule ou d'un point-virgule pour que cela fonctionne?

javascriptarraysgetelementdocument
24
Maurice Tempelsman

document.getElementById() ne prend en charge qu'un nom à la fois et ne renvoie qu'un seul nœud et non un tableau de nœuds. Vous avez plusieurs options différentes:

  1. Vous pouvez implémenter votre propre fonction qui prend plusieurs identifiants et renvoie plusieurs éléments.
  2. Vous pouvez utiliser document.querySelectorAll() qui vous permet de spécifier plusieurs identifiants dans une chaîne de sélecteur CSS.
  3. Vous pouvez attribuer un nom de classe commun à tous ces nœuds et utiliser document.getElementsByClassName() avec un nom de classe unique.

Exemples de chaque option:

doStuff(document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4"));

ou:

// put a common class on each object
doStuff(document.getElementsByClassName("circles"));

ou:

function getElementsById(ids) {
    var idList = ids.split(" ");
    var results = [], item;
    for (var i = 0; i < idList.length; i++) {
        item = document.getElementById(idList[i]);
        if (item) {
            results.Push(item);
        }
    }
    return(results);
}

doStuff(getElementsById("myCircle1 myCircle2 myCircle3 myCircle4"));
49
jfriend00

Cela ne fonctionnera pas, getElementById interrogera un seul élément à la fois.

Vous pouvez utiliser document.querySelectorAll("#myCircle1, #myCircle2") pour interroger plus d'un élément.

ES6 ou plus récent

Avec la nouvelle version de JavaScript, vous pouvez également convertir les résultats en un tableau pour le traverser facilement.

Exemple:

const elementsList = document.querySelectorAll("#myCircle1, #myCircle2");
const elementsArray = [...elementsList];

// Now you can use cool array prototypes
elementsArray.forEach(element => {
    console.log(element);
});

Comment interroger une liste d'ID dans ES6

Un autre moyen simple si vous avez un tableau d’ID est d’utiliser le langage pour construire votre requête, exemple:

const ids = ['myCircle1', 'myCircle2', 'myCircle3'];
const elements = document.querySelectorAll(ids.map(id => `#${id}`).join(', '));
13
Gabriel Gartz

Non, ça ne marchera pas.

document.getElementById() method n'accepte qu'un seul argument.

Cependant, vous pouvez toujours définir des classes pour les éléments et utiliser getElementsByClassName() à la place. Une autre option pour les navigateurs modernes consiste à utiliser querySelectorAll() method:

document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4");
8
VisioN

Je suggère d'utiliser des méthodes de tableau ES5:

["myCircle1","myCircle2","myCircle3","myCircle4"] // Array of IDs
.map(document.getElementById, document)           // Array of elements
.forEach(doStuff);

Alors doStuff sera appelé une fois pour chaque élément et recevra 3 arguments: l'élément, l'index de l'élément dans le tableau d'éléments et le tableau d'éléments.

2
Oriol

Je ne sais pas si quelque chose comme ceci fonctionne en js, en PHP et en Python, que j'utilise assez souvent, il est possible ... .. Peut-être utilisez-vous simplement la boucle for: 

function doStuff(){
    for(i=1; i<=4; i++){
        var i = document.getElementById("myCiricle"+i);
    }
}
1
Vulgo Alias

Vulgo a la bonne idée sur ce fil. Je pense que sa solution est la plus simple du groupe, même si sa réponse aurait pu être un peu plus approfondie. Voici quelque chose qui a fonctionné pour moi. J'ai fourni un exemple.

<h1 id="hello1">Hello World</h1>
<h2 id="hello2">Random</h2>
<button id="click">Click To Hide</button>

<script>

  document.getElementById('click').addEventListener('click', function(){
    doStuff();
  });

  function doStuff() {
    for(var i=1; i<=2; i++){
        var el = document.getElementById("hello" + i);
        el.style.display = 'none';
    }
  }

</script>

Évidemment, il suffit de modifier les entiers dans la boucle for pour prendre en compte le nombre d'éléments que vous ciblez, ce qui correspond à 2 dans cet exemple.

1
Dan Zuzevich

getElementByID est exactement cela - obtenez un élément par id.

Peut-être voudrez-vous donner à ces éléments une classe circle et getElementsByClassName

1
sachleen

document.getElementById() ne prend qu'un argument. Vous pouvez leur donner un nom de classe et utiliser getElementsByClassName(). 

1
MuhammadHani

La meilleure façon de le faire est de définir une fonction et de lui transmettre un paramètre du nom de l'ID que vous souhaitez extraire du DOM. Chaque fois que vous souhaitez extraire un ID et le stocker dans un tableau, vous pouvez appeler la fonction

<p id="testing">Demo test!</p>

function grabbingId(element){
    var storeId = document.getElementById(element);

    return storeId;
}


grabbingId("testing").syle.color = "red";
1
EsterlingAccime Youtuber

Vous pouvez utiliser quelque chose comme ce tableau et cette boucle.

<p id='fisrt'>??????</p>
<p id='second'>??????</p>
<p id='third'>??????</p>
<p id='forth'>??????</p>
<p id='fifth'>??????</p>
<button id="change" onclick="changeColor()">color red</button>
<script>

    var ids = ['fisrt','second','third','forth','fifth'];

    function changeColor() {
        for (var i = 0; i < ids.length; i++) {
          document.getElementById(ids[i]).style.color='red';
 }
    }
</script>
1
Samir Vukasinovic

Utilisez jQuery ou similaire pour accéder à la collection d’éléments en une seule phrase. Bien sûr, vous devez mettre quelque chose comme ceci dans la section "head" de votre html: 

<script type='text/javascript' src='url/to/my/jquery.1.xx.yy.js' ...>

Alors voici la magie:

.- Tout d’abord, supposons que vous ayez des divs avec des identifiants comme vous l’avez écrit, c’est-à-dire:

 ...some html...
 <div id='MyCircle1'>some_inner_html_tags</div>
 ...more html...
 <div id='MyCircle2'>more_html_tags_here</div>
 ...blabla...
 <div id='MyCircleN'>more_and_more_tags_again</div>
 ...zzz...

.- Avec ce "sort", jQuery retournera une collection d'objets représentant tous les éléments div avec des identifiants contenant la chaîne entière "myCircle" n'importe où:

 $("div[id*='myCircle']")

C'est tout! Notez que vous vous débarrassez de détails comme le suffixe numérique, que vous pouvez manipuler tous les divs en une phrase, les animer ... Voilà!

 $("div[id*='myCircle']").addClass("myCircleDivClass").hide().fadeIn(1000);

Prouvez-le dans la console de script de votre navigateur (appuyez sur F12) dès maintenant!

0
Eugenio F. Martinez Pacheco

Comme indiqué par jfriend00, 

document.getElementById () ne prend en charge qu'un nom à la fois et ne renvoie qu'un seul nœud et non un tableau de nœuds.

Cependant, voici un exemple de code que j'ai créé et que vous pouvez donner à un ou à une liste d'identifiants séparés par des virgules. Cela vous donnera un ou plusieurs éléments dans un tableau. S'il y a des erreurs, il retournera un tableau avec une erreur comme seule entrée.

function safelyGetElementsByIds(ids){
    if(typeof ids !== 'string') return new Error('ids must be a comma seperated string of ids or a single id string');
    ids = ids.split(",");
    let elements = [];
    for(let i=0, len = ids.length; i<len; i++){
        const currId = ids[i];
        const currElement = (document.getElementById(currId) || new Error(currId + ' is not an HTML Element'));
        if(currElement instanceof Error) return [currElement];
        elements.Push(currElement);
    };
    return elements;
}

safelyGetElementsByIds('realId1'); //returns [<HTML Element>]
safelyGetElementsByIds('fakeId1'); //returns [Error : fakeId1 is not an HTML Element]
safelyGetElementsByIds('realId1', 'realId2', 'realId3'); //returns [<HTML Element>,<HTML Element>,<HTML Element>]
safelyGetElementsByIds('realId1', 'realId2', 'fakeId3'); //returns [Error : fakeId3 is not an HTML Element]
0
Plinderman

Pour moi, le travail est flou, quelque chose comme ça

doStuff(

    document.getElementById("myCircle1") ,

    document.getElementById("myCircle2") ,

    document.getElementById("myCircle3") ,

    document.getElementById("myCircle4")

);
0
Nicola Mihaita