Document Object Model

## Document Object Model
            ### Modifying Page Content with Javascript
            ---

### Terminology
            <dl>
              <dt>Document Object Model</dt>
              <dd>A collections of objects, methods and properties that provide a way to manipulate an HTML page with Javascript.</dd>
              <dt>DOM variable</dt>
              <dd>A Javascript variable that contains an HTML element (ex. a paragraph) as its value.</dd>
            </dl>

---

## Common DOM methods and properties

---

## `document.querySelector()`
            ### Creating a DOM variable
            ```html
            <body>
              <h1 class="intro">Hello world!</h1>
            </body>
            ```

```js
            const headingElement = document.querySelector('h1');
            ```
            - `document` is the top-level DOM variable that represents the HTML element;
            - `.querySelector()` finds the _first_ HTML element that matches the provided CSS selector;
                - use `.querySelectorAll()` to find every occurrence of the selector, which you then have to loop through.

---

### Any CSS selector is valid

```html
            <body>
              <h1 class="intro">Hello world!</h1>
            </body>
            ```

All of these selectors will create the same DOM variable:

```js
            const headingElement = document.querySelector('h1');
            ```
            ```js
            const headingElement = document.querySelector('.intro');
            ```
            ```js
            const headingElement = document.querySelector('body > h1');
            ```

---

### `Element.innerHTML`
            Accessing HTML Content
            ```html
            <body>
              <h1 class="intro">Hello world!</h1>
            </body>
            ```

```js
            // Create DOM variable
            const headingElement = document.querySelector('h1');

// Access element content with .innerHTML property
            const h1Content = headingElement.innerHTML; // 'Hello world!'
            ```

---

### `Element.innerHTML`
            Editing HTML Content
            ```html
            <body>
              <h1 class="intro">Hello world!</h1>
            </body>
            ```

```js
            // Create DOM variable
            const headingElement = document.querySelector('h1');

// Edit element content with .innerHTML property
            headingElement.innerHTML = 'Hello Tony!';
            ```
            After:
            ```html
            <body>
              <h1 class="intro">Hello Tony!</h1>
            </body>
            ```
            
            ---

### `Element.innerHTML`
            Creating new elements
            ```js
            // Edit element content with .innerHTML property
            headingElement.innerHTML = 'Hello <em>Tony</em>!';
            ```
            ```html
            <body>
              <h1 class="intro">Hello <em>Tony</em>!</h1>
            </body>
            ```

---

## `prompt()`
            ### Quick and dirty inputs
            ```js
            const name = prompt("What's your name?");
            ```

![Example of a browser prompt](../../assets/images/js/prompt-example.png)

---

```js
            const h1 = document.querySelector('h1');
            const name = prompt("What's your name?");
            h1.innerHTML = `Hello ${name}!`;
            ```

![Example of a browser prompt](../../assets/images/js/prompt-tony.png)

```html
            <body>
              <h1 class="intro">Hello Tony!</h1>
            </body>
            ```

---

## Key Takeaways
            - All DOM variables will have the `.querySelector()` method;
            - `.innerHTML` works both ways when reading and writing content;
            - `.innerText` can be used if you don't want HTML tags included;
            - `prompt()` is rarely used professionally; we're using it as a short cut for now;