✔ querySelectorAll

J

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:
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
 
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.
 
schneller wird, aber es tut sich zeitlich nichts.
Zum Vergrößern anklicken....
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück