Skip to content

bobby_dreamer

Difference between querySelectorAll and getElementsByClassName

javascript, web-development1 min read

From Javascript, both the methods can be used to return multiple elements in the document but the difference is in what it returns.

  • .querySelectorAll : Non-Live node list - Returns all the elements that matches the specified CSS selector(s) as a static NodeList object.
  • .getElementsByClassName : Live node list - Returns all the elements that matches the spcified CSS class name as a HTMLCollection.
1var elements1 = document.querySelectorAll(".clickable");
2var elements2 = document.getElementsByClassName("clickable");

getElementsByClassName() is useful when working with dynamic elements as its updated when the DOM changes.