querySelectorAll

jemand anders

Erfahrenes Mitglied
Hallo,

vielleicht weiß jemand, wo das Problem bei a.querySelectorAll ist. Wo weicht das von dem ab, was developer.mozilla.org macht?

PS: Kaum ist die virtuelle Tinte trocken: 2 x querySelectorAll scheint das Problem zu sein. Damit hat sich die Frage im Grunde erübrigt.


Viele Grüße


HTML:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="a">a
        <div class="b">b
            <div class="c">c
            </div>
            <div class="c">c
            </div>
        </div>
        <div class="b">b
        </div>
    </div>

    <script>
        (function() {
            console.clear()
            let a = document.querySelectorAll(".a"),
                // c = a[0].querySelectorAll(".c") ist okay
                c = a.querySelectorAll(".c") // Uncaught TypeError: a.querySelectorAll is not a function
                /*
                // https://developer.mozilla.org/de/docs/Web/API/Document/querySelectorAll
                // var container = document.querySelector("#test");
                // var matches = container.querySelectorAll("div.highlighted > p");
                */
            console.log(typeof a)
                // console.log(a.length)
            console.log(a)
                // console.log(x.length)
        })();
    </script>
</body>

</html>
 
Zuletzt bearbeitet:

basti1012

Erfahrenes Mitglied
Kommt darauf an.
queryselectorAll kannst du mit einer Schleife durchlaufen.
Kommt immer darauf an ,an welchen Element du dran willst .
An b und c geht es auch so
Code:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="a">a
        <div class="b">b
            <div class="c">c
            </div>
            <div class="c">c
            </div>
        </div>
        <div class="b">b
        </div>
    </div>
    <script>
     
            var a = document.querySelectorAll(".a .b");
a.forEach(function(d){
  console.log(d);// element b
               console.log(d.children);//element c    
})
 
    </script>
</body>

</html>

Man könnte auch querySelector('.a') und dann mit Schleife auf .b gehen.
Möglichkeiten gibt es da mehrere , deswegen sollte man erst wissen, was man auch genau haben möchte
 

jemand anders

Erfahrenes Mitglied
Irgendetwas habe ich falsch verstanden. In meiner Anwendung habe ich vier Untermengen bisher alle jeweils mit querySelectorAll abgefragt. Ich hatte gehofft, dass es nach Umstellung auf eine Grobmenge mit querySelector (zuerst falsch mit querySelectorAll) und dann von dieser Menge ausgehend vier Abfragen mit querySelectorAll schneller wird, aber es tut sich zeitlich nichts.
 

Sempervivum

Erfahrenes Mitglied
schneller wird, aber es tut sich zeitlich nichts.
Ich kann mir nicht vorstellen, dass diese Zugriffe auf DOM-Elemente einen merklichen Einfluss auf die Geschwindigkeit haben und vermute, dass deine reale Anwendung anders aussieht und mögliche Probleme mit der Geschwindigkeit eine andere Ursache haben.