[Without jQuery] Rewriting in JavaScript Selectors Edition

rundezv — Sun, 16 Nov 2025 22:18:45 +0000

With the evolution of modern JavaScript, many of the roles once handled by jQuery can now be replaced with standard APIs. This article focuses on the highly demanded selectors and provides a comprehensive guide on how to migrate jQuery syntax to native JavaScript.

`$('*')`

Selects all elements.

$('*')

document.querySelectorAll('*')

Check how it works https://codepen.io/rundezv/pen/VYeoZjK

`$(':root')`

Selects the root element of the document.

$(':root')

document.querySelector(':root')

Check how it works https://codepen.io/rundezv/pen/ByKQWYj

`$('div')`

Selects all elements that match the specified tag name.

$('div')

document.querySelectorAll('div')

Check how it works https://codepen.io/rundezv/pen/gbrYrXW

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

$('div')
// =>
// [
//   <div>DIV1</div>,
//   <div>DIV2</div>,
// ]

document.querySelectorAll('div')

`$('#id')`

Selects the element whose id attribute matches the specified value.

$('#myDiv')

document.querySelector('#myDiv')

Check how it works https://codepen.io/rundezv/pen/gbrOZOB

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

$('#myDiv')
// => <div id="myDiv">id="myDiv"</div>

document.querySelector('#myDiv')

`$('.class')`

Selects all elements whose class name matches the specified class.

$('.myClass')

document.querySelectorAll('.myClass')

Check how it works https://codepen.io/rundezv/pen/ZYQgRGq

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

$('.myClass')
// =>
// [
//   <div class="myClass">div class="myClass"</div>,
//   <span class="myClass">span class="myClass"</span>,
// ]

document.querySelectorAll('.myClass')

`$('prev + next')`

Selects all next elements that are immediately preceded by a sibling prev element.

$('label + input')

document.querySelectorAll('label + input')

Check how it works https://codepen.io/rundezv/pen/RNaNLBP

<form>
  <label for="name">Name:</label>
  <input name="name" id="name">
  <fieldset>
    <label for="newsletter">Newsletter:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>
<input name="none">

$('label + input')
// =>
// [
//   <input name="name" id="name">,
//   <input name="newsletter" id="newsletter">,
// ]

document.querySelectorAll('label + input')

`$('prev ~ siblings')`

Selects all sibling elements that follow a prev element and match siblings.

$('#prev ~ div')

document.querySelectorAll('#prev ~ div')

Check how it works https://codepen.io/rundezv/pen/EaKabLa

<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>

$('#prev ~ div')
// =>
// [
//   <div>div sibling</div>,
//   <div>div sibling <div id="small">div niece</div></div>,
//   <div>div sibling</div>,
// ]

document.querySelectorAll('#prev ~ div')

`$('parent child')`

Selects all descendant elements of the specified parent elements.

$('form input')

document.querySelectorAll('form input')

Check how it works https://codepen.io/rundezv/pen/qEZWZXE

<form>
  <div>Form is surrounded by the green border.</div>

  <label for="name">Child of form:</label>
  <input name="name" id="name">

  <fieldset>
    <label for="newsletter">Grandchild of form, child of fieldset:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>

$('form input')
// =>
// [
//   <input name="name" id="name">,
//   <input name="newsletter" id="newsletter">,
// ]

document.querySelectorAll('form input')

`$('parent > child')`

Selects all direct child elements of the specified parent elements.

$('ul.topnav > li')

document.querySelectorAll('ul.topnav > li')

Check how it works https://codepen.io/rundezv/pen/myVNLZP

<ul class="topnav">
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Nested item 1</li>
      <li>Nested item 2</li>
      <li>Nested item 3</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

$('ul.topnav > li')
// =>
// [
//   <li>Item 1</li>,
//   <li>Item 2
//     <ul>
//       <li>Nested item 1</li>
//       <li>Nested item 2</li>
//       <li>Nested item 3</li>
//     </ul>
//   </li>,
//   <li>Item 3</li>,
// ]

