DEV Community

rundezv
rundezv

Posted on

[Without jQuery] Rewriting in JavaScript Selectors Edition

#jquery #javascript #frontend #webdev

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.

$('*')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('*')
Enter fullscreen mode Exit fullscreen mode

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

$(':root')

Selects the root element of the document.

$(':root')
Enter fullscreen mode Exit fullscreen mode 
document.querySelector(':root')
Enter fullscreen mode Exit fullscreen mode

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

$('div')

Selects all elements that match the specified tag name.

$('div')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div')
Enter fullscreen mode Exit fullscreen mode

Check how it works https://codepen.io/rundezv/pen/gbrYrXW
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
Enter fullscreen mode Exit fullscreen mode 
$('div')
// =>
// [
//   <div>DIV1</div>,
//   <div>DIV2</div>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div')
Enter fullscreen mode Exit fullscreen mode

$('#id')

Selects the element whose id attribute matches the specified value.

$('#myDiv')
Enter fullscreen mode Exit fullscreen mode 
document.querySelector('#myDiv')
Enter fullscreen mode Exit fullscreen mode

Check how it works https://codepen.io/rundezv/pen/gbrOZOB
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
Enter fullscreen mode Exit fullscreen mode 
$('#myDiv')
// => <div id="myDiv">id="myDiv"</div>
Enter fullscreen mode Exit fullscreen mode 
document.querySelector('#myDiv')
Enter fullscreen mode Exit fullscreen mode

$('.class')

Selects all elements whose class name matches the specified class.

$('.myClass')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('.myClass')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('.myClass')
// =>
// [
//   <div class="myClass">div class="myClass"</div>,
//   <span class="myClass">span class="myClass"</span>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('.myClass')
Enter fullscreen mode Exit fullscreen mode

$('prev + next')

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

$('label + input')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('label + input')
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode 
$('label + input')
// =>
// [
//   <input name="name" id="name">,
//   <input name="newsletter" id="newsletter">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('label + input')
Enter fullscreen mode Exit fullscreen mode

$('prev ~ siblings')

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

$('#prev ~ div')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('#prev ~ div')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('#prev ~ div')
// =>
// [
//   <div>div sibling</div>,
//   <div>div sibling <div id="small">div niece</div></div>,
//   <div>div sibling</div>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('#prev ~ div')
Enter fullscreen mode Exit fullscreen mode

$('parent child')

Selects all descendant elements of the specified parent elements.

$('form input')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('form input')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('form input')
// =>
// [
//   <input name="name" id="name">,
//   <input name="newsletter" id="newsletter">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('form input')
Enter fullscreen mode Exit fullscreen mode

$('parent > child')

Selects all direct child elements of the specified parent elements.

