Native DOM Alternatives to jQuery Selectors
In this page:
Select by ID
document.getElementById() and document.querySelector() are the native browser equivalents of a jQuery ID or CSS selector, and they work without needing jQuery loaded at all. querySelector in particular accepts the same CSS selector syntax jQuery's $() does, making it a close drop-in replacement for simple lookups.
Example: Select by ID
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
console.log($("#text").text());
console.log(document.getElementById("text").textContent);
</script>
</body>
</html>Select by Class
jQuery selects elements by class using the same $() function with a CSS class selector, like $('.item'). Vanilla JavaScript can achieve the same result with document.querySelector() for the first match, or querySelectorAll() to get every matching element.
Example: Select by Class
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p class="item">One</p>
<script>
console.log($(".item").length);
console.log(document.querySelectorAll(".item").length);
</script>
</body>
</html>querySelector and querySelectorAll
querySelector() returns only the first element that matches a given CSS selector, while querySelectorAll() returns every matching element as a NodeList. Both accept the same CSS selector syntax jQuery uses internally, which is why they feel so familiar to anyone coming from jQuery.
Example: querySelector and querySelectorAll
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p class="item">One</p><p class="item">Two</p>
<script>
console.log(document.querySelector(".item").textContent);
console.log(document.querySelectorAll(".item").length);
</script>
</body>
</html>Selector Comparison
jQuery selectors are concise and jQuery objects come with a large set of convenient built-in methods attached automatically. Native selectors remove the need to load the jQuery library at all when a project only needs basic DOM selection and doesn't rely on jQuery's other conveniences.
Example: Selector Comparison
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p class="item">Text</p>
<script>
$(".item").css("color", "red");
document.querySelectorAll(".item").forEach(function(el) { el.style.color = "red"; });
</script>
</body>
</html>Small Selector Project
Choosing between the two often comes down to what the rest of the project already uses: native selectors are built directly into every modern browser with no extra dependency, while jQuery offers a more compact, batteries-included API on top of them.
Example: Small Selector Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
console.log($("#text").text() === document.getElementById("text").textContent);
</script>
</body>
</html>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: