DOM이란 무엇인가

애초에 자바스크립트에게 HTML이란 문자열 그 이상 그 이하도 아니다.

돔은 이 문자일 뿐인 HTML을 의미있는 객체형태로 바꿔서(= 파싱) 우리가 추가적인 작업을 할 수 있도록 하는 녀석이다.

 

 

노드(node)

 

이 의미있는 객체형태를 node, 즉 '노드'라고 한다. 노드는 HTML의 각각의 요소보다 훨씬 더 넓은 의미인데, 예를들어 태그 사이사이의 띄어쓰기 공간도 node는 'text 객체'로 인식한다. 또한 태그 안에 들어있는 속성 하나하나도 하나의 'attribute 객체'이다.

 

우리가 돔을 사용할 때 가장 중요한 두가지는

1. 내가 원하는 요소를 잘 선택해서 조작하는 것
2. 선택한 요소에 일어날 이벤트를 핸들링하는 것 

이다.

---

상속(inheritance)

 

HTML이 기본적으로 중첩개념으로 되어있으니 파싱되는 과정에서 자연스럽게 그 중첩의 성격을 가질 수 밖에 없다.

그래서 자스는 부모가 가지고있는 메소드와 property를 내가 원하면 자식에게 물려줄 수 있다. 이것이 노드의 메소드와 프로퍼티에 관계에 대한 것들이 많은 이유이다. contains, lastChild, parentnode, previousSiblings ..등등

나중에 '이벤트 위임'을 접할 때 알고있어야 할 기본 개념이다.

 

---

내가 원하는 요소를 잘 선택해서 조작

 

document는 문서의 근간이자 가장 큰 어머니라고 봐도 무방하다. HTML문서 전반에 대한 정보를 가지고 있기 때문이다.

그래서 document property를 사용해 내가 원하는 요소를 찾아들어갈 수 있다.

• document.doctype
• document.documentElement
• document.body
• document.head
• document.title
• document.lastModified

등등이 있고, 가장 밥먹듯이 사용하게 되는 요소에는 바로 

• document.querySelelctor

가 있다.

 

---

document.querySelelctor() 

 

() 안에는 선택하고싶은 요소를 넣어주면 되는데,

 

document.querySelelctor('.클래스이름')

클래스를 선택한다.(동일클래스가 여러개라면 첫번째 클래스만 선택)

 

document.querySelelctor('h1')

가장 첫번째에 위치한 h1을 선택한다.

 

document.querySelelctorAll('p')

로 p태그를 가진 요소 모두를 선택한다.

 

주의점: 쿼리셀렉터로 요소를 찾는것은 비용과 메모리가 많이 드는 행위이기때문에, 함수 밖에서 일단 다 찾고 반복적인 함수 안에서 쿼리셀렉터를 사용하는것은 지양해야한다.

 

만약 내가 고른 요소들의 node를 조작하고싶을 때에는 node property를 사용해 내가 원하는 노드를 선택한다.

• childNode
• firstNode
• lastChild
• nextSibling
• parentNode
• previousSibling

등등이 있다.

 

---

이렇게 찾은 HTML Element Object 조작하기

 

• getAttribute() = 태그가 가진 속성중에 이걸 가져와줘
• setAttribute() = 태그에 이 속성을 지정해줘
• classList() + 보통 classList 뒤에 .add / .remove / .toggle을 붙여서 사용한다. 요소에 클래스를 넣거나 빼거나 토글함으로써 조작한다.
• innerHTML() - HTML 문법에 맞게 입력한다 ('<P>안녕</P>' -> 안녕 )
• innerText() - 텍스트 그대로 출력된다.
• textContent() - 오로지 텍스트만 사용할 경우에 innerText보다 에너지를 적게쓰며 출력가능하다.