---
# System prepended metadata

title: DOM Manipulation

---

# 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