Wählen Sie alle Elemente, die mit "data-" Attribut, ohne die Verwendung von jQuery

Nur mit JavaScript, was ist der effizienteste Weg, um wählen Sie alle DOM-Elemente, die eine gewisse data- Attribut (sagen wir mal data-foo). Die Elemente können unterschiedliche tag-Elemente.

<p data-foo="0"></p><br/><h6 data-foo="1"></h6>

Beachten Sie, dass document.querySelectorAll funktioniert nicht auf IE7. Sie müsste dann ein fallback-Skript, welches durch den DOM-Baum und die Prüfung für das Attribut in jedem tag (eigentlich habe ich keine Ahnung, wie schnell querySelectorAll ist, und würde für die manuelle überprüfen von tags).
Was ist Ihr Grund für die nicht mit jQuery? Es ist so ziemlich unersetzlich in Situationen wie dieser...
überhaupt nicht, Sie können sogar wählen Sie diese Elemente in reinem css auch.
da nicht jede Umgebung, Firma, Website, Programmierung standard, was Sie haben, erlaubt die Verwendung von jQuery. jQuery ist nicht unersetzlich.
Vereinbart. Würde es nicht mehr Sinn machen, um jQuery verwenden, es sei denn, Sie waren schon es zu benutzen, selbst dann würde ich wahrscheinlich opt-out. Vor 6 Jahren war es viel mehr üblich, haben Sie jQuery in Ihre Website, unterstützen IE5-8 wurde häufiger, und jQuery, sofern die Abstraktionen, die dies tun, in einem einfachen one-liner.
Ich immer noch nicht sehen, jede Antwort, die wirklich funktioniert auf verschiedene data- Elemente, dh: data-foo=0 und data-bar=1 und data-app="js" und data-date="20181231"

InformationsquelleAutor DrANoel | 2011-08-16

311

