Cosas de JavaScript: Diferencia entre parentElement y parentNode

Creo que esta es la primera vez que escribo algo sobre JavaScript a nivel del lenguaje. Ya antes había mencionado cosas que había logrado pero no explicaciones al respecto de algo, como sí lo he hecho en Ruby.

JavaScript fue el primer lenguaje de programación web que aprendí(HTML y CSS no son lenguajes de programación). Lo hice a través de un libro gratuito muy popular publicado por Javier Eguiluz: Introducción a JavaScript.

Sin embargo, hay muchas cosas de fondo en JS que desconozco. Tal vez sea la naturaleza multiparadigma del lenguaje o que mi experiencia con el mismo nunca ahondó ya que cuando iba a programar asuntos complejos, pues, generalmente había una librería para ello, ejemplo jQuery para manipulación del DOM.

Así que bueno, esta vez vengo a compartir una cosita que aprendí de este lenguaje tan criticado pero que, al igual que PHP, permite el funcionamiento de miles de negocios en Internet.

parentNode vs parentElement

Pues bien, me encontraba haciendo una prueba técnica para una empresa en la que estaba participando por un puesto como desarrollador. Esta consistía en permitir al usuario resaltar textos en el navegador y que funcionara tal cual como cuando se resalta la página de un libro.

Ejemplo de sitios donde se puede hacer eso es Medium y cuando se lee libros en Google Play Books en el navegador.

La solución desde el lado de backend fue sencilla. Simplemente una tabla highlights que tuviera la llave foránea del usuario y del libro. Así:

highlights
start INT
end INT
paragraph INT
user_id INT
page_id INT
created_at DATE NOT NULL
updated_at DATE NOT NULL
paragraph_id INT

Investigué un poco cómo hacer el tema para obtener la selección que se hace con el cursor en una página web y JavaScript tiene algo para ello. Se trata de window.getSelection() el cual se encuentra documentado en MDN.

Luego de analizar y jugar un poco con ese mecanismo, también probé cómo funcionaba el que ya tenía implementado Medium y así gané un poco más de contexto. Ahora, ¿a qué viene esto al caso? pues ocurre que a medida que iba trabajando necesitaba encontrar algo en el DOM que me permitiera obtener bien el punto de referencia para comenzar y terminar la selección.

En esa búsqueda, me encontré revisando muchos de los nodos del objeto de selección y en un momento di con anchorNode.parentNode con el cual podía obtener el párrafo y así guardarlo en la base de datos también(esto lo emulé de cómo Medium hace su _highlighter_.

Bueno, había varias cosas que revisar para que la implementación funcionara decentemente y a medida que iba probando código nuevo me encontraba con la necesidad de encontrar algún nodo que me diera más información, es así como encontré a parentElement.

Lo más interesante es que cuando se navegan esos dos nodos, los subnodos tienen los mismos nombres, vi muchas veces los mismo valores en uno y otro. Esto me llevó a buscar, solo por curiosidad, la diferencia entre ellos.

Llegué a Stack Overflow y encontré las siguientes respuestas:

• En la mayoría de los casos son lo mismo, excepto cuando parentNode no es un elemento(muy pocos casos), en ese caso parentElement es nulo.

• En Internet Explorer, parentElement es indefinido para elementos SVG, mientras que es definido para parentNode.

Así que ahí está la diferencia. En resumen, ninguna. ¿Por qué existe? Según comentarios en las respuestas a esa pregunta, fue creado inicialmente para funcionar solo en Internet Explorer.

---

Sé que di muchas vueltas pero quería dar algo de contexto antes de arrojar la verdad absoluta 😀

Para la posteridad.