애초에 자바스크립트에게 HTML이란 문자열 그 이상 그 이하도 아니다.
돔은 이 문자일 뿐인 HTML을 의미있는 객체형태로 바꿔서(= 파싱) 우리가 추가적인 작업을 할 수 있도록 하는 녀석이다.
노드(node)
이 의미있는 객체형태를 node, 즉 '노드'라고 한다. 노드는 HTML의 각각의 요소보다 훨씬 더 넓은 의미인데, 예를들어 태그 사이사이의 띄어쓰기 공간도 node는 'text 객체'로 인식한다. 또한 태그 안에 들어있는 속성 하나하나도 하나의 'attribute 객체'이다.
우리가 돔을 사용할 때 가장 중요한 두가지는
- 내가 원하는 요소를 잘 선택해서 조작하는 것
- 선택한 요소에 일어날 이벤트를 핸들링하는 것
이다.
상속(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보다 에너지를 적게쓰며 출력가능하다.
'Front-End Developer > JavaScript' 카테고리의 다른 글
하드코드->forEach->이벤트 위임 [점점 나아지는 코드 맛보기] (0) | 2022.05.14 |
---|---|
blur와 click을 같이 쓸 때, 내 맘대로 안되는 이유 (0) | 2022.05.13 |
JS 이벤트 플로우 완벽이해 (0) | 2022.05.13 |
증감 연산자(Increment & Decrement Operators) (0) | 2022.05.11 |
new Date() 란? (0) | 2022.05.11 |