Búsqueda de sitios web

typescript - La propiedad 'xxx' no existe en el tipo 'ChildNode' al acceder a la propiedad de nextSibling

demostración de parque infantil

código :

document.querySelectorAll('a').forEach(item => {
  console.log(item.nextSibling?.tagName);
})

/* 
<span>1</span>
text node
<span>2</span>
<script>
document.querySelector('span').nextSibling; // #text
document.querySelector('span').nextSibling.nextSibling; // <span>2<span>
</script>
 */

No estoy usando nextElementSibling aquí porque también quiero iterar sobre nodos de texto

Respuesta #1

Los comentarios bajo tu pregunta señalan correctamente que ChildNode puede ser algo diferente de un elemento HTML, por lo que una propiedad como tagName no funciona por defecto.

Los comentarios sugieren hacer un casting a HTMLElement, pero es mejor usar instanceof:

document.querySelectorAll('a').forEach(item => {
  if (item.nextSibling instanceof HTMLElement) {
    console.log(item.nextSibling?.tagName);
  }
})

Esto es seguro en cuanto al tipo, y deja la puerta abierta para trabajar con nodos de texto si lo deseas.

Aquí hay otra manera de hacerlo, aunque creo que es menos limpio:

document.querySelectorAll('a').forEach(item => {
  const nextSibling = item.nextSibling;
  if (nextSibling && "tagName" in nextSibling) {
    console.log(nextSibling.tagName);
  }
})

Si quisieras filtrar todo excepto los elementos, podrías usar un guardia de tipo:

function isHTMLElement(node: Node): node is HTMLElement {
  return node instanceof HTMLElement;
}

Array.from(document.querySelectorAll('a')).filter(isHTMLElement).forEach(item => console.log(item.tagName))

Artículos relacionados