> For the complete documentation index, see [llms.txt](https://westsilver.gitbook.io/study-script/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://westsilver.gitbook.io/study-script/nomad-script/vanillajs/dom.md).
# DOM
## DOM(Document Object Module)
> Document 객체와 관련된 객체의 집합을 의미
## 1. DOM을 이용한 HTML의 객체 불러오기/출력
{% hint style="info" %}
### **JavaScript는 HTML에 있는 모든 요소를 가지고 와서 객체로 만듦**
따라서 모든 HTML은 객체가 되며, 객체는 많은 키를 가지고 있음
우리가 찾게 될 **모든 객체들의 함수를 DOM(Document Object Module) 형태로 변경 할 수 있음**
{% endhint %}
{% tabs %}
{% tab title="index.html" %}
```markup
Something
This works!
```
{% endtab %}
{% tab title="index.js" %}
```javascript
//HTML을 DOM 객체로 바꿀 수 있음(압축)
const title = document.getElementById("title");
title.innerHTML = "Hi! From JS"; //HTML #title의 값을 Hi! From JS로 바꿀 수 있음
```
{% endtab %}
{% endtabs %}
## 1-1. console.dir();
```javascript
const title = document.getElementById("title");
console.dir(document);
```
## 2. DOM을 이용한 HTML 값 수정
```javascript
const title = document.getElementById("title");
title.innerHTML = "Hi! From JS";
title.style.color = "red"; //#title의 텍스트 색을 red로 변경 (따옴표 잊지말자!)
document.title = "I own you now"; //문서명 변경
```
## 3. querySelector
> 노드의 첫번째 자식을 선택하여 반환
```javascript
const title = document.querySelector("#title");
```