///////////////////1. What is the DOM?

// When looking at Javascript resources, you may run into the term DOM or Document Object Model. So What is the DOM?

//We know that Javascript is an object-based language. We can create objects, and also use preprogrammed objects, for example the console object, the document object, the date object etc. 

//The Document Object Model (DOM) is a structured representation of an HTML document, consisting of objects that represent elements such as the document itself, its elements (e.g., images, links, forms), and their attributes. Objects like the window and document objects are part of the DOM, which allows for dynamic interaction with the webpage's content. However, objects like Date and console are not part of the DOM; they belong to the broader JavaScript environment and are used for general programming tasks outside of document manipulation.

// The DOM is often represented by a tree diagram, because there is a heirarchical order to the objects. View the image embedded in this pen. 

//In the image, we see a few of the DOM objects in heirarchical order (note, this is only a selection!). 
//We can see that the window object is the parent of the document oject, which we know from window.document.body
//We can see that the document object has various children, including form, image, and link objects, and we can see that the form object has many children. We will learn more about the form object later in this module!
//This is sometimes called containership: the idea that objects are contained within other objects. 

//With the Document object model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. 

///////////////Commonly used objects 

//While we already know some objects, we will now explore a few more commonly used ones that might be useful. 

//////1.1 The window object 

// The window object is the global object in the browser environment. It represents the browser window or tab in which a web page is loaded. Every JavaScript object, variable, or function defined globally becomes a property of the window object. 

//Here is a list of window object properties and methods: https://www.w3schools.com/jsref/obj_window.asp 

//One example is the window.open() method, which opens a new window. 

//Here is the syntax:

//window.open("URL", "name", "Feature List")

//We can open a window just using the URL of the new window, like this:

let button = document.getElementById("openWindow");
button.addEventListener("click", openWindow);

function openWindow() {
  window.open("https://www.w3schools.com/jsref/obj_window.asp");
}

//This might open in a new window or tab depending on browser. 

//The name property could be something like:

// _blank: URL is loaded into a new window, or tab. This is the default
// _parent: URL is loaded into the parent frame
// _self: URL replaces the current page
// The name of the window (does not specify the title of the window)

//for example:

let button1 = document.getElementById("openWindow1");
button1.addEventListener("click", openWindow1);

function openWindow1() {
  window.open("https://www.w3schools.com/jsref/obj_window.asp", "_parent");
}

let button2 = document.getElementById("openWindow2");
button2.addEventListener("click", openWindow2);

function openWindow2() {
  window.open("https://www.w3schools.com/jsref/obj_window.asp", "_self");
}

//The self example will not work in codepen becuase of its various protocols! 

//We can provide various features which specify information about the new window/tab. 

//Example: if we set the feature fullscreen to fullscreen=yes or fullscreen=1, the new window will be in fullscreen. The default is fullscreen=no or fullscreen=0. 

let button3 = document.getElementById("openWindow3");
button3.addEventListener("click", openWindow3);

function openWindow3() {
  window.open("https://www.w3schools.com/jsref/met_win_open.asp", "_blank", "fullscreen=yes");
}

//See more features here: Here is a list: https://www.w3schools.com/jsref/met_win_open.asp

//////1.2 The document object

//We already know a bunch of document object methods, such as document.getElementById(), document.write(), document.createElement() etc. The document object has other properties and methods that you might find useful, for example the lastModified property:

//alert("This webpage was last modified on " + document.lastModified)

//See more here: https://www.w3schools.com/Jsref/dom_obj_document.asp

//////1.3 The image object 

//We know that the image object has various properties including src. A functionality of the image object that you might find useful is that we can access images in our HTML using array notation. 

//We have two images on this webpage, the image of the DOM heirarchy, and an image of pandas. If want to access the first image, we could do so like this:

//document.images[0].style.width = "25%"

//and we could access the second image like this:

//document.images[1].style.border = "5px red dashed"

//////1.4 The history object 

//When you click the back and forward buttons in your browser, the history object is being used to keep track of previous visited URLs. You can use the history object to program your own buttons on your webpages, for example:

//history.length: outputs the number of URLs currently in the history list
//history.back(): sends the user to the previous URL in the history list
//history.forward(): sends the user to the subsequent URL in the history list
//history.go(x): if x is a positive number, the user will be sent forward that number of webpages. If its negative, they will be send back that number. 

//////1.5 The location object

// The location object represents the URL (web address) of the current webpage. You can use it to redirect the user to a new page or reload the current one.

// For example:

// location.href gives the full URL.
// location.reload() reloads the current page.
// location.replace() changes the page without saving the current one in history.

//////1.6 The navigator object

// The navigator object provides information about the user's browser and device. It allows you to access details like the browser's name, version, whether cookies are enabled, the user's preferred language, and more. It's often used to check compatibility or gather environment information.

// Some properties:

// navigator.userAgent: Returns a string with details about the browser.
// navigator.language: Shows the user's preferred language.
// navigator.geolocation: Gives access to the user's geographic location (with permission).

////////////////2. The Virtual DOM

// The Virtual DOM (VDOM) is a lightweight, in-memory representation of the real DOM used by certain JavaScript libraries and frameworks (like React, which we will learn more about later). Instead of directly manipulating the actual DOM, changes are made to the virtual DOM, which then calculates the minimal changes necessary to update the real DOM. This makes updates faster and more efficient.

// How it Works:
// The virtual DOM creates a copy of the real DOM in memory.
// When a change occurs, the virtual DOM is updated.
// The framework compares the updated virtual DOM to the previous version (a process called diffing).
// Only the differences (the "diff") are applied to the real DOM, making the update more efficient.

// Advantages of the Virtual DOM:
// Performance: The virtual DOM reduces the number of direct manipulations to the real DOM, which can be slow. By batching and optimizing these changes, it improves performance, especially in complex UIs.
// Efficient Updates: Only parts of the real DOM that need updating are modified, rather than re-rendering the entire document.
// Abstraction: Developers don’t need to manually handle direct DOM manipulations, which simplifies development and reduces bugs.
// Cross-platform Support: The virtual DOM can be used to create user interfaces in multiple environments, including mobile and desktop apps (e.g., React Native).

// Disadvantages of the Virtual DOM:
// Overhead: Creating and diffing the virtual DOM introduces a layer of overhead. In simple or small-scale applications, this extra step might not offer significant benefits and could even slow things down.
// Learning Curve: Using libraries that depend on the virtual DOM (like React) may require learning new concepts, like components, state management, and the diffing process.
// Not a Silver Bullet: While the virtual DOM optimizes many updates, very complex operations or frequent updates may still have performance bottlenecks, especially with very large data sets or highly interactive components.
// Overall, the virtual DOM helps make UI updates faster and more manageable, particularly in modern web applications, but it comes with some trade-offs in complexity and potential overhead.