|
| 1 | +## Advanced DOM |
| 2 | + |
| 3 | +The DOM is simply a data representation of all object that comprises of the structure and content of a web document |
| 4 | + |
| 5 | +Each DOM elements is called a node and it is simply an object that has various properties that can be used to manipulate or make changes to the element. |
| 6 | + |
| 7 | +## NodeList |
| 8 | + |
| 9 | +A `nodelist` is simply an object collection of nodes. It is usually returned by properties like `Node.childNodes` and methods like `document.querySelectorAll()` |
| 10 | + |
| 11 | +### Elements that returns a NodeList: |
| 12 | + |
| 13 | +- `document.querySelectorAll()` |
| 14 | +- `document.getElementByName()` |
| 15 | + |
| 16 | +> Note: Nodelists are not arrays but they can be iterated using the `forEach()` method and converted to an array using `Array.from()` |
| 17 | + |
| 18 | +NodeLists returned from the `document.querySelectorAll` methods are static, which means updates made to the DOM does not affect the collection. |
| 19 | + |
| 20 | +## HTML Collection |
| 21 | + |
| 22 | +HTMLCollection is an array-like object collection of HTML elements. It is similar to a nodeList except it is live and not static, this means it is automatically updated when changes are made to it's underlying document. |
| 23 | + |
| 24 | +### Elements that returns a HTMLCollection: |
| 25 | + |
| 26 | +- `document.getElementsByClassName()` |
| 27 | +- `document.getElementsByTagName()` |
| 28 | + |
| 29 | +## Creating and Inserting Elements |
| 30 | + |
| 31 | +Previously we looked at how to add elements in the DOM using the `.insertAdjacentHTML()` property, but there is another property that allows us even more flexibility, and this property is called the `createElement()` property. |
| 32 | + |
| 33 | +- By using `document.createElement()` property: |
| 34 | + |
| 35 | +```js |
| 36 | +const message = document.createElement('div'); |
| 37 | +message.classList.add('cookie-message'); |
| 38 | +message.textContent = 'We use cookies for improved funtionality and analytics'; |
| 39 | +message.innerHTML = `We use cookies for improved functionality and analytics. <button class='btn btn--close-cookie'>Got it!</button>`; |
| 40 | + |
| 41 | +header.prepend(message); |
| 42 | +``` |
| 43 | + |
| 44 | +`prepend` adds the element as the first child of the element the prepend is called with. |
| 45 | +`append` adds the element as the last child. |
| 46 | +`before` adds the element before the element the before is called with |
| 47 | +`after` adds the element after the element the after is called with |
0 commit comments