` and `<meta>` One important thing: do not confuse the DOM with HTML: * the HTML is only one way to visually represent the DOM! ## Accessing the DOM with JavaScript ### The `document` object In JavaScript we can access the document (global) object simply with the reserved object variable name (aka reserved keyword), `document` ### The `getElement...` methods Then, we can access DOM elements, such as all `<h1>` tags with these methods: ```javascript let h1 = document.getElementsByTagName('h1') ``` Note that there, we grab the *object representation* and *not the content* of the `<h1>` tags! Other methods include: * `getElementById(...)` * returns the tag object with an `id` attribute of `...` * `getElementsByClassName(...)` * returns a list of any element(s) with a `class` attribute of `...` * `getElementsByTagName(...)` * returns a list of any element(s) with that tag of `...` * e.g. `getElementsByTagName('h1')` for `<h1>` tags ## Traversing the DOM with JavaScript We can get the parents and children of each document object with `parentNode` and `children`: ```javascript let objectsParent = document .querySelector('.object') .parentNode let objectsChildren = document .querySelector('.object') .children ``` We can also just get the first child of each object with `firstChild`: ```javascript let objectsFirstborn = document .querySelector('.object') .firstChild ``` ## Manipulating the DOM with JavaScript ### (innerHTML) Finally, now for some interesting stuff: we can use the `innerHTML` property to manipulate the content of each DOM object, for example: ```xml <html> <head> ... <script src="index.js"></script> </head> <body> <div id="app">hey</div> <div id="bar">x</div> </body> </html> ``` ```javascript document.body.innerHTML = "hi" ``` If we load up `index.html` the entire webpage will show just: ```javascript hi ``` ...as we have just replaced the entire document's body to consist of only that string! ## Manipulating objects ### (getElementById) Now that we know how to manipulate the document's body, we should know how to manipulate the object with the `id` of `app`: ```javascript document.getElementById('app').innerHTML = "hey hey! ho ho!" ``` Loading up `index.html` the webpage will display: ```javascript hey hey! ho ho! // #app: used to be "hey" x // #bar ``` Note that it will replace only the first `<div>` : * we specified to get the `<div>` with the `id` of `app` and not `bar` ## Creating and appending objects ### (appendChild and createElement) We can: * create elements with the `document.createElement` function * append them using the `document.body.appendChild` function ...and we can chain them as such: ```javascript document.body.appendChild(document.createElement('p')) ``` ## Selecting and removing objects ### (querySelector and removeChild) Likewise, we can: * point to an element with `document.querySelector` * `querySelector` takes one String parameter that resembles the notation of the CSS selector, e.g. `.my-class` , `#anId`, `section.section-blue` * delete objects from the DOM using `document.body.removeChild` ```javascript const blueSection = document.querySelector('section.section-blue') document.body.removeChild(blueSection) ```

# JavaScript and the DOM ## DOM (document object model) * **Document** = the webpage (for example) * A document has object(s) * **Object** = the "stuff" (content but also other things) on the webpage * An object may also have its own object(s) * **Model** = the representation of the document and the objects * We can represent the documents and objects in a "tree" diagram * Objects can have "parents" and "children", e.g. * the parent of `` is `` * the children of `` are `` and `<meta>` One important thing: do not confuse the DOM with HTML: * the HTML is only one way to visually represent the DOM! ## Accessing the DOM with JavaScript ### The `document` object In JavaScript we can access the document (global) object simply with the reserved object variable name (aka reserved keyword), `document` ### The `getElement...` methods Then, we can access DOM elements, such as all `<h1>` tags with these methods: ```javascript let h1 = document.getElementsByTagName('h1') ``` Note that there, we grab the *object representation* and *not the content* of the `<h1>` tags! Other methods include: * `getElementById(...)` * returns the tag object with an `id` attribute of `...` * `getElementsByClassName(...)` * returns a list of any element(s) with a `class` attribute of `...` * `getElementsByTagName(...)` * returns a list of any element(s) with that tag of `...` * e.g. `getElementsByTagName('h1')` for `<h1>` tags ## Traversing the DOM with JavaScript We can get the parents and children of each document object with `parentNode` and `children`: ```javascript let objectsParent = document .querySelector('.object') .parentNode let objectsChildren = document .querySelector('.object') .children ``` We can also just get the first child of each object with `firstChild`: ```javascript let objectsFirstborn = document .querySelector('.object') .firstChild ``` ## Manipulating the DOM with JavaScript ### (innerHTML) Finally, now for some interesting stuff: we can use the `innerHTML` property to manipulate the content of each DOM object, for example: ```xml <html> <head> ... <script src="index.js"></script> </head> <body> <div id="app">hey</div> <div id="bar">x</div> </body> </html> ``` ```javascript document.body.innerHTML = "hi" ``` If we load up `index.html` the entire webpage will show just: ```javascript hi ``` ...as we have just replaced the entire document's body to consist of only that string! ## Manipulating objects ### (getElementById) Now that we know how to manipulate the document's body, we should know how to manipulate the object with the `id` of `app`: ```javascript document.getElementById('app').innerHTML = "hey hey! ho ho!" ``` Loading up `index.html` the webpage will display: ```javascript hey hey! ho ho! // #app: used to be "hey" x // #bar ``` Note that it will replace only the first `<div>` : * we specified to get the `<div>` with the `id` of `app` and not `bar` ## Creating and appending objects ### (appendChild and createElement) We can: * create elements with the `document.createElement` function * append them using the `document.body.appendChild` function ...and we can chain them as such: ```javascript document.body.appendChild(document.createElement('p')) ``` ## Selecting and removing objects ### (querySelector and removeChild) Likewise, we can: * point to an element with `document.querySelector` * `querySelector` takes one String parameter that resembles the notation of the CSS selector, e.g. `.my-class` , `#anId`, `section.section-blue` * delete objects from the DOM using `document.body.removeChild` ```javascript const blueSection = document.querySelector('section.section-blue') document.body.removeChild(blueSection) ```