JS의 HTML접근
HTML문서 만으로는 아직은 자바스크립트가 접근을 하지 못합니다.
둘은 다른 언어이기 때문에 서로의 말을 이해할 수 있도록 번역을 해 줘야 둘이 소통이 가능하겠죠?
그러면 어떻게 해야 자바스크립트가 HTML문서에 접근해서 사용자와 동적인 반응을 만들어낼까?
👉 DOM(Document Object Model)형태로 렌더링 된 후에 비로서 자바스크립트가 HTML문서에 접근할 수 있습니다.
DOM은 HTML을 파싱한 결과물로 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리자료구조입니다.
- Parsing(
해석) : 프로그래밍 언어로 작성된 문서를 읽어 실행하는 것. 그 구조를 반영하여 파스트리를 생성 - Rendering : HTML, CSS, JS로 작성된 문서를 파싱하여
시각적으로출력
브라우저에서 페이지의 렌더링 과정은?
- 필요 리소스를 서버로부터
요청- 서버로 부터
응답된 문서들을 파싱하여 DOM생성- 렌더트리(DOM + CSSOM) 생성
☝ 요청과 응답은 Http&Network 관련 문서를 작성하겠습니다.
위의 과정에서 렌더링 엔진은 HTML문서를 한 줄씩 파싱하며 DOM을 생성하다가 script와 같은 js파일을 로드하는 코드를 만나면 js코드를 파싱하기 위해 js엔진에게 제어권을 넘깁니다.
js파일이 로드가 완료되면 다시 렌더링 엔진으로 제어권을 넘겨 중단점 지점에서 부터 다시 HTML 파싱하여 DOM 생성을 재개한다고 합니다.
DOM이 생성되지 않는 순간에 js가 HTML요소로의 접근을 하려고 하면 찾을 수 없어 실행이 되지 않는다
이러한 문제점으로 보통 js파일을 HTML문서 하단에 작성하거나, async와 defer 어트리뷰트를 사용하여 해결합니다.
- async : 비동기로 진행하다가
Load가 완료되면 HTML파싱중단하고 js를 실행한다 - defer : 비동기로 진행하고 HTML파싱이
완료된 후에 js가 실행된다
DOM트리가 생성된 후엔?
DOM이 생성되는 과정에서 HTML문서의 각 태그, 텍스트들은 각각 하나의 노드가 됩니다.
- Document Node : 최상위 노드로, HTML 전체를 가리키는 객체 (보통 window, this로 접근 가능)
- Element Node : HTML요소(태그)를 가리키는 객체
- Attribute Node : 요소노드에만 연결되어 있음 (요소노드의 형제노드가 아님)
- Text Node : HTML요소(태그)의 텍스트를 가리키는 객체로 요소노드의 자식 객체이다.
(태그 사이의 스페이스, 탭, 공백, 개행 등이 있으면 자동적으로 이 노드를 생성)
1. document.getElementById("")
2. document.getElementsByClassName("")
3. document.getElementsByTagName("")
4. document.querySelector("")
5. document.querySelectorAll("")각 요소는 우리가 흔히 아는 위와 같은 코드들로 접근이 가능하다. 하지만, 좀더 정확하고, 확실하게 접근할 수 있도록 4,5번 방법들을 많이 사용한다고 합니다.
(4,5번은 css선택자와 동일하게 접근이 가능하다)
또한 2,3번은 살아있는 객체인 HTML Collection을 반환한다고 하는데 가령 for문을 순회하면서 class명을 변경하면 바꿀때마다 계속 참조하는 객체가 변화하며 생기는 의도치 않은 결과(오류)가 생길 수 있어 Node를 반환하는 4,5번을 사용하는것이 좋아 보입니다.
🤔 위에 텍스트 노드가 자동적으로 생성된다는 특징으로 인해 DOM요소의 접근에 혼란이 생겼습니다.
다음은 이 혼란을 막기위한 방법에 대해 알아보겠습니다.
