knowledge-kitchen / course-notes

class: center, middle # Document Object Model The web browser's understanding of the world --- # Agenda 1. [Overview](#overview) 1. [Cheat sheet](#cheat-sheet) 1. [How to use](#how-to-use) 7. [Conclusions](#conclusions) --- name: overview # Overview The web browsers each create their own internal set of data that represent the contents of the current web page they are displaying. -- As a convenience, the web browsers allow access to these internal values via a set of built-in automatically created JavaScript variables and functions. These are collectively referred to as the Document Object Model (`DOM`). -- Using Javascript you can read from or write to these values to alter how the browser interprets the page. --- # Cheat sheet -- ## Diagram This diagram shows highlights of a contemporary browsers' default DOM: [](../assets/document-object-model/browser-dom-cheat-sheet.png) --- name: how-to-use # How to use the DOM -- ## Concept The DOM is easy to use in [Javascript](./javascript-intro), once you understand its structure. The following examples should give you the idea. --- template: how-to-use ## Changing the title of a web page The following Javascript code will change the title of a web page. Note how we navigate through the DOM by using the built-in variables that the browser has created for each element in the DOM. ```js window.document.title = "Herpetology and Other Amphibial Issues"; ``` This instructs the Javascript code to do the following: - access the browser's built-in '`window`' object - access the '`document`' child object therein - change the value of the '`title`' property to be "`Herpetology and Other Amphibial Issues`" --- template: how-to-use ## Changing the title of a web page (continued) Since everything in the DOM belongs to '`window`', it is already assumed in code and you do not need to explicitly mention it. -- So instead of `window.document.title = "Herp..."`, we can more succinctly write: ```js document.title = "Herpetology and Other Amphibial Issues"; ``` --- template: how-to-use ## Trigger the browser to go to the previous page in its history Let's say you want to trigger the browser to go back one page, like when a user hits the back button in the browser: ```js window.history.back(); ``` -- And since everything in the DOM belongs to the 'window' variable, you actually don't have to write it: ```js history.back(); ``` --- template: how-to-use ## Pop up an alert with a hard-coded message If you want the page to pop up a modal dialog with a message to the user: ```js window.alert("Welcome to Herpetology and Other Amphibial Issues!"); ``` -- And again, you don't have to write 'window', since it's always implied: ```js alert("Welcome to Herpetology and Other Amphibial Issues!"); ``` --- template: how-to-use ## Pop up an alert with the contents of an element Let's say you have the following element in your HTML code somewhere: ```html <h1 id="my_heading">Welcome to Herpetology and Other Amphibial Issues!</h1> ``` -- You can write code to scrape that text out of the HTML and do something with it in Javascript. For example, pop it up in a modal dialog: ```js let element = window.document.getElementById('my_heading'); // store the element object in a variable alert(element.innerText); //pop up the text inside that element in a modal dialog ``` --- template: how-to-use ## Pop up an alert with the contents of an element (continued) Note that you will need to make sure that the previous Javascript code only runs _after_ the browser has already loaded this HTML element into the DOM. -- A simple solution is to place this Javascript below the HTML element it references in your code, since the browser generally parses the code from top-to-bottom: ```html <h1 id="my_heading">Welcome to Herpetology and Other Amphibial Issues!</h1> <script type="text/javascript"> let element = window.document.getElementById('my_heading'); // store the element object in a variable alert(element.innerText); //pop up the text inside that element in a modal dialog </script> ``` --- template: how-to-use ## Change the style of an element Again, let's say you have the following element in your HTML code somewhere: ```html <h1 id="my_heading">Welcome to Herpetology and Other Amphibial Issues!</h1> ``` -- You can write code to change the style of that. For example, let's make the text in that heading blue: ```js let element = window.document.getElementById('my_heading'); // store the element object in a variable element.style.color = 'blue'; //assign a new color to the color property ``` --- template: how-to-use ## Change the style of an element (continued) Like in the previous example, you will need to make sure that this Javascript code only runs after the browser has already stored this HTML element in memory. Again, a simple solution is to place this Javascript somewhere below the HTML element it references in your code, since the browser generally parses the code from top-to-bottom. ```html <h1 id="my_heading">Welcome to Herpetology and Other Amphibial Issues!</h1> <script type="text/javascript"> let element = window.document.getElementById('my_heading'); // store the element object in a variable element.style.color = 'blue'; //assign a new color to the color property </script> ``` --- name: conclusions # Conclusions -- Thank you. Bye.