document.querySelectorAll('ul.topnav > li')

`$('[name]')`

Selects all elements that have the specified attribute.

$('div[id]')

document.querySelectorAll('div[id]')

Check how it works https://codepen.io/rundezv/pen/PwNYJOm

<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>

$('div[id]')
// =>
// [
//   <div id="hey">with id</div>,
//   <div id="there">has an id</div>,
// ]

document.querySelectorAll('div[id]')

`$('[name="value"]')`

Selects all elements whose specified attribute value exactly matches the given value.

$('input[value="Hot Fuzz"]')

document.querySelectorAll('input[value="Hot Fuzz"]')

Check how it works https://codepen.io/rundezv/pen/NPxQqZo

<div>
  <label>
    <input type="radio" name="newsletter" value="Hot Fuzz">
    <span>name?</span>
  </label>
</div>
<div>
  <label>
    <input type="radio" name="newsletter" value="Cold Fusion">
    <span>value?</span>
  </label>
</div>
<div>
  <label>
    <input type="radio" name="newsletter" value="Evil Plans">
    <span>value?</span>
  </label>
</div>

$('input[value="Hot Fuzz"]')
// =>
// [
//   <input type="radio" name="newsletter" value="Hot Fuzz">,
// ]

document.querySelectorAll('input[value="Hot Fuzz"]')

`$('[name!="name"]')`

Selects all elements that either do not have the specified attribute or whose attribute value does not match the given value.

$('input[name!="newsletter"]')

document.querySelectorAll('input:not([name="newsletter"])')

Check how it works https://codepen.io/rundezv/pen/YzRqqMY

<div>
  <input type="radio" name="newsletter" value="Hot Fuzz">
  <span>name is newsletter</span>
</div>
<div>
  <input type="radio" value="Cold Fusion">
  <span>no name</span>
</div>
<div>
  <input type="radio" name="accept" value="Evil Plans">
  <span>name is accept</span>
</div>

$('input[name!="newsletter"]')
// =>
// [
//   <input type="radio" value="Cold Fusion">,
//   <input type="radio" name="accept" value="Evil Plans">,
// ]

document.querySelectorAll('input:not([name="newsletter"])')

`$('[name~="value"]')`

Selects all elements whose specified attribute value is a space-separated list containing the given value.

$('input[name~="man"]')

document.querySelectorAll('input[name~="man"]')

Check how it works https://codepen.io/rundezv/pen/QwyeLVY

<input name="man-news">
<input name="milk man">
<input name="letterman2">
<input name="newmilk">

$('input[name~="man"]')
// =>
// [
//   <input name="milk man">,
// ]

document.querySelectorAll('input[name~="man"]')

`$('[name|="value"]')`

Selects all elements whose specified attribute value either matches the given value exactly or begins with that value followed by a hyphen.

$('a[hreflang|="en"]')

document.querySelectorAll('a[hreflang|="en"]')

Check how it works https://codepen.io/rundezv/pen/azdeoWz

<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>

$('a[hreflang|="en"]')
// =>
// [
//   <a href="example.html" hreflang="en">Some text</a>,
//   <a href="example.html" hreflang="en-UK">Some other text</a>,
// ]

document.querySelectorAll('a[hreflang|="en"]')

`$('[name^="value"]')`

Selects all elements whose specified attribute value begins with the given value.

$('input[name^="news"]')

document.querySelectorAll('input[name^="news"]')

Check how it works https://codepen.io/rundezv/pen/LEGwpEj

<input name="newsletter">
<input name="milkman">
<input name="newsboy">

$('input[name^="news"]')
// =>
// [
//   <input name="newsletter">,
//   <input name="newsboy">,
// ]

document.querySelectorAll('input[name^="news"]')

`$('[name$="value"]')`

Selects all elements whose specified attribute value ends with the given value.

$('input[name$="letter"]')

document.querySelectorAll('input[name$="letter"]')

