✔ Alias für document.getElementsByClassName

[jemand anders]

Hallo,

wir würde man denn für document.getElementsByClassName einen Alias, z. B. gEbC, programmieren ?
https://jsfiddle.net/ggurzwkw/

Grüße

 

[SpiceLab]

Alias? In welcher Form? Und wofür?

 

[SpiceLab]

Nachtrag: Selbst jQuery hat keinen Alias für die getElementsByClassName()-Methode programmiert

For class selectors, jQuery uses JavaScript's native getElementsByClassName() function if the browser supports it.

Zitat-Quelle: https://api.jquery.com/class-selector/

 

[jemand anders]

Um mir das Schreiben zu ersparen. Es nervt nicht nur zig Mal "document.getElementsByClassName('xxx')[0].getElementsByTagName('xxx')" zuschreiben, es ist auch unleserlich.
Aber getz, wo ich das schreibe, fällt mir ein, dass es ja Arrays und Schleifen geben soll ...
Schön, dass wir mal darüber gesprochen haben.

Trotzdem, wäre schon interessant, wie das Problem zu lösen wäre.

 

[ComFreek]

Du hast es in deinem jsFiddle doch schon gelöst.
Alternativ geht das auch so:

let myAlias = document.getElementsByTagName.bind(document);
// Falls kein let-Support:
var myAlias = document.getElementsByTagName.bind(document);

Da du myAlias nicht mehr mit einem Objekt direkt aufrufst (d. h. blabla [punkt] getElementsByTagName), wird auch das "document"-Objekt nicht mehr automatisch als Kontext (this) der Funktion gesetzt. Manche Funktionen funktionieren ohne this, manche nicht, also lieber daran binden.

 

[jemand anders]

Respekt! Aber das mit der Fiddle gilt ja nicht für Fall 3, der Grund für die Frage hier.

 

[ComFreek]

Ich verstehe nicht ganz, was dein dritter Fall tun soll:

console.log('3: ' + gEbC(['bild')[0]);

Auch fehlt eine schließende eckige Klammer ]

 

[jemand anders]

Nee, ne? Folge meiner schlampigen Arbeitsweise (und der nervig "mitdenkenden" Fiddle).
Habe die Fiddle geändert.

 

[ComFreek]

console.log('3: ' + gEbC(['bild'])[0].getElementsByTagName('img')[0].src);

Wenn du Code wie "gEbC(['bild'])[0].gEbTN" haben möchtest, dann müsste gEbC entweder ein eigenes Objekt (und kein DOM-Objekt à la jQuery) zurückgeben oder du erweiterst den Prototyp des DOM-Objekts (nicht empfohlen - hat einige Nachteile! Siehe Google.).

Warum benutzt du nicht querySelector(All)?

// Liefert das "erste".
// Die Suchreihenfolge ist laut MDN definiert als := Der Dokumenten-Baum wird dabei mittels Tiefensuche in pre-order-Traversierung durchsucht Ergebnis zurück
document.querySelector('img.bild').src
// Falls du auf das "zweite" zugreifen möchtest
document.querySelectorAll('img.bild')[1].src

function q(selector, multiple) {
  return multiple ? document.querySelectorAll(selector) : document.querySelector(selector);
}

q('img.bild').src
q('img.bild', true)[1].src

 

[jemand anders]

Direkt nachdem ich die Frage gestellt hatte, hatte ich dann bereits auf querySelector umgestellt.
Die Frage unter Verwendung von getElementsByClassName mit Array war also i. d. T. danach rein akademisch.
Die Alias-Version brauche ich, weil ich aus Webseiten Informationen herauslese, die je nach Webseite an verschiedenen Stellen vorkommen; img/src ist nur ein Fall.

var x = q('.sel1 a')||q('.sel1')||q('.sel2 p a')||q('.sel3')||.... '?';