Using JavaScript off-DOM is an efficient way to manipulate web page content. By “work off-DOM,” I mean “work inside of the browser memory instead of on a web page.”

A simple web search will display lots of good reasons for doing off-DOM JS. In my case, I was working on a personal project where it looked like I would need to do it so I could set my page up in a specific way. I may not need to do this anymore but still gained knowledge on doing off-DOM JavaScript and want to share what I learned.

The spark for my learning this stuff was Paul Irish’s excellent screencast, “HTML5, CSS3, and DOM Performance”, recorded a little over a year ago from this post. I also read a ton of articles and blog posts on the subject and, of course, wrote some code to test things out. I share all this stuff in this three-part screencast tutorial.

I do the following in this screencast:

  • create a document fragment off-DOM with createDocumentFragment().
  • create a bunch of web page elements off-DOM with createElement() and createTextNode().
  • arrange them the way I want to arrange them with appendChild(), innerHTML and the jQuery .attr() method.
  • load them into a document fragment with appendChild().
  • load the document fragment onto the web page with, yet again, appendChild().
  • duplicate the content that was just loaded on the page with cloneNode().
  • adjust the duplicate content with the JavaScript stuff just discussed as well as childNodes[].
  • load the duplicate content onto a web page with, one more time, appendChild().

While certain aspects of this tutorial are for the beginner, I am assuming that you understand JavaScript variables and arrays…arrays especially. Please read up on them over at MDN if you don’t…variables link here, arrays link here.

I used a slide deck in this screencast, which has a boatload of useful links at the end…view it here.

And, of course, the tutorial’s final code on GitHub is here.


Part 1

Part 2

Part 3

Leave a Reply

Your email address will not be published. Required fields are marked *