2009-03-04 4 views
0

Das grundlegende Szenario: Ich habe eine Reihe von Elementen auf einer HTML-Seite, dynamisch generiert. (Derzeit sind sie alle divs, aber sie müssen nicht sein.)Was ist der beste Weg, um eine Liste der Inhalte einer bestimmten Gruppe von DOM-Elementen in Javascript zu erhalten?

Was ich will, ist eine JavaScript-Funktion, die Schleife all diese divs (oder was auch immer) auf der Suche nach dem Vorhandensein eines bestimmten Wertes .

Was ist die beste, browserübergreifende Möglichkeit, dies zu tun? Funktioniert getElementsByName() in allen Browsern auf divs? Kann ich ihnen die gleiche ID geben und irgendwie ein Array aus getElementById zurückholen?

Wenn ich diese divs zu spans oder inputs ändere, macht das die Dinge einfacher?

Danke!

(edit: es wäre am besten, für dieses Projekt, wenn es eine Lösung ohne Verwendung von externen js Bibliotheken gäbe. Ich nehme an, dass jQuery eine Funktion hat, die genau das in einer Zeile macht, aber im Moment möchte ich zu vermeiden, diese Dose von Würmern mit dem Kunden zu öffnen.)

+0

Wo ist der Wert für diese divs? innerHTML? Ein Attribut? –

+0

Das ist noch offen, ehrlich gesagt. Was ist am einfachsten? –

Antwort

3

getElementsByTagName ist in DOM Core definiert, so dass jeder Browser, der das implementiert, funktioniert. Das ist ungefähr jeder aktuell verwendete Browser.

eine gander hier für die Besonderheiten Nehmen: http://www.quirksmode.org/dom/w3c_core.html

Ein Gotcha der Ware zu sein, ist, dass getElementsByTagName eine NodeList gibt - kein Array. Es funktioniert das gleiche, aber es wird sehr spät ausgewertet, wenn Sie also Knoten zum DOM hinzufügen/entfernen, während Sie NodeList durchlaufen, werden Sie seltsame Ergebnisse bekommen. Schreiben Sie in diesen Fällen zwei Schleifen; Durchlaufen Sie zunächst die und speichern Sie alle Einträge in einem Array - Dann durchlaufen Sie das Array.

2

Es spielt keine Rolle, was die Elemente sind, aber was zählt, ist, wo sie sich auf der Seite befinden. Wenn es sich um untergeordnete Elemente eines einzelnen übergeordneten Elements handelt, ist Ihr Problem einfach. Geben Sie dem übergeordneten Element eine ID, und Sie können getElementById() verwenden, um es zu erfassen und seine untergeordneten Elemente zu iterieren.

getElementById() Verhalten ist nicht definiert, wenn mehr als eine Instanz einer ID im Dokument gefunden wird. Die meisten werden das erste Element zurückgeben, das sie finden können, aber Sie können sich sicherlich nicht auf ein Array verlassen.

getElementsByTagName() funktioniert nur, wenn Sie ein obskures Tag verwenden können, von dem Sie sicher sind, dass es an keiner anderen Stelle auf Ihrer Seite erscheint. Sie können dies erweitern, indem Sie angeben, dass für die Elemente, an denen Sie interessiert sind, ein Attribut vorhanden ist, nach dem Sie suchen können (z. B. @class oder @title). Sie können dann das Ergebnis von getElementsByTagName() durchforsten, um dies zu überprüfen, und sich nur die Elemente ansehen, in denen das Attribut vorhanden ist.

+0

Achten Sie auf die Verwendung von .childNodes, da verschiedene Browser den HTML-Code als unterschiedliche DOM-Strukturen darstellen. Insbesondere können Leerzeichen zu Textknoten werden oder nicht. – troelskn

1

Sie können this Website verwenden, um zu sehen, was getElementBy die meisten Suiten Ihre Bedürfnisse.
Es gibt einige mit Bibliotheken und einige wie troelskn schrieb, dass für Standard-Javascript in allen unterstützenden Browsern gelten.

Verwandte Themen