Check how it works https://codepen.io/rundezv/pen/YPwmXbE

<input name="newsletter">
<input name="milkman">
<input name="jobletter">

$('input[name$="letter"]')
// =>
// [
//   <input name="newsletter">,
//   <input name="jobletter">,
// ]

document.querySelectorAll('input[name$="letter"]')

`$('[name*="value"]')`

Selects all elements whose specified attribute value contains the given value as a substring.

$('input[name*="man"]')

document.querySelectorAll('input[name*="man"]')

Check how it works https://codepen.io/rundezv/pen/xbZvKzV

<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

$('input[name*="man"]')
// =>
// [
//   <input name="man-news">,
//   <input name="milkman">,
//   <input name="letterman2">,
// ]

document.querySelectorAll('input[name*="man"]')

`$('[name1="value1"][name2="value2"]')`

Selects all elements that match all of the specified attribute filters.

$('input[id][name$="man"]')

document.querySelectorAll('input[id][name$="man"]')

Check how it works https://codepen.io/rundezv/pen/wBGBdEJ

<input id="man-news" name="man-news">
<input name="milkman">
<input id="letterman" name="new-letterman">
<input name="newmilk">

$('input[id][name$="man"]')
// =>
// [
//   <input id="letterman" name="new-letterman">,
// ]

document.querySelectorAll('input[id][name$="man"]')

`$('selector1, selector2, selectorN')`

Selects the combined set of elements that match any of the specified selectors.

$('div, span, p.myClass')

document.querySelectorAll('div, span, p.myClass')

Check how it works https://codepen.io/rundezv/pen/gbrbWJL

<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>

$('div, span, p.myClass')
// =>
// [
//   <div>div</div>,
//   <p class="myClass">p class="myClass"</p>,
//   <span>span</span>,
// ]

document.querySelectorAll('div, span, p.myClass')

`$(':first-child')`

Selects every element that is the first child among its siblings.

$('div span:first-child')

document.querySelectorAll('div span:first-child')

Check how it works https://codepen.io/rundezv/pen/YPqKGyR

<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph</span>
</div>

$('div span:first-child')
// =>
// [
//   <span>John,</span>,
//   <span>Glen,</span>,
// ]

document.querySelectorAll('div span:first-child')

`$(':last-child')`

Selects every element that is the last child among its siblings.

$('div span:last-child')

document.querySelectorAll('div span:last-child')

Check how it works https://codepen.io/rundezv/pen/GgZgmNR

<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon,</span>
  <span>Sam</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph,</span>
  <span>David</span>
</div>

$('div span:last-child')
// =>
// [
//   <span>Sam</span>,
//   <span>David</span>,
// ]

document.querySelectorAll('div span:last-child')

`$(':only-child')`

Selects every element that is the only child of its parent.

$('div button:only-child')

document.querySelectorAll('div button:only-child')

Check how it works https://codepen.io/rundezv/pen/MYyjOYW

<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>

<div>
  <button>Sibling!</button>
</div>

<div>
  None
</div>

<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>

<div>
  <button>Sibling!</button>
</div>

$('div button:only-child')
// =>
// [
//   <button>Sibling!</button>,
//   <button>Sibling!</button>,
// ]

document.querySelectorAll('div button:only-child')

`$(':nth-child(n)')`

Selects every element that is the n-th child among its siblings.

$('ul li:nth-child(2)')

document.querySelectorAll('ul li:nth-child(2)')

Check how it works https://codepen.io/rundezv/pen/vEGEdrY

<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
  </ul>
</div>
<div>
  <ul>
    <li>Sam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul>
</div>

$('ul li:nth-child(2)')
// =>
// [
//   <li>Karl</li>,
//   <li>Tane</li>,
// ]

document.querySelectorAll('ul li:nth-child(2)')

`$(':nth-last-child(n)')`

Selects every element that is the n-th child from the end among its siblings.

$('ul li:nth-last-child(2)')