$('ul.topnav > li')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('ul.topnav > li')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('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>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('ul.topnav > li')
Enter fullscreen mode Exit fullscreen mode

$('[name]')

Selects all elements that have the specified attribute.

$('div[id]')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div[id]')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('div[id]')
// =>
// [
//   <div id="hey">with id</div>,
//   <div id="there">has an id</div>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div[id]')
Enter fullscreen mode Exit fullscreen mode

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

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

$('input[value="Hot Fuzz"]')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[value="Hot Fuzz"]')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('input[value="Hot Fuzz"]')
// =>
// [
//   <input type="radio" name="newsletter" value="Hot Fuzz">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[value="Hot Fuzz"]')
Enter fullscreen mode Exit fullscreen mode

$('[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"]')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input:not([name="newsletter"])')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('input[name!="newsletter"]')
// =>
// [
//   <input type="radio" value="Cold Fusion">,
//   <input type="radio" name="accept" value="Evil Plans">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input:not([name="newsletter"])')
Enter fullscreen mode Exit fullscreen mode

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

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

$('input[name~="man"]')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[name~="man"]')
Enter fullscreen mode Exit fullscreen mode

Check how it works https://codepen.io/rundezv/pen/QwyeLVY
<input name="man-news">
<input name="milk man">
<input name="letterman2">
<input name="newmilk">
Enter fullscreen mode Exit fullscreen mode 
$('input[name~="man"]')
// =>
// [
//   <input name="milk man">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[name~="man"]')
Enter fullscreen mode Exit fullscreen mode

$('[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"]')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('a[hreflang|="en"]')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('a[hreflang|="en"]')
// =>
// [
//   <a href="example.html" hreflang="en">Some text</a>,
//   <a href="example.html" hreflang="en-UK">Some other text</a>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('a[hreflang|="en"]')
Enter fullscreen mode Exit fullscreen mode

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

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

$('input[name^="news"]')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[name^="news"]')
Enter fullscreen mode Exit fullscreen mode

Check how it works https://codepen.io/rundezv/pen/LEGwpEj
<input name="newsletter">
<input name="milkman">
<input name="newsboy">
Enter fullscreen mode Exit fullscreen mode 
$('input[name^="news"]')
// =>
// [
//   <input name="newsletter">,
//   <input name="newsboy">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[name^="news"]')
Enter fullscreen mode Exit fullscreen mode

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

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

$('input[name$="letter"]')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[name$="letter"]')
Enter fullscreen mode Exit fullscreen mode

Check how it works https://codepen.io/rundezv/pen/YPwmXbE
<input name="newsletter">
<input name="milkman">
<input name="jobletter">
Enter fullscreen mode Exit fullscreen mode 
$('input[name$="letter"]')
// =>
// [
//   <input name="newsletter">,
//   <input name="jobletter">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[name$="letter"]')
Enter fullscreen mode Exit fullscreen mode

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

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

$('input[name*="man"]')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[name*="man"]')
Enter fullscreen mode Exit fullscreen mode

Check how it works https://codepen.io/rundezv/pen/xbZvKzV
<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">
Enter fullscreen mode Exit fullscreen mode 
$('input[name*="man"]')
// =>
// [
//   <input name="man-news">,
//   <input name="milkman">,
//   <input name="letterman2">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[name*="man"]')
Enter fullscreen mode Exit fullscreen mode

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

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

$('input[id][name$="man"]')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[id][name$="man"]')
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode 
$('input[id][name$="man"]')
// =>
// [
//   <input id="letterman" name="new-letterman">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[id][name$="man"]')
Enter fullscreen mode Exit fullscreen mode

$('selector1, selector2, selectorN')

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

$('div, span, p.myClass')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div, span, p.myClass')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('div, span, p.myClass')
// =>
// [
//   <div>div</div>,
//   <p class="myClass">p class="myClass"</p>,
//   <span>span</span>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div, span, p.myClass')
Enter fullscreen mode Exit fullscreen mode

$(':first-child')

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

$('div span:first-child')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div span:first-child')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('div span:first-child')
// =>
// [
//   <span>John,</span>,
//   <span>Glen,</span>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div span:first-child')
Enter fullscreen mode Exit fullscreen mode

$(':last-child')

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

$('div span:last-child')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div span:last-child')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('div span:last-child')
// =>
// [
//   <span>Sam</span>,
//   <span>David</span>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div span:last-child')
Enter fullscreen mode Exit fullscreen mode

$(':only-child')

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

$('div button:only-child')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div button:only-child')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('div button:only-child')
// =>
// [
//   <button>Sibling!</button>,
//   <button>Sibling!</button>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div button:only-child')
Enter fullscreen mode Exit fullscreen mode

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

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

$('ul li:nth-child(2)')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('ul li:nth-child(2)')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('ul li:nth-child(2)')
// =>
// [
//   <li>Karl</li>,
//   <li>Tane</li>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('ul li:nth-child(2)')
Enter fullscreen mode Exit fullscreen mode

$(':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)')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('ul li:nth-last-child(2)')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('ul li:nth-last-child(2)')
// =>
// [
//   <li>Karl</li>,
//   <li>Timmy</li>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('ul li:nth-last-child(2)')
Enter fullscreen mode Exit fullscreen mode

$(':first-of-type')

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

$('span:first-of-type')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('span:first-of-type')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('span:first-of-type')
// =>
// [
//   <span>Corey,</span>,
//   <span>Jörn,</span>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('span:first-of-type')
Enter fullscreen mode Exit fullscreen mode

$(':last-of-type')

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

$('span:last-of-type')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('span:last-of-type')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('span:last-of-type')
// =>
// [
//   <span>Todd</span>,
//   <span>Timo,</span>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('span:last-of-type')
Enter fullscreen mode Exit fullscreen mode

$(':only-of-type')

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

$('button:only-of-type')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('button:only-of-type')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('button:only-of-type')
// =>
// [
//   <button>Sibling!</button>,
//   <button>Sibling!</button>,
//   <button>Sibling!</button>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('button:only-of-type')
Enter fullscreen mode Exit fullscreen mode

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

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

$('span:nth-of-type(2)')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('span:nth-of-type(2)')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('span:nth-of-type(2)')
// =>
// [
//   <span>Adam</span>,
//   <span>Ralph</span>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('span:nth-of-type(2)')
Enter fullscreen mode Exit fullscreen mode

$(':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)')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('ul li:nth-last-of-type(2)')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('ul li:nth-last-of-type(2)')
// =>
// [
//   <li>Karl</li>,
//   <li>Timmy</li>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('ul li:nth-last-of-type(2)')
Enter fullscreen mode Exit fullscreen mode

$(':not()')

Selects all elements that do not match the specified selector.

$('input:not(:checked) + span')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input:not(:checked) + span')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('input:not(:checked) + span')
// =>
// [
//   <span>Mary</span>,
//   <span>lcm</span>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input:not(:checked) + span')
Enter fullscreen mode Exit fullscreen mode

$(':has()')

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

$('div:has(p)')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div:has(p)')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('div:has(p)')
// =>
// [
//   <div><p>Hello in a paragraph</p></div>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div:has(p)')
Enter fullscreen mode Exit fullscreen mode

$(':lang()')

Selects all descendant elements that match the specified language.

$('div:lang(es-es)')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div:lang(es-es)')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('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>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('div:lang(es-es)')
Enter fullscreen mode Exit fullscreen mode

$(':contains()')

Selects all elements that contain the specified text.

$('div:contains(John)')
Enter fullscreen mode Exit fullscreen mode 
Array.from(document.querySelectorAll('div')).filter(div => {
  return div.textContent.includes('John')
})
Enter fullscreen mode Exit fullscreen mode

a

$(':empty')

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

$('td:empty')
Enter fullscreen mode Exit fullscreen mode 
Array.from(document.querySelectorAll('td')).filter(td => {
  return !Array.from(td.childNodes).some(node => node.nodeType < 6)
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('td:empty')
// =>
// [
//   <td></td>,
//   <td></td>,
//   <td></td>,
// ]
Enter fullscreen mode Exit fullscreen mode 
Array.from(document.querySelectorAll('td')).filter(td => {
  return !Array.from(td.childNodes).some(node => node.nodeType < 6)
})
Enter fullscreen mode Exit fullscreen mode

$(':parent')

Selects all elements that have one or more child nodes (

$('td:parent')
Enter fullscreen mode Exit fullscreen mode 
Array.from(document.querySelectorAll('td')).filter(td => {
  return td.childNodes.length > 0
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('td:parent')
// =>
// [
//   <td>Value 1</td>,
//   <td>Value 2</td>,
// ]
Enter fullscreen mode Exit fullscreen mode 
Array.from(document.querySelectorAll('td')).filter(td => {
  return td.childNodes.length > 0
})
Enter fullscreen mode Exit fullscreen mode

$(':header')

Selects all heading elements.

$(':header')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('h1, h2, h3, h4, h5, h6')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$(':header')
// =>
// [
//   <h1>Header 1</h1>,
//   <h2>Header 2</h2>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('h1, h2, h3, h4, h5, h6')
Enter fullscreen mode Exit fullscreen mode

$(':button')

Selects all <button> elements.

$(':button')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('button, input[type="button"]')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$(':button')
// =>
// [
//   <input type="button" value="Input Button">,
//   <button>Button</button>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('button, input[type="button"]')
Enter fullscreen mode Exit fullscreen mode

$(':text')

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

$(':text')
Enter fullscreen mode Exit fullscreen mode 
Array.from(document.querySelectorAll('input')).filter(input => {
  return (input.getAttribute('type') ?? 'text').toLowerCase() === 'text'
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$(':text')
// =>
// [
//   <input type="text">,
// ]
Enter fullscreen mode Exit fullscreen mode 
Array.from(document.querySelectorAll('input')).filter(input => {
  return (input.getAttribute('type') ?? 'text').toLowerCase() === 'text'
})
Enter fullscreen mode Exit fullscreen mode

$(':checkbox')

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

$(':checkbox')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('[type="checkbox"]')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$(':checkbox')
// =>
// [
//   <input type="checkbox">,
//   <input type="checkbox">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('[type="checkbox"]')
Enter fullscreen mode Exit fullscreen mode

$(':radio')

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

$('form input:radio')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('form input[type="radio"]')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('form input:radio')
// =>
// [
//   <input type="radio" name="asdf">,
//   <input type="radio" name="asdf">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('form input[type="radio"]')
Enter fullscreen mode Exit fullscreen mode

$(':password')

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

$('input:password')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[type="password"]')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('input:password')
// =>
// [
//   <input type="password">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[type="password"]')
Enter fullscreen mode Exit fullscreen mode

$(':image')

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

$(':image')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('[type="image"]')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$(':image')
// =>
// [
//   <input type="image">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('[type="image"]')
Enter fullscreen mode Exit fullscreen mode

$(':file')

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

$('input:file')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[type="file"]')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('input:file')
// =>
// [
//   <input type="file">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[type="file"]')
Enter fullscreen mode Exit fullscreen mode

$(':input')

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

$(':input')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input, select, textarea, button')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$(':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>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input, select, textarea, button')
Enter fullscreen mode Exit fullscreen mode

$(':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')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('[type="submit"], form button:not([type="button"])')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$(':submit')
// =>
// [
//   <input type="submit">,
//   <button type>Button</button>,
//   <button>Button</button>,
//   <button type="submit">Button type="submit"</button>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('[type="submit"], form button:not([type="button"])')
Enter fullscreen mode Exit fullscreen mode

$(':reset')

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

$('input:reset')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[type="reset"]')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('input:reset')
// =>
// [
//   <input type="reset">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input[type="reset"]')
Enter fullscreen mode Exit fullscreen mode

$(':hidden')

Selects all elements that are hidden.

$('body :hidden')
Enter fullscreen mode Exit fullscreen mode 
Array.from(document.querySelectorAll('body *')).filter(node => {
  return node.offsetParent === null && node.getClientRects().length === 0
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('body :hidden')
// =>
// [
//   <div style="display: none;">Hider!</div>,
//   <input type="hidden">,
//   <input type="hidden">,
//   <input type="hidden">,
// ]
Enter fullscreen mode Exit fullscreen mode 
Array.from(document.querySelectorAll('body *')).filter(node => {
  return node.offsetParent === null && node.getClientRects().length === 0
})
Enter fullscreen mode Exit fullscreen mode

$(':visible')

Selects all elements that are visible.

$('div:visible')
Enter fullscreen mode Exit fullscreen mode 
Array.from(document.querySelectorAll('div')).filter(div => {
  return div.getClientRects().length > 0
})
Enter fullscreen mode Exit fullscreen mode

Check how it works https://codepen.io/rundezv/pen/bNpgpBW
<div style="position: fixed;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
Enter fullscreen mode Exit fullscreen mode 
$('div:visible')
// =>
// [
//   <div style="position: fixed;"></div>,
//   <div></div>,
//   <div></div>,
// ]
Enter fullscreen mode Exit fullscreen mode 
Array.from(document.querySelectorAll('div')).filter(div => {
  return div.getClientRects().length > 0
})
Enter fullscreen mode Exit fullscreen mode

$(':animated')

$(':focus')

Selects the element that is currently focused.

$(':focus')

$('input:focus')
Enter fullscreen mode Exit fullscreen mode 
document.activeElement

document.querySelector('input:focus')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$(':focus')

$('input:focus')
Enter fullscreen mode Exit fullscreen mode 
document.activeElement

document.querySelector('input:focus')
Enter fullscreen mode Exit fullscreen mode

$(':enabled')

Selects all enabled elements.

$('input:enabled')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input:enabled')
Enter fullscreen mode Exit fullscreen mode

Check how it works https://codepen.io/rundezv/pen/pvyzbKJ
<form>
  <input name="email" disabled="disabled">
  <input name="id">
</form>
Enter fullscreen mode Exit fullscreen mode 
$('input:enabled')
// =>
// [
//   <input name="id">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input:enabled')
Enter fullscreen mode Exit fullscreen mode

$(':disabled')

Selects all disabled elements.

$('input:disabled')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input:disabled')
Enter fullscreen mode Exit fullscreen mode

Check how it works https://codepen.io/rundezv/pen/gbrYrXW
<form>
  <input name="email" disabled="disabled">
  <input name="id">
</form>
Enter fullscreen mode Exit fullscreen mode 
$('input:disabled')
// =>
// [
//   <input name="email" disabled="disabled">,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('input:disabled')
Enter fullscreen mode Exit fullscreen mode

$(':checked')

Selects all elements that are checked or selected.

$(':checked')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll(':checked')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$(':checked')
// =>
// [
//   <input type="checkbox" name="newsletter" value="Hourly" checked="checked">,
//   <input type="checkbox" name="newsletter" value="Monthly" checked>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll(':checked')
Enter fullscreen mode Exit fullscreen mode

$(':selected')

Selects all elements that are selected.

$('select option:selected')
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('select option:checked')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
$('select option:selected')
// =>
// [
//   <option selected="selected">Shrubs</option>,
//   <option selected="selected">Bushes</option>,
// ]
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('select option:checked')
Enter fullscreen mode Exit fullscreen mode

Top comments (0)