Können Sie querySelectorAll:
```
document.querySelectorAll('[data-foo]');
```
- Perfekt, vielen Dank! Semi-Verwandte Hinweis: wenn Sie möchten, wählen Sie ein Attribut mit einem Doppelpunkt im Namen, müssen Sie die Flucht der Doppelpunkt (zumindest in Chrome) so: querySelectorAll('[Attribut\\:name]") (siehe: code.google.com/p/chromium/issues/detail?id=91637)
InformationsquelleAutor Joe
185
```
document.querySelectorAll("[data-foo]")
```
erhalten Sie alle Elemente mit diesem Attribut.
```
document.querySelectorAll("[data-foo='1']")
```
wird nur erhalten Sie mit einem Wert von 1.

InformationsquelleAutor Joseph Marikle

Versuchen Sie es → hier

    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <p data-foo="0"></p>
            <h6 data-foo="1"></h6>
            <script>
                var a = document.querySelectorAll('[data-foo]');

                for (var i in a) if (a.hasOwnProperty(i)) {
                    alert(a[i].getAttribute('data-foo'));
                }
            </script>
        </body>
    </html>

Mithilfe der hasOwnProperty ist die beste Antwort für mich so weit im Jahr 2016, ist dies sehr schnell über andere Möglichkeiten der iteration Mdn hasOwnProperty
NodeList von querySelectorAll() ist durchsuchbar (wenn auch nicht ein array). Looping mit for in iteriert über die Länge und die Element-Eigenschaften. Verwenden Sie stattdessen for of Durchlaufen Eigenschaften entwickelt, um iteriert über

InformationsquelleAutor shawndumas

0

Hier ist eine interessante Lösung: es nutzt der Browser CSS engine zum hinzufügen einer dummy-Eigenschaft, um Elemente, die passenden Selektor und wertet dann die berechnete Stil zu finden, aufeinander abgestimmten Elementen:

Tut es dynamisch erstellen Sie eine style-Regel [...] Es dann durchsucht das gesamte Dokument (mit dem
viel verschrien und IE-spezifisch, aber sehr schnell-Dokument.alle) und ruft die
berechnete Stil für jedes der Elemente. Wir suchen dann nach den foo
Eigentum an der dadurch entstandenen Sache ab, und prüfen Sie, ob es wertet als
"bar". Für jedes element entspricht, fügen wir ein array.
- gekennzeichnet ist html5 also es ist nicht gonna be <IE9
- Richtig, ich entfernte den Hinweis auf alten Browsern.
- gute Arbeit 😉 ...
- Ich danke Ihnen sehr, sir 😉 ich muss bekennen, dass ich übersehen die 5.
- ja, leicht zu übersehen, der tag. weil es html5, wir alle sind, was darauf hindeutet Dokument.querySelectorAll (und die data -* - Attribut ist html5-spezifisch zu).
InformationsquelleAutor Heinrich Ulbricht

Zwar nicht so schön wie querySelectorAll (die eine Litanei von Fragen), hier ist eine sehr flexible Funktion, die eine Rekursion der DOM und sollte in den meisten Browsern funktionieren (alte und neue). Solange der browser unterstützt Ihren Zustand (d.h.: Daten, Attribute), sollten Sie in der Lage, um das element abzurufen.

Für die neugierigen: nicht die Mühe, dieses zu testen vs. QSA auf jsPerf. Browser wie Opera 11 wird cache die Abfrage und die Ergebnisse verzerren.

Code:

function recurseDOM(start, whitelist)
{
    /*
    *    @start:        Node    -    Specifies point of entry for recursion
    *    @whitelist:    Object  -    Specifies permitted nodeTypes to collect
    */

    var i = 0, 
    startIsNode = !!start && !!start.nodeType, 
    startHasChildNodes = !!start.childNodes && !!start.childNodes.length,
    nodes, node, nodeHasChildNodes;
    if(startIsNode && startHasChildNodes)
    {       
        nodes = start.childNodes;
        for(i;i<nodes.length;i++)
        {
            node = nodes[i];
            nodeHasChildNodes = !!node.childNodes && !!node.childNodes.length;
            if(!whitelist || whitelist[node.nodeType])
            {
                //condition here
                if(!!node.dataset && !!node.dataset.foo)
                {
                    //handle results here
                }
                if(nodeHasChildNodes)
                {
                    recurseDOM(node, whitelist);
                }
            }
            node = null;
            nodeHasChildNodes = null;
        }
    }
}

Können Sie dann beginnen Sie mit dem folgenden:

recurseDOM(document.body, {"1": 1}); für Geschwindigkeit, oder einfach nur recurseDOM(document.body);

Beispiel mit Ihren Vorgaben: http://jsbin.com/unajot/1/edit

Beispiel mit abweichender Spezifikation: http://jsbin.com/unajot/2/edit

Was ist die Litanei der Probleme, die mit querySelectorAll?
Ich würde auch gerne hören, über diese Fragen.
Nun, wir werden es nie wissen, die Litanei war. Ein weiteres Kapitel für die Ewigen Mysterien von SO

InformationsquelleAutor

0
```
var matches = new Array();

var allDom = document.getElementsByTagName("*");
for(var i =0; i < allDom.length; i++){
    var d = allDom[i];
    if(d["data-foo"] !== undefined) {
         matches.push(d);
    }
}
```
Nicht sicher, wer dinged mich mit einer -1, aber hier ist der Beweis.

http://jsfiddle.net/D798K/2/
- die meist "rechts" einfach nicht richtig. Im ziemlich sicher, dass jemand hat Ihnen die -1, weil Ihr tun eine Menge zusätzliche Arbeit, um die Elemente, und dann setzen die collection in ein array. Ich nicht geben, die -1 nur Abneigung gibt, wenn es keine Erklärung zu ein.
- teuer (alle Elemente auf der Seite), auch mit dem array-literal notation (z.B. []), und oben drauf, funktioniert es nicht. sehen Sie selbst --> jsbin.com/ipisul/edit#javascript html
- Obwohl die OP ist mit HTML 5 sowieso getElementsByTagName mit einem globalen (*) Wahlschalter defekt ist bei älteren IE baut. Dies ist, wo eine rekursive DOM suchen, der erledigt den job. Es ist auch kein "data-foo" - Eigenschaft auf ein ElementNode, die abgebildet werden, von der data-foo Attribut. Sie suchen für die dataset Objekt (sprich: node.dataset.foo.
- es erscheint, was, die Sie hatten war ein PEBKAC. jsfiddle.net/D798K/2. Es funktioniert. Letztlich, würde ich -1, mich für diese Antwort sowieso - ich habe die Worte "effizientesten" in der OP ' s Frage...
- hat die jsbin.com/ipisul eine Arbeit für Sie? verursachen Sie Ihre jsfiddle nicht funktioniert in meinem (Arbeits-Platz gefordert) ie9...
- In der Tat tut es - wirft mir drei leere Warnungen ... keine id für den passenden Knoten... IE8...
InformationsquelleAutor Brian

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.