document.querySelectorAll('ul li:nth-last-child(2)')

Check how it works https://codepen.io/rundezv/pen/MYyYVEx

<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Adam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dan</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dave</li>
    <li>Rick</li>
    <li>Timmy</li>
    <li>Gibson</li>
  </ul>
</div>

$('ul li:nth-last-child(2)')
// =>
// [
//   <li>Karl</li>,
//   <li>Timmy</li>,
// ]

document.querySelectorAll('ul li:nth-last-child(2)')

`$(':first-of-type')`

Selects every element that is the first among its siblings of the same type.

$('span:first-of-type')

document.querySelectorAll('span:first-of-type')

Check how it works https://codepen.io/rundezv/pen/wBGwzOo

<div>
  <span>Corey,</span>
  <span>Yehuda,</span>
  <span>Adam,</span>
  <span>Todd</span>
</div>
<div>
  <b>Nobody,</b>
  <span>Jörn,</span>
  <span>Scott,</span>
  <span>Timo</span>
</div>

$('span:first-of-type')
// =>
// [
//   <span>Corey,</span>,
//   <span>Jörn,</span>,
// ]

document.querySelectorAll('span:first-of-type')

`$(':last-of-type')`

Selects every element that is the last among its siblings of the same type.

$('span:last-of-type')

document.querySelectorAll('span:last-of-type')

Check how it works https://codepen.io/rundezv/pen/GgZgmNR

<div>
  <span>Corey,</span>
  <span>Yehuda,</span>
  <span>Adam,</span>
  <span>Todd</span>
</div>
<div>
  <span>Jörn,</span>
  <span>Scott,</span>
  <span>Timo,</span>
  <b>Nobody</b>
</div>

$('span:last-of-type')
// =>
// [
//   <span>Todd</span>,
//   <span>Timo,</span>,
// ]

document.querySelectorAll('span:last-of-type')

`$(':only-of-type')`

Selects every element that is the only one of its type among its siblings.

$('button:only-of-type')

document.querySelectorAll('button:only-of-type')

Check how it works https://codepen.io/rundezv/pen/Kwzgyyp

<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>

<div>
  <button>Sibling!</button>
</div>
<div>
  None
</div>

<div>
  <button>Sibling!</button>
  <span>Sibling!</span>
  <span>Sibling!</span>
</div>

<div>
  <button>Sibling!</button>
</div>

$('button:only-of-type')
// =>
// [
//   <button>Sibling!</button>,
//   <button>Sibling!</button>,
//   <button>Sibling!</button>,
// ]

document.querySelectorAll('button:only-of-type')

`$(':nth-of-type(n)')`

Selects every element that is the n-th of its type among its siblings.

$('span:nth-of-type(2)')

document.querySelectorAll('span:nth-of-type(2)')

Check how it works https://codepen.io/rundezv/pen/NPNPMZq

<div>
  <span>John</span>,
  <b>Kim</b>,
  <span>Adam</span>,
  <b>Rafael</b>,
  <span>Oleg</span>
</div>
<div>
  <b>Dave</b>,
  <span>Ann</span>
</div>
<div>
  <i><span>Maurice</span></i>,
  <span>Richard</span>,
  <span>Ralph</span>,
  <span>Jason</span>
</div>

$('span:nth-of-type(2)')
// =>
// [
//   <span>Adam</span>,
//   <span>Ralph</span>,
// ]

document.querySelectorAll('span:nth-of-type(2)')

`$(':nth-last-of-type(n)')`

Selects every element that is the n-th of its type from the end among its siblings.

$('ul li:nth-last-of-type(2)')

document.querySelectorAll('ul li:nth-last-of-type(2)')

Check how it works https://codepen.io/rundezv/pen/qEZEYNj

<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Adam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dan</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dave</li>
    <li>Rick</li>
    <li>Timmy</li>
    <li>Gibson</li>
  </ul>
</div>

