cheatsheets/dom.md

title	category	layout
DOM vs. jQuery	JavaScript libraries	2017/sheet

Selectors

{: .-versus.-no-hide}

Selectors

$('.selector')

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

Iteration

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

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

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

The result of some DOM operations return NodeLists (eg, querySelectorAll, children, and others). These can't be iterated via .forEach() until you convert them to arrays using Array.from().

Classes

{: .-versus}

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

DOM ready

{: .-versus}

Document ready

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

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

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

The dom-loaded npm package takes care of this for you.

Attributes

{: .-versus}

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

{: .-versus}

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

{: .-versus}

Children

$(el).children()

el.children

Parent

$(el).parent()

el.parentNode

Siblings

$(el).next()
$(el).previous()

el.nextSibling
el.previousSibling

Closest match

$(el).closest('div')

el.closest('div')

Match check

$(el).is(':checked')

el.matches(':checked')

Finding

$(el).find('button')

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

Inputs

{: .-versus}

Blur

$(el).blur()

el.blur()

Focus

$(el).focus()

el.focus()

DOM operations

{: .-versus}

Remove

$(el).remove()

el.parentNode.removeChild(el)

Append

$(el).append(newEl)

el.appendChild(newEl)

Before

$(refEl).before(newEl)

refEl.parentNode.insertBefore(newEl, refEl)

After

$(refEl).after(newEl)

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

If refEl is at the end, refEl.nextSibling will be null. The behavior of insertBefore(el, null) is the same as appendChild(el).

See: Node.insertBefore (developer.mozilla.org)

Before/after (HTML)

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

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

Events

{: .-versus}

Attach event

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

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

See: EventTarget.addEventListener (developer.mozilla.org)

Trigger

$(el).trigger('click')

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

See: document.createEvent (developer.mozilla.org)

HTML

{: .-versus}

Getting HTML

$(el).html()
// → "<div>hello</div>"

el.innerHTML
// → "<div>hello</div>"

Setting HTML

$(el).html('<span>ok</span>')

el.innerHTML = '<span>ok</span>'

See: Element.innerHTML (developer.mozilla.org)

Getting text

$(el).text()

el.textContent

Setting text

$(el).text('hello')

el.textContent = 'hello'

Creating elements

{: .-versus}

Create element

div = $('<div>')
div = $.parseHTML('<div>')

div = document.createElement('div')

With class name

div = $('<div class="hello">')
div = $.parseHTML('<div class="hello">')

div = document.createElement('div')
div.className = 'hello'