Navegando entre os elementos com JavaScript DOM

Parents - Pais

.parentNode / .parentElement

Ambos pegam o pai do elemento especificado.

let father = son.parentNode // <father>
let father = son.parentElement // <father>

/*
  <father>
    <son>Content</son>
  </father>
*/

Children - Filhos

.childNodes / .children

Os dois mostram os filhos de um elemento pai. Mas de formas diferentes:

• NodeList: Pega os espaços da idetação do código
• HTMLCollection: Não pega os espaços da idetação (recomendado)

  // NodeList
  const allChildren = father.childNodes 
  const h1 = father.childNodes[1]
  const p = father.childNodes[3]

  // HTMLCollection
  const allChildren = father.children
  const h1 = father.children[0]
  const p = father.children[1]

.childElementCount

Ele mostra a quantidade de filhos que existem dentro de um elemento.

  // const allChildrenNum = father.childNodes.length
  const allChildrenNum = father.childElementCount

.firstChild / .firstElementChild

Os dois mostram os primeiros filhos de um elemento pai. E eles também têm tais propriedades:

• NodeList: Pega os espaços da idetação do código
• HTMLCollection: Não pega os espaços da idetação (recomendado)

  // NodeList
  const h1 = father.firstChild // text (se tiver idetação)

  // HTMLCollection
  const h1 = father.firstElementChild // <h1> primeiro ELEMENTO

.lastChild / .lastElementChild

Os dois mostram os último filhos de um elemento pai. E têm NodeList e HTMLCollection:

  // NodeList
  const h1 = father.lastChild // text (se tiver idetação)

  // HTMLCollection
  const h1 = father.lastElementChild // <a> último ELEMENTO

.remove()

Basicamente, remove o elemento.

  father.remove()

Siblings - Irmãos

.nextSibling / .nextElementSibling

Eles pegam o elemento irmão, ou seja, o próximo elemento.

  // NodeList 
  const nextElement = header.nextSibling // text (se tiver idetação)

  // HTMLCollection
  const nextElement = header.nextElementSibling // pega o próximo ELEMENTO

.previousSibling / .previousElementsSibling

Ambos pegam o elemento irmão anterior:

  // NodeList
  const previous = footer.previousSibling // text (se tiver idetação)

  // HTMLCollection
  const previous = footer.previousElementSibling // pega o ELEMENTO anterior