$('ul li:nth-last-of-type(2)')
// =>
// [
//   <li>Karl</li>,
//   <li>Timmy</li>,
// ]

document.querySelectorAll('ul li:nth-last-of-type(2)')

`$(':not()')`

Selects all elements that do not match the specified selector.

$('input:not(:checked) + span')

document.querySelectorAll('input:not(:checked) + span')

Check how it works https://codepen.io/rundezv/pen/azNzEYy

<div>
  <input type="checkbox" name="a">
  <span>Mary</span>
</div>
<div>
  <input type="checkbox" name="b">
  <span>lcm</span>
</div>
<div>
  <input type="checkbox" name="c" checked="checked">
  <span>Peter</span>
</div>

$('input:not(:checked) + span')
// =>
// [
//   <span>Mary</span>,
//   <span>lcm</span>,
// ]

document.querySelectorAll('input:not(:checked) + span')

`$(':has()')`

Selects all elements that contain at least one element matching the specified selector.

$('div:has(p)')

document.querySelectorAll('div:has(p)')

Check how it works https://codepen.io/rundezv/pen/ZYWzXxw

<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>

$('div:has(p)')
// =>
// [
//   <div><p>Hello in a paragraph</p></div>,
// ]

document.querySelectorAll('div:has(p)')

`$(':lang()')`

Selects all descendant elements that match the specified language.

$('div:lang(es-es)')

document.querySelectorAll('div:lang(es-es)')

Check how it works https://codepen.io/rundezv/pen/MYyYmYo

<h3>USA</h3>
<div lang="en-us">red
  <div>white
    <div>and blue</div>
  </div>
</div>
<h3>España</h3>
<div lang="es-es">rojo
  <div>amarillo
    <div>y rojo</div>
  </div>
</div>

$('div:lang(es-es)')
// =>
// [
//   <div lang="es-es">rojo
//     <div>amarillo
//       <div>y rojo</div>
//     </div>
//   </div>,
//   <div>amarillo
//     <div>y rojo</div>
//   </div>,
//   <div>y rojo</div>,
// ]

document.querySelectorAll('div:lang(es-es)')

`$(':contains()')`

Selects all elements that contain the specified text.

$('div:contains(John)')

Array.from(document.querySelectorAll('div')).filter(div => {
  return div.textContent.includes('John')
})

`$(':empty')`

Selects all elements that have no child nodes (including text nodes).

$('td:empty')

Array.from(document.querySelectorAll('td')).filter(td => {
  return !Array.from(td.childNodes).some(node => node.nodeType < 6)
})

Check how it works https://codepen.io/rundezv/pen/MYygyxd

<table border="1">
  <tr><td>TD #0</td><td></td></tr>
  <tr><td>TD #2</td><td></td></tr>
  <tr><td></td><td>TD#5</td></tr>
</table>

$('td:empty')
// =>
// [
//   <td></td>,
//   <td></td>,
//   <td></td>,
// ]

Array.from(document.querySelectorAll('td')).filter(td => {
  return !Array.from(td.childNodes).some(node => node.nodeType < 6)
})

`$(':parent')`

