jQuery Element Selector

What Is the Element Selector?

The element selector $("element") (since jQuery 1.0) selects every node with that HTML tag name — the same idea as a CSS type selector. Official docs note jQuery uses native getElementsByTagName() for this expression.

$("div")        // every <div>
$("p")          // every <p>
$("span")       // every <span>

$("div.card")   // div + class
$("#box div")   // divs under #box only

// Native twin: document.getElementsByTagName("div")

How to Use the Element Selector

Write the tag name in lowercase, then narrow with class, id, or a parent when needed.

1. Pass the tag name: $("div"), $("li"), $("input").
2. Combine with a class or id when you need fewer matches: $("div.note").
3. Scope under a container on large pages: $("#panel p").
4. Use commas for several tags at once: $("h1, h2, h3").
5. Prefer lowercase tag names for consistency across HTML/XML contexts.

Pseudocode

matches = getElementsByTagName(tagName)   // native when bare

// or, conceptually:
matches = []
for each element in document (or context):
    if element.tagName equals tagName:
        matches.add(element)

return jQuery(matches)

Cheat Sheet

Keep these facts handy while selecting by tag name.

Live Preview

Run $("div"), $("span"), or both against the official-style sample boxes.

$("div").length
→ 2

matched → DIV1, DIV2

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var labels = [];
$("div").each(function () {
  labels.push($.trim($(this).text()));
});

$("#out").text(
  "Matched divs: " + labels.length + "\n" +
  labels.join(", ")
);

Matched divs: 2
DIV1, DIV2

$("#out").text(
  "div: " + $("div").length + "\n" +
  "p: " + $("p").length + "\n" +
  "span: " + $("span").length
);

div: 2
p: 1
span: 1

$("#out").text(
  "All div: " + $("div").length + "\n" +
  "div.card: " + $("div.card").length
);

All div: 3
div.card: 2

$("#out").text(
  "Inside #main: " + $("#main p").length + "\n" +
  "Whole page p: " + $("p").length
);

Inside #main: 2
Whole page p: 3

var labels = [];
$("h1, h2, h3").each(function () {
  labels.push(this.tagName.toLowerCase() + ": " + $.trim($(this).text()));
});

$("#out").text(labels.join("\n"));

h1: Title
h2: Section
h3: Detail

Performance Notes

Tag selectors are fast because browsers optimize getElementsByTagName. Cost grows when the match set is huge — scope early when possible.

Key Takeaways