Wie funktioniert JavaScript speichern von DOM-Elementen in Variablen?

Was ich meine ist, wie JavaScript speichern von DOM-Elementen, wenn Sie etwas tun, wie:

var foo = document.getElementsByTagName('p');

was bedeutet foo geworden??? ein array von Objekten? und wie kann ich hinzufügen weitere Elemente, die variable, zum Beispiel:

var bar = document.form[0].getElementsByTagName('input'); //5 elements
var foo = document.form[1].getElementsByTagName('input'); //4 elements

bar =+ foo;

for (i=0;i<bar.length;i++){
console.log(bar.value); //9 logged values
}

Ist es möglich, mehrere Elemente des gleichen Typs auf eine variable, die bereits Elemente in ihm? Muss ich eine Schleife durch alle Elemente in der I-variable hinzufügen möchten, und "schieben" Sie Sie in die variable möchte ich alle Daten?

  • verwenden getElementsByTagName() anstelle von getElementsByName()
  • Was wäre der Unterschied zwischen der Verwendung TagName und Name?
  • Die getElementsByTagName () - Methode greift auf alle Elemente mit dem angegebenen tagname, und getElementsByName () - Methode greift auf alle Elemente mit dem angegebenen Namen. tagname ist ein html-element-tag-name wie <div> oder <p> - und name-Attribut, wie z.B. <div name="name">
InformationsquelleAutor Samuel Lopez | 2013-06-19
  1. 8

    getElementsByTagName (und ähnliche Methoden wie die getElementsByName, getElementsByClassName etc) gibt einen NodeList (oder HTMLCollection, je nach browser scheinbar, siehe auch Unterschied zwischen HTMLCollection, Nodelisten, und arrays von Objekten).

    Obwohl es eine array-wie Objekt, d.h. es hat numerische Eigenschaften und eine .length Eigenschaft, können Sie keine neuen Elemente ein.

    Modifizieren NodeList, müssen Sie konvertieren Sie es zu einer regelmäßigen Anordnung. Dies kann leicht erreicht werden mit der array-Methode .slice und zur gleichen Zeit, die Sie können mischen der beiden Listen mit .concat:

    bar = Array.prototype.slice.call(bar).concat(Array.prototype.slice(foo));

    Dies funktioniert, weil die meisten native array-Methoden sind so definiert, dass das argument nicht eigentlich ein array, sondern ein array-ähnliches Objekt.

    Die signifikanten Unterschiede zwischen einem NodeList und die Letzte Reihe werden:

    • Das array nicht mehr Leben, d.h. die Sammlung wird nicht automatisch aktualisiert, wenn neue DOM-Knoten Hinzugefügt werden.
    • Die Elemente in die endgültige (zusammengefasst) array werden nicht unbedingt in der dokumentreihenfolge.
    • Vielen Dank für die tolle Antwort, das Beispiel, die links für weitere Informationen und die Beantwortung all meiner Fragen!
    • Sie sind herzlich willkommen! 🙂
    • Hallo Felix ich dachte, dass Sie könnte möglicherweise helfen, mich mit einer Frage, die ich habe nicht alle Antworten, die nur geringe Aussicht. Ich würde stark apreciate es! Unterschied zwischen contentDocument und contentWindow
    • Beachten Sie, dass für den IE<9 Array.prototype.slice.call(bar) funktioniert nicht, es wird die Ausgabe der Fehlermeldung: "JScript-Objekt Erwartet" für eine Problemumgehung, die in einer Schleife durch alle Elemente in jeder Knotenliste und füge Sie in ein array ein komplettes Beispiel finden Sie in [[Funktion].anwenden (haben.) verursacht "JScript object expected" error in IE](stackoverflow.com/q/11112950/1079232)
    • Versuchen Sie, geben 0 als zweites argument: Array.prototype.slice.call(bar, 0).
    • So IE unterstützt die Methode, aber Sie erwartet 2 Argumente? Ich fand die Frage oben, während der Suche nach Informationen über den Fehler gefunden und das Beispiel.
    • Gut, .slice dauert in der Regel ein argument, um zu definieren die position, wo das schneiden beginnen soll. Wenn dieser Wert undefined (z.B. wenn Sie don ' T-pass-argument) es wird in der Regel umgewandelt 0. Aber vielleicht ist der IE hat eine andere überprüfen, ob ein argument übergeben wurde oder nicht.
    • Ich habe es versucht wie du gesagt hast, Array.prototype.slice.call(bar, 0) aber der gleiche Fehler geworfen wurde, denn nun werde ich mit dem Stäbchen da, die wir benötigen, um dieses kleine Skript auf IE 8, wenn du noch weitere Vorschläge, ich werde gerne versuchen, Ihnen vielen Dank!

    InformationsquelleAutor Felix Kling
  2. 1

    bar =+ foo;

    dies funktioniert nur bei string-Verkettung und es wäre bar+= foo

    aber beide bar und foo hier werden DOM-Objekte. also, wenn Sie wollen das hinzufügen von Elementen des gleichen Typs u können, erstellen Sie ein array.

    z.B.,

    var myArray =[]
myArray.push(foo);
myArray.push(bar);
    • Dein Beispiel wäre ein array mit zwei Werten, die beide von Ihnen wäre NodeLists, nicht die Elemente. Es würde nicht verbinden, beide NodeLists
    • auch er erwähnte, dass er wollte Elemente hinzufügen, um eine variable, die bereits Elemente, um es zu
    InformationsquelleAutor Gokul Kav
  3. -4

    foo wird die Funktion. So, dass du nicht in der Lage, die foo zu bar, weil das macht keinen Sinn. Es wäre wie der Versuch, das zu tun:

    document.form[0].getElementsByName('input') document.form[1].getElementsByName('input');

    Könnten Sie mehrere Elemente in einem einzigen array. Ich würde finden, dass der einfachste Weg, um erreichen Ihre Lösung.

    • foo wird Knotenliste nicht Funktion
    • ooo ich bekomme es jetzt, gibt es eine Möglichkeit, dann zum speichern von Elementen in einer Variablen, so dass später können Sie weitere Elemente in die variable? würde mit TagName etwas ändern, wie @Givi gesagt?
    • Felix Kling die perfekte Antwort auf Ihre Frage
    • ja hat er ich habe gerade beteiligten mit einer anderen Aufgabe und nicht die Zeit haben, um Sie als Antwort :s ich habe upvote, obwohl, und es ist perfekt!
    InformationsquelleAutor VinylScratch
Schreibe einen Kommentar