Selects all elements that have one or more child nodes (

$('td:parent')

Array.from(document.querySelectorAll('td')).filter(td => {
  return td.childNodes.length > 0
})

Check how it works https://codepen.io/rundezv/pen/MYygyxd

<table border="1">
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

$('td:parent')
// =>
// [
//   <td>Value 1</td>,
//   <td>Value 2</td>,
// ]

Array.from(document.querySelectorAll('td')).filter(td => {
  return td.childNodes.length > 0
})

`$(':header')`

Selects all heading elements.

$(':header')

document.querySelectorAll('h1, h2, h3, h4, h5, h6')

Check how it works https://codepen.io/rundezv/pen/ogxvGMb

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

$(':header')
// =>
// [
//   <h1>Header 1</h1>,
//   <h2>Header 2</h2>,
// ]

document.querySelectorAll('h1, h2, h3, h4, h5, h6')

`$(':button')`

Selects all <button> elements.

$(':button')

document.querySelectorAll('button, input[type="button"]')

Check how it works https://codepen.io/rundezv/pen/MYKNaww

<form>
  <fieldset>
    <input type="button" value="Input Button">
    <input type="checkbox">

    <input type="file">
    <input type="hidden">
    <input type="image">

    <input type="password">
    <input type="radio">
    <input type="reset">

    <input type="submit">
    <input type="text">
    <select>
      <option>Option</option>
    </select>

    <textarea></textarea>
    <button>Button</button>
  </fieldset>
</form>

$(':button')
// =>
// [
//   <input type="button" value="Input Button">,
//   <button>Button</button>,
// ]

document.querySelectorAll('button, input[type="button"]')

`$(':text')`

Selects all <input> elements whose type attribute is text, or that have no type attribute specified.

$(':text')

Array.from(document.querySelectorAll('input')).filter(input => {
  return (input.getAttribute('type') ?? 'text').toLowerCase() === 'text'
})

Check how it works https://codepen.io/rundezv/pen/KwzaVyg

<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <input type>
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>

$(':text')
// =>
// [
//   <input type="text">,
// ]

Array.from(document.querySelectorAll('input')).filter(input => {
  return (input.getAttribute('type') ?? 'text').toLowerCase() === 'text'
})

`$(':checkbox')`

Selects all <input> elements whose type attribute is checkbox.

$(':checkbox')

document.querySelectorAll('[type="checkbox"]')

Check how it works https://codepen.io/rundezv/pen/jEWgxXa

<form>
  <input type="button" value="Input Button">
  <input type="checkbox">

  <input type="checkbox">
  <input type="file">
  <input type="hidden">

  <input type="image">
  <input type="password">
  <input type="radio">

  <input type="reset">
  <input type="submit">
  <input type="text">

  <select>
    <option>Option</option>
  </select>

  <textarea></textarea>
  <button>Button</button>
</form>

$(':checkbox')
// =>
// [
//   <input type="checkbox">,
//   <input type="checkbox">,
// ]

document.querySelectorAll('[type="checkbox"]')

`$(':radio')`

Selects all <input> elements whose type attribute is radio.

$('form input:radio')

document.querySelectorAll('form input[type="radio"]')

Check how it works https://codepen.io/rundezv/pen/xbVRgeP

<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio" name="asdf">
  <input type="radio" name="asdf">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>

$('form input:radio')
// =>
// [
//   <input type="radio" name="asdf">,
//   <input type="radio" name="asdf">,
// ]

document.querySelectorAll('form input[type="radio"]')

`$(':password')`

Selects all <input> elements whose type attribute is password.

$('input:password')

document.querySelectorAll('input[type="password"]')

Check how it works https://codepen.io/rundezv/pen/zxqoNLN

<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>

$('input:password')
// =>
// [
//   <input type="password">,
// ]

document.querySelectorAll('input[type="password"]')

`$(':image')`

Selects all <input> elements whose type attribute is image.

$(':image')

document.querySelectorAll('[type="image"]')

Check how it works https://codepen.io/rundezv/pen/KwzwaoJ

<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>

$(':image')
// =>
// [
//   <input type="image">,
// ]

document.querySelectorAll('[type="image"]')

`$(':file')`

Selects all <input> elements whose type attribute is file.

$('input:file')

document.querySelectorAll('input[type="file"]')

Check how it works https://codepen.io/rundezv/pen/YPqKGyR

<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select><option>Option</option></select>
  <textarea></textarea>
  <button>Button</button>
</form>

$('input:file')
// =>
// [
//   <input type="file">,
// ]

document.querySelectorAll('input[type="file"]')

`$(':input')`

Selects all <input>, <select>, <textarea>, and <button> elements.

$(':input')

document.querySelectorAll('input, select, textarea, button')

Check how it works https://codepen.io/rundezv/pen/LENEWJm

<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>

$(':input')
// =>
// [
//   <input type="button" value="Input Button">,
//   <input type="checkbox">,
//   <input type="file">,
//   <input type="hidden">,
//   <input type="image">,
//   <input type="password">,
//   <input type="radio">,
//   <input type="reset">,
//   <input type="submit">,
//   <input type="text">,
//   <select>
//     <option>Option</option>
//   </select>,
//   <textarea></textarea>,
//   <button>Button</button>,
// ]

document.querySelectorAll('input, select, textarea, button')

`$(':submit')`

Selects all elements whose type attribute is submit, as well as all <button> elements inside a <form> whose type attribute is not explicitly set to button.

$(':submit')

document.querySelectorAll('[type="submit"], form button:not([type="button"])')

Check how it works https://codepen.io/rundezv/pen/YPqNyKN

<form>
<table id="exampleTable" border="1" cellpadding="10" align="center">
  <tr>
    <th>
      Element Type
    </th>
    <th>
      Element
    </th>
  </tr>
  <tr>
    <td>
      <input type="button" value="Input Button">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
  </tr>
  <tr>
    <td>
      <input type="file">
    </td>
  </tr>
  <tr>
    <td>
      <input type="hidden">
    </td>
  </tr>
  <tr>
    <td>
      <input type="image">
    </td>
  </tr>
  <tr>
    <td>
      <input type="password">
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio">
    </td>
  </tr>
  <tr>
    <td>
      <input type="reset">
    </td>
  </tr>
  <tr>
    <td>
      <input type="submit">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text">
    </td>
  </tr>
  <tr>
    <td>
      <select><option>Option</option></select>
    </td>
  </tr>
  <tr>
    <td>
      <textarea></textarea>
    </td>
  </tr>
  <tr>
    <td>
      <button type>Button</button>
      <button>Button</button>
    </td>
  </tr>
  <tr>
    <td>
      <button type="submit">Button type="submit"</button>
    </td>
  </tr>
</table>
</form>

$(':submit')
// =>
// [
//   <input type="submit">,
//   <button type>Button</button>,
//   <button>Button</button>,
//   <button type="submit">Button type="submit"</button>,
// ]

document.querySelectorAll('[type="submit"], form button:not([type="button"])')

`$(':reset')`

Selects all <input> elements whose type attribute is reset.

$('input:reset')

document.querySelectorAll('input[type="reset"]')

Check how it works https://codepen.io/rundezv/pen/wBGoJMv

<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>

$('input:reset')
// =>
// [
//   <input type="reset">,
// ]

document.querySelectorAll('input[type="reset"]')

`$(':hidden')`

Selects all elements that are hidden.

$('body :hidden')

Array.from(document.querySelectorAll('body *')).filter(node => {
  return node.offsetParent === null && node.getClientRects().length === 0
})

Check how it works https://codepen.io/rundezv/pen/GgZRYXj

<span style="position: fixed;"></span>
<div></div>
<div style="display: none;">Hider!</div>
<div></div>
<div></div>
<form>
  <input type="hidden">
  <input type="hidden">
  <input type="hidden">
</form>

$('body :hidden')
// =>
// [
//   <div style="display: none;">Hider!</div>,
//   <input type="hidden">,
//   <input type="hidden">,
//   <input type="hidden">,
// ]

Array.from(document.querySelectorAll('body *')).filter(node => {
  return node.offsetParent === null && node.getClientRects().length === 0
})

`$(':visible')`

Selects all elements that are visible.

$('div:visible')

Array.from(document.querySelectorAll('div')).filter(div => {
  return div.getClientRects().length > 0
})

Check how it works https://codepen.io/rundezv/pen/bNpgpBW

<div style="position: fixed;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>

$('div:visible')
// =>
// [
//   <div style="position: fixed;"></div>,
//   <div></div>,
//   <div></div>,
// ]

Array.from(document.querySelectorAll('div')).filter(div => {
  return div.getClientRects().length > 0
})

`$(':animated')`

`$(':focus')`

Selects the element that is currently focused.

$(':focus')

$('input:focus')

document.activeElement

document.querySelector('input:focus')

Check how it works https://codepen.io/rundezv/pen/zxqOodQ

<div id="content">
  <input tabIndex="1">
  <input tabIndex="2">
  <select tabIndex="3">
    <option>select menu</option>
  </select>
  <div tabIndex="4">
    a div
  </div>
</div>

$(':focus')

$('input:focus')

document.activeElement

document.querySelector('input:focus')

`$(':enabled')`

Selects all enabled elements.

$('input:enabled')

document.querySelectorAll('input:enabled')

Check how it works https://codepen.io/rundezv/pen/pvyzbKJ

<form>
  <input name="email" disabled="disabled">
  <input name="id">
</form>

$('input:enabled')
// =>
// [
//   <input name="id">,
// ]

document.querySelectorAll('input:enabled')

`$(':disabled')`

Selects all disabled elements.

$('input:disabled')

document.querySelectorAll('input:disabled')

Check how it works https://codepen.io/rundezv/pen/gbrYrXW

<form>
  <input name="email" disabled="disabled">
  <input name="id">
</form>

$('input:disabled')
// =>
// [
//   <input name="email" disabled="disabled">,
// ]

document.querySelectorAll('input:disabled')

`$(':checked')`

Selects all elements that are checked or selected.

$(':checked')

document.querySelectorAll(':checked')

Check how it works https://codepen.io/rundezv/pen/ogbKdOv

<form>
  <p>
    <input type="checkbox" name="newsletter" value="Hourly" checked="checked">

    <input type="checkbox" name="newsletter" value="Daily">
    <input type="checkbox" name="newsletter" value="Weekly">

    <input type="checkbox" name="newsletter" value="Monthly" checked>
    <input type="checkbox" name="newsletter" value="Yearly">
  </p>
</form>

$(':checked')
// =>
// [
//   <input type="checkbox" name="newsletter" value="Hourly" checked="checked">,
//   <input type="checkbox" name="newsletter" value="Monthly" checked>,
// ]

document.querySelectorAll(':checked')

`$(':selected')`

Selects all elements that are selected.

$('select option:selected')

document.querySelectorAll('select option:checked')

Check how it works https://codepen.io/rundezv/pen/QwNdbgO

<select name="garden" multiple="multiple">
  <option>Flowers</option>
  <option selected="selected">Shrubs</option>
  <option>Trees</option>
  <option selected="selected">Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>

$('select option:selected')
// =>
// [
//   <option selected="selected">Shrubs</option>,
//   <option selected="selected">Bushes</option>,
// ]

document.querySelectorAll('select option:checked')

DEV Community: rundezv

[Without jQuery] Rewriting in JavaScript Selectors Edition

$('*')

$(':root')

$('div')

$('#id')

$('.class')

$('prev + next')

$('prev ~ siblings')

$('parent child')

$('parent > child')

$('[name]')

$('[name="value"]')

$('[name!="name"]')

$('[name~="value"]')

$('[name|="value"]')

$('[name^="value"]')

$('[name$="value"]')

$('[name*="value"]')

$('[name1="value1"][name2="value2"]')

$('selector1, selector2, selectorN')

$(':first-child')

$(':last-child')

$(':only-child')

$(':nth-child(n)')

$(':nth-last-child(n)')

$(':first-of-type')

$(':last-of-type')

$(':only-of-type')

$(':nth-of-type(n)')

$(':nth-last-of-type(n)')

$(':not()')

$(':has()')

$(':lang()')

$(':contains()')

$(':empty')

$(':parent')

$(':header')

$(':button')

$(':text')

$(':checkbox')

$(':radio')

$(':password')

$(':image')

$(':file')

$(':input')

$(':submit')

$(':reset')

$(':hidden')

$(':visible')

$(':animated')

$(':focus')

$(':enabled')

$(':disabled')

$(':checked')

$(':selected')