Obtenir plusieurs éléments par ID
J'ai une page avec des balises d'ancrage dans tout le corps comme ceci:
<a id="test" name="Name 1"></a>
<a id="test" name="Name 2"></a>
<a id="test" name="Name 3"></a>
L'ID est toujours le même mais le nom change.
J'ai besoin de remplir une liste des noms de ces balises d'ancrage, par exemple; Nom 1, Nom 2, Nom 3. Voici où j'en suis jusqu'à présent:
document.write(document.getElementById("readme").name);
Ceci écrit le nom de la première balise d'ancrage. J'ai besoin d'un moyen d'obtenir plusieurs éléments par ID.
Toute aide est grandement appréciée.
Si vous pouvez modifier le balisage, vous pouvez utiliser plutôt class.
<!-- html -->
<a class="test" name="Name 1"></a>
<a class="test" name="Name 2"></a>
<a class="test" name="Name 3"></a>
// javascript
var elements = document.getElementsByClassName("test");
var names = '';
for(var i=0; i<elements.length; i++) {
names += elements[i].name;
}
document.write(names);
Contrairement à ce que d’autres pourraient dire, utiliser le même Id pour plusieurs éléments n’empêchera pas le chargement de la page, mais lorsqu’on essaie de sélectionner un élément par Id, le seul élément renvoyé est le premier élément avec l’id spécifié. De plus, utiliser le même identifiant n'est même pas valide en HTML.
Cela étant, n'utilisez jamais d'attributs d'identifiant en double. Si vous pensez que vous en avez besoin, vous recherchez plutôt class . Par exemple:
<div id="div1" class="mydiv">Content here</div>
<div id="div2" class="mydiv">Content here</div>
<div id="div3" class="mydiv">Content here</div>
Notez que chaque élément donné a un identifiant différent, mais la même classe. En opposition à ce que vous avez fait ci-dessus, c'est la syntaxe HTML légale. Tous les styles CSS que vous utilisez pour '.mydiv' (le point signifie classe) fonctionneront correctement pour chaque élément individuel de la même classe.
Avec un peu d'aide de Snipplr, vous pouvez utiliser ceci pour obtenir chaque élément en spécifiant un nom de classe donné:
function getAllByClass(classname, node) {
if (!document.getElementsByClassName) {
if (!node) {
node = document.body;
}
var a = [],
re = new RegExp('\\b' + classname + '\\b'),
els = node.getElementsByTagName("*");
for (var i = 0, j = els.length; i < j; i++) {
if (re.test(els[i].className)) {
a.Push(els[i]);
}
}
} else {
return document.getElementsByClassName(classname);
}
return a;
}
Le script ci-dessus renverra un tableau, alors assurez-vous de bien l'ajuster.
Vous ne pouvez pas avoir d'identifiants en double. Les identifiants sont supposés être uniques. Vous voudrez peut-être utiliser un cours spécialisé à la place.
Aujourd'hui, vous pouvez sélectionner des éléments avec le même attribut id de cette façon:
document.querySelectorAll('[id=test]');
Ou de cette façon avec jQuery:
$('[id=test]');
Le sélecteur CSS #test { ... } devrait également fonctionner pour tous les éléments avec id = "test". Mais la seule chose: document.querySelectorAll('#test') (ou $('#test')) - ne renverra qu'un premier élément avec cet identifiant. Est-ce bon ou pas - je ne peux pas dire. Mais parfois, il est difficile de suivre unique id standart .
Par exemple, vous avez le widget de commentaire, avec les identifiants HTML et le code JS, travaillant avec ces identifiants HTML. Tôt ou tard, vous aurez besoin de rendre ce widget plusieurs fois, de commenter un objet différent sur une seule page: et ici le standart sera brisé (souvent, le temps manque ou ne permet pas - de réécrire le code intégré).
Voici une fonction que je suis venu avec
function getElementsById(elementID){
var elementCollection = new Array();
var allElements = document.getElementsByTagName("*");
for(i = 0; i < allElements.length; i++){
if(allElements[i].id == elementID)
elementCollection.Push(allElements[i]);
}
return elementCollection;
}
Apparemment, il existe une convention prise en charge par prototype et probablement par d’autres grandes bibliothèques JavaScript.
Cependant, je suis venu pour découvrir que la fonction de signe dollar est devenue le raccourci plus ou moins factuel vers document.getElementById (). Voyons Face à cela, nous utilisons tous beaucoup document.getElementById (). Non seulement ça Prenez le temps de taper, mais cela ajoute aussi des octets à votre code.
voici la fonction du prototype:
function $(element) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.Push($(arguments[i]));
return elements;
}
if (Object.isString(element))
element = document.getElementById(element);
return Element.extend(element);
}
Si vous n'êtes pas religieux sur le maintien de votre code HTML valide, je peux voir des cas d'utilisation où le même identifiant pour plusieurs éléments peut être utile.
Un exemple est le test. Nous identifions souvent des éléments à tester en recherchant tous les éléments d'une classe particulière. Cependant, si nous ajoutons des classes uniquement à des fins de test, je dirais que c'est faux. Les cours sont destinés au style, pas à l'identification.
Si les ID sont destinés à l’identification, pourquoi doit-il s’agir d’un seul élément pouvant avoir un identifiant particulier? En particulier dans le monde frontal d'aujourd'hui, avec des composants réutilisables, si nous ne voulons pas utiliser de classes pour l'identification, nous devons utiliser des identifiants. Mais si nous utilisons des multiples d'un composant, nous aurons plusieurs éléments avec le même ID.
Je dis que ça va. Si c'est un anathème pour vous, c'est bon, je comprends votre point de vue. Acceptons d'être en désaccord et de passer à autre chose.
Si vous voulez une solution qui trouve tous les identifiants du même nom, c’est alors:
function getElementsById(id) {
const elementsWithId = []
const allElements = document.getElementsByTagName('*')
for(let key in allElements) {
if(allElements.hasOwnProperty(key)) {
const element = allElements[key]
if(element.id === id) {
elementsWithId.Push(element)
}
}
}
return elementsWithId
}
EDIT, ES6 FTW:
function getElementsById(id) {
return [...document.getElementsByTagName('*')].filter(element => element.id === id)
}
Vous devez utiliser querySelectorAll, cela écrit toutes les occurrences d'un tableau et vous permet d'utiliser forEach pour obtenir un élément individuel.
document.querySelectorAll('[id=test]').forEach(element=>
document.write(element);
});
GetElementById renvoie l'élément dont l'identificateur est donné par elementId. Si aucun élément de ce type n'existe, renvoie null. Le comportement n'est pas défini si plusieurs éléments ont cet ID.
Avec querySelectorAll vous pouvez sélectionner les éléments de votre choix sans utiliser le même identifiant à l'aide du sélecteur css:
var elems = document.querySelectorAll("#id1, #id1, #id3");
Un "id" Spécifie un identifiant unique pour un élément & une classe Spécifie un ou plusieurs noms de classe pour un élément. Il est donc préférable d'utiliser "Classe" au lieu de "id".