existe-t-il des alternatives pour GetElementById?

Question

Bon, je suis nouveau sur JavaScript, j'ai vraiment besoin d'aide pour ça. J'ai un script, qui ressemble à ceci:

var p = new Ping(); 

    p.ping("http://bf3.in", function(data) { 
    document.getElementById("ping").innerHTML = data; 
    }); 

............. some code goes here ........ 

<td id = 'ping'>line 1</td> 
<td id = 'ping'>line 2</td> 

Mon problème est qu'il ya plusieurs balises qui veulent utiliser cette fonction, mais je ne peux utiliser id = « ping » sur une étiquette, donc j'ai besoin une alternative pour getElementById, une qui me permettrait d'utiliser plusieurs tags.

MISE À JOUR ----------------------- ----------------

c'est mon code complet http://bf3.in/ping.txt effectivement iam hébergeant certains serveurs de jeu, donc besoin de ping serevr ip. ici est où le nom d'utilisateur connexion client http://bf3.in/launcher/login.php : Junon mot de passe: Junon merci :)

Answer 1

Un ID ne doit être utilisé pour faire référence à un seul élément unique. Si vous voulez regrouper les éléments, utilisez class - alors vous pouvez faire document.getElementsByClassName('ping'); qui retournera un tableau d'éléments.

Alors:

<table> 
    <td class = 'ping'>line 1</td> 
    <td class = 'ping'>line 2</td> 
</table> 

puis document.getElementsByClassName('ping'); retourne un tableau contenant les deux éléments td. Qui peut être consulté en utilisant des indices de tableau réguliers.

Toutefois, sauf si votre table doit afficher des données tabulaires, il est préférable d'utiliser quelque chose comme div au lieu d'une table. Ce n'est plus les années 90.

Answer 2

Oui, vous pouvez utiliser la fonction document.querySelectorAll pour interroger n'importe quel sélecteur CSS ou vous pouvez utiliser document.getElementsByClassName pour interroger en fonction de la classe. Il n'y a aucun moyen d'interroger en fonction de plusieurs identifiants, car les éléments ne peuvent pas avoir plusieurs ID.

Soyez prudent avec l'un que vous convertissez le résultat d'un tableau plutôt qu'un objet semblable à un tableau avec Array.from, de sorte que vous pouvez utiliser des méthodes d'extension comme filter et map.

Answer 3

Vous pouvez utiliser getElementsByTagName, querySelectorAll() ou vous pouvez utiliser getElementsByClassName

Note, tous ces retourne une liste de nœuds. Donc, si vous remplacez getElementById avec l'un de ceux-ci ne fonctionnera tout simplement pas. Vous devez faire quelque chose comme ceci

p.ping("http://bf3.in", function(data) { 
    document.querySelectorAll(".ping").forEach(function(element){ 
     element.innerHTML = data; 
}) 
}); 
<td class='ping'>line 1</td> 
<td class='ping'>line 2</td> 

En supposant que vous essayez d'accomplir quelque chose comme ceci.

Answer 4

Étant donné qu'un ID doit être unique dans le document, utilisez plutôt des classes.

---

laisse supposer que vous avez le balisage suivant:

<table> 
    <tr> 
    <th>Ping</th> 
    <th>Ping</th> 
    <th>Ping</th> 
    </tr> 
    <tr> 
    <td class="ping">{{ ping }}</td> 
    <td class="ping">{{ ping }}</td> 
    <td class="ping">{{ ping }}</td> 
    </tr> 
</table> 

---

Ce que vous voulez faire est d'obtenir tous les éléments avec la classe .ping.

Utilisez document.querySelectorAll() qui attend une chaîne contenant un ou plusieurs sélecteurs CSS séparés par des virgules. Cela retournera un NodeList qui est fondamentalement juste une collection de noeuds que vous pouvez itérer.

(function() { 
 

 
    let pings = document.querySelectorAll('.ping'); 
 

 
    function fetchPing(i) { 
 
    return `ping ${i} data`; //..fetch ping data. 
 
    } 
 

 
    pings.forEach((p, i) => { 
 
    p.textContent = fetchPing(i); 
 
    }); 
 

 
})();

<table> 
 
    <tr> 
 
    <th>Ping</th> 
 
    <th>Ping</th> 
 
    <th>Ping</th> 
 
    </tr> 
 
    <tr> 
 
    <td class="ping">{{ ping }}</td> 
 
    <td class="ping">{{ ping }}</td> 
 
    <td class="ping">{{ ping }}</td> 
 
    </tr> 
 
</table>

---

Notes:

• Si les données que vous récupérez est juste le texte brut, s'il vous plaît utiliser textContent au lieu de innerHTML pour des raisons de performance et de sécurité.