# DOM Manipulation

## Key Questions

### What are we doing in the DOM?
- finding an element?
- creating an element?
- updating an element?
- removing an element?

<details>
<summary>
When finding an element, what method(s) can I use?
</summary>

---
- [document.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) - returns first matching element
- [document.querySelectorAll()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) - returns [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) of matching elements
- [document.getElementById()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
- [document.getElementsByClassName()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) - returns [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) of elements with the matching class name

---

</details>
<br/>

<details>
<summary>
When creating an element, what method(s) can I use?
</summary>

---
- [document.createElement()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
- [element.innerHTML=](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
---

</details>
<br/>

<details>
<summary>
When updating an element, what method(s) can I use?
</summary>

---
- [element.innerHTML=](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
- [node.textContent=](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
- [htmlElement.innerText=](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)
- You can also update attributes:
- [`.id=`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)
- [`.className=`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
- [`element.dataset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset)
- [`.classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
- [.add()](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add)
- [.remove()](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove)
- [.replace()](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/replace)
- [.toggle()](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle)

---

</details>
<br/>

<details>
<summary>
When removing an element, what method(s) can I use?
</summary>

---

- [element.remove()](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove)
- [node.removeChild(child)](https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild)
---

</details>
<br/>

## Key Takeaways for Phase 1

- When we need to update or remove an element from the DOM, we need to find it inside of the DOM first.
- So, when we add elements to the DOM, we want to be aware of how we'll be able to target them later on.
- We do this by adding attributes or a combination of attributes like className or data attributes so we can find the appropriate element later on (📅 when a relevant event happens)
- Direct DOM manipulation is extremely uncommon in React.

## Tangential Questions