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()

DOM operations

{: .-one-column}

Remove

$(el).remove()

el.parentNode.removeChild(el)

Before

$(refEl).before(newEl)

refEl.parentNode.insertBefore(newEl, refEl)

After

$(refEl).after(newEl)

refEl.parentNode.insertBefore(newEl, refEl.nextSibling)

Before/after (HTML)

$(el).before('<span></span>')
$(el).after('<span></span>')

el.insertAdjacentHTML('beforebegin', '<span></span>')
el.insertAdjacentHTML('afterend', '<span></span>')

Set text

$(el).text('hello')

el.textContent = 'hello'

Get text

$(el).text()

el.textContent

Events

{: .-one-column}

Attach event

$(el).on('click', (event) => {
  ···
})

el.addEventListener('click', (event) => {
})

Trigger

$(el).trigger('click')

var ev = document.createEvent('HTMLEvents')
ev.initEvent('click', true, true)
el.dispatchEvent(ev)