Sitemap

Member-only story

Notes on JavaScript DOM Tree

Observations of tools and practices for frontend development

--

Another story on web development with written form the perspective of a native GUI developer. This story will focus more on JavaScript and DOM tree manipulation in general. How do we use events, queries, templates etc.

I have already covered more of the backend development side in previous articles as well as the HTTP protocol:

Frontend Development HTML, CSS and Chrome

This article will instead focus more on the frontend part, but will mostly be in note form.

Nodes vs Elements

In the DOM model a Node is an abstract type. You cannot actually make Node objects. What you think of as HTML tags are of type Element. Less obvious is perhaps the the text itself inside Elements is actually a Node subtype named Text. Node has all the methods for moving up and around the DOM tree.

When we implement our own element we usually subclass HTMLElement, which is a subclass of Element.

append VS appendChild

--

--

Erik Engheim
Erik Engheim

Written by Erik Engheim

Geek dad, living in Oslo, Norway with passion for UX, Julia programming, science, teaching, reading and writing.