cheatsheets/dom.md

title	category	layout
DOM without jQuery	JavaScript libraries	2017/sheet

Selectors

{: .-one-column}

Selectors

$('.selector')

document.querySelector('.selector')
document.querySelectorAll('.selector')

Iteration

$('.selector').each(function () {
  $(this)
})

const elements = document.querySelectorAll('.selector')

Array.from(elements).forEach(el => {
  ···
})

Classes

{: .-one-column}

Add class

$(el).addClass('expanded')

el.classList.add('expanded')

See: Element.classList

Remove class

$(el).removeClass('expanded')

el.classList.remove('expanded')

Toggle class

el.toggleClass('expanded')

el.classList.toggle('expanded')

Replace class

el.hasClass('expanded')

el.classList.contains('expanded')

Update class

$(el).removeClass('collapsed')
$(el).addClass('expanded')

el.classList.replace('collapsed', 'expanded')

Events

{: .-one-column}

Document ready

$(function () {
  console.log('loaded')
})

function ready (fn) {
  if (document.readyState !== 'loading') {
    fn()
  } else {
    document.addEventListener('DOMContentLoaded', fn)
  }
}

ready(() => {
  console.log('loaded')
})

Attributes

{: .-one-column}

Get attribute

$(el).attr('tabindex')

el.getAttribute('tabindex')

Set attribute

$(el).attr('tabindex', 3)

el.setAttribute('tabindex', 3)

Remove attribute

$(el).removeAttr('hidden')

el.removeAttribute('hidden')

Properties

{: .-one-column}

Get checked

$(el).prop('checked')

el.checked

Set checked

$(el).prop('checked', true)

el.checked = true

Get disabled

$(el).prop('disabled')

el.disabled

Set disabled

$(el).prop('disabled', true)

el.disabled = true

Traversing

{: .-one-column}

Children

$(el).children()

el.children

Parent

$(el).parent()

el.parentNode

Finding

$(el).find('button')

el.querySelector('button')
el.querySelectorAll('button')

Inputs

{: .-one-column}

Blur

$(el).blur()

el.blur()

Focus

$(el).focus()

el.focus()