[ JavaScript ] DOM

DOM ?

• DOM은 Document Object Model의 약자로 직역하면 ' 문서 객체 모델 ' 이다.
• 먼저 우리가 웹에서 JavaScript를 사용하는 이유는 문서 전체 또는 일부를 동적으로 동작시키기 위함이다.
• 따라서 웹 문서의 모든 요소들을 따로따로 제어할 수 있어야 한다.
• 이것을 위해 브라우저는 서버에서 웹 문서를 받으면 웹 문서를 체계적으로 정리하게 되는데 여기서 사용되는 정리 방식이 바로 DOM이다.
• 먼저 DOM에서는 웹 문서 전체를 하나의 객체로 정의를 하고, 웹 문서의 구성 요소들도 각각의 객체로 인식한다.
• 예를들어 웹 문서 전체는 document객체로, 웹 문서 안에 들어 있는 이미지는 image 객체로 인식한다. 그래서 이름이 ' 문서 객체 모델 ' 인 것이다.

DOM 트리

• 웹 문서를 분석해 보면 부모태그가 있고, 그 안에 속해 있는 자식 태그가 있다.
• 아래 그림을 보면 가장 바깥에 html태그가 있다. 그 안에 자식으로 head태그, body태그가 있다. head태그 안에는 link / style태그, body태그 안에는 h / p 태그가 있다.
• 이처럼 부모 자식 태그들을 나타내 보면 트리 형태를 띄기 때문에 이것을 DOM트리라고 부른다.
  

웹 요소에 접근

• 브라우저가 웹 문서를 분석하여 트리 형태의 DOM객체를 구성을 하면 여러가지 함수들을 이용해서 각각의 요소에 접근 할 수 있다.

1. querySelector()함수

• 해당 함수에 CSS선택자를 넣어주면 특정 요소에 접근 할 수 있다.

//😀 querySelector와 querySelectorAll함수는 document객체 포함 되어 있다.

//😀 p태그에 접근 하고 싶으면
document.querySelector('p')

//😀 main이라는 class를 가진 태그에 접근하고 싶으면
document.querySelector('.main')

//😀 container라는 id를 가진 태그에 접근하고 싶으면
document.querySelector('#container')

• 그런데 id는 웹 문서에서 한번만 사용될 수 있기 때문에 항상 특정 요소 하나를 가리키게 되지만, 클래스나 다른 태그들은 여러번 사용될 수 있는데 위 처럼 가져 오면 뭘 가져오게 될까?
• 바로 여러 개의 요소 중에서 첫번째 요소만을 가져 오게 된다.
• 따라서 좀 더 구체적으로 접근을 해야 한다.

//😀 예를들어 h태그가 3개 있고 각각의 id가 a,b,c이고 각각 div태그를 자식으로 가지고 있다고 가정
해 보자
//😀 이 상태에서 id가 b인 h태그의 자식 요소인 div에 접근할려면 아래와 같이 접근하면 된다.
document.querySelector('#b div')

2. querySelectorAll()함수

• querySelectorAll을 사용하면 선택한 요소 모두에 접근할 수 있다.

//😀 아래와 같이 작성하면 웹 문서 안에 모든 p태그에 접근할 수 있다.
document.querySelectorALL('p')
//😀 또한 배열의 인덱스를 활용해서 각각의 요소에 접근할 수 있다.
document.querySelectorALL('p')[3]

웹 요소에 접근하여 값을 수정

• 먼저 아래와 같이 html파일이 구성되어 있다.

<div id="container">
	<p class='first'> 반장  </P>
	<p class='second'> 부반장 </P>
    <p class='third' style='display:none'> 총무 </P>
</div>

1. innerText

• innerText를 사용하면 선택한 요소중 화면에 보이는 내용을 가져올 수 있고, 값을 수정할 수 있다.

// 😀먼저 container라는 id를 가지는 요소중 화면에 보이고 있는 요소의 내용을 가져온다.
//🔥 총무의 경우 현재 display none효과 때문에 화면에 보이지 않고 있기 때문에 innerText로
값을 가져 올 수 없다.
document.querySelector('#container').innerText // '반장', '부반장'

//😀 만약 여기서 반장을 학생회장으로 수정하고 싶다면 아래와 같이 해주면 된다.
document.querySelector('#container first').innerText = 학생회장

2. textContent

• textContent를 사용하면 현재 화면에 보이지 않고 있는 요소를 포함 하여 모든 요소들의 내용을 가져 온다.

document.querySelector('#container').textContent // '반장', '부반장', '총무'

3. innerHTML

• innerHTML은 내용 뿐 아니라 태그 정보까지 함께 가져 온다.

document.querySelector('#container').innerHTML
// <p class='first'> 반장  </P>,
   <p class='second'> 부반장 </P>,
   <p class='third' style='display:none'> 총무 </P>

이벤트 걸기

• querySelector로 요소에 접근하고, 해당 요소에 이벤트를 걸어 줄 수 있다.

//😀 요소를 선택하고
const container = document.querySelector('#container')
//😀 걸어줄 이벤트를 입력하고, 함수를 입력해 주면 된다.
container.onclick= () => {console.log('이벤트 걸기')}