javascript: Zaznacz wszystkie elementy z atrybutem "data -" (bez jQuery)

Bez użycia jQuery, jaki jest najbardziej efektywny sposób na zaznaczenie wszystkich elementów dom, które mają określony atrybut data- (powiedzmy data-foo). Elementy mogą być różnymi elementami znaczników. 

<p data-foo="0"></p><br/><h6 data-foo="1"></h6>
Author: Jonathan Bredo Christensen, 2011-08-17
Source

6 answers

Możesz użyć querySelectorAll : 

document.querySelectorAll('[data-foo]');
 234
Author: Joe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-16 20:29:20 
document.querySelectorAll("[data-foo]")

Dostaniesz wszystkie elementy z tym atrybutem.

document.querySelectorAll("[data-foo='1']")

Dostaniesz tylko te z wartością 1.

 120
Author: Joseph Marikle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-16 20:30:14

Try it → here 

    <!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>
 7
Author: shawndumas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-15 21:50:55

Chociaż nie jest tak ładna jak querySelectorAll (która ma litanię problemów), oto bardzo elastyczna funkcja, która rekurencyjnie rekurencyjnie działa w większości przeglądarek (starych i nowych). Tak długo, jak przeglądarka obsługuje twój warunek (np. atrybuty danych), powinieneś być w stanie odzyskać element.

Do ciekawych: nie trudź się testowaniem tego vs. QSA na jsPerf. Przeglądarki takie jak Opera 11 buforują zapytanie i przekrzywiają wyniki.

Kod: 

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;
        }
    }
}

Można następnie zainicjować go za pomocą "following": {]}

recurseDOM(document.body, {"1": 1}); For speed, or just recurseDOM(document.body);

Przykład ze specyfikacją: http://jsbin.com/unajot/1/edit

Przykład o różnej specyfikacji: http://jsbin.com/unajot/2/edit

 1
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-16 22:31:48 
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);
    }
}
Nie jestem pewien, kto dał mi a -1, ale oto dowód.

Http://jsfiddle.net/D798K/2/

 0
Author: Brian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-17 09:50:30

Tutaj jest ciekawym rozwiązaniem: używa silnika CSS przeglądarki do dodawania atrapy właściwości do elementów pasujących do selektora, a następnie ocenia obliczony styl, aby znaleźć dopasowane elementy:

Tworzy dynamicznie regułę stylu [...] Następnie skanuje cały dokument (za pomocą dużo zdekompletowany i specyficzny dla IE, ale bardzo szybki dokument.wszystkie) i dostaje obliczony styl dla każdego z elementów. Następnie szukamy foo właściwość na wynikowym obiekcie i sprawdź, czy jest oceniany jako "bar". Dla każdego dopasowanego elementu dodajemy do tablicy.

 -1
Author: Heinrich Ulbricht,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-16 21:03:37