Document Object Model (DOM)

Assignment 3 is basically this: A3-Vanilla from CS349.

This is the tree of nodes.

In general, using innerHTML can be faster for creating large amounts of HTML content compared to individual DOM manipulations, but it does have some drawbacks. One of the main concerns with using innerHTML is that it completely replaces the content of an element, which can lead to unintended consequences such as wiping out event listeners or data associated with existing elements.

Example:

const todoList = document.getElementById('todo-list');
 
// Creating elements using the DOM manipulation API
const listItem = document.createElement('li');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.className = 'todo-checkbox';
const todoText = document.createElement('span');
todoText.textContent = 'Example Todo';
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.className = 'delete-button';
 
// Appending elements to the list item
listItem.appendChild(checkbox);
listItem.appendChild(todoText);
listItem.appendChild(deleteButton);
 
// Appending the list item to the todo list
todoList.appendChild(listItem);

Virtual DOM

The VDOM is a lightweight representation of the UI in memory.

Used for two purposes:

1. “Render” an actual DOM using imperative methods
2. Lightweight abstraction of DOM to compare changes

The VDOM is synchronized with the “real” DOM as follows:

1. Save current VDOM
2. Components and/or application state updates the VDOM
3. A re-render is triggered by framework
4. Compare VDOM before update with VDOM after update
5. Reconcile the difference identifying a set of DOM patches
6. Perform patch operations on real DOM
7. Back to step 1

Hyperscript function calls create a representation of UI tree

• It’s a JavaScript object
• Commonly referred to as a virtual DOM (or just “vdom”)

Used for two purposes:

1. “Render” an actual DOM using imperative methods
2. Lightweight abstraction of DOM to compare changes