본문 바로가기

IT 용어/DOM2

DOM 요소를 CSS 선택기를 사용하여 선택하는 방법과 DOM Elements 제어방법 DOM 요소를 CSS 선택기를 사용하여 선택하는 방법 1. querySelector를 사용하여 DOM 요소를 선택하는 방법 document.querySelector : CSS 선택자에 해당하는 가장 첫번째의 DOM Element를 잡아옵니다. document.querySelectorAll : CSS 선택자에 해당하는 모든 DOM Element를 잡아옵니다. 2. ID, Class, Tag를 사용하여 DOM 요소를 선택하는 방법 getElementById : 주어진 문자열과 일치하는 id속성을 가진 요소를 찾아옵니다. getElementsByClassName : 주어진 클래스 이름을 가진 모든 자식 요소를 배열과 같은 객체로 변환합니다. getElementsByTagName : Element의 HTMLCo.. 2021. 1. 27.
DOM 이란? (+ 웹 페이지가 만들어지는 방법) 웹 페이지가 만들어지는 방법 먼저 DOM을 이해하기 위해서는 웹 페이지의 빌드과정을 알아야 합니다. Critical Rendering Path 브라우저가 서버에서 페이지에 대한 HTML 응답을 받으며 화면에 표시되기 전에 많은 단계를 거쳐야 하는데 웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰포트에 표시하기까지의 과정을 'Critical Rendering Path, CRP'이라고 합니다. CRP의 6단계 과정 DOM 트리 구축 CSSOM 트리 구축 JavaScript 실행 렌더 트리 구축 레이아웃 생성 페인팅 위와 같이 CRP 과정은 6단계로 나누어져 있지만 대략 렌더 트리 구축을 기점으로 두 단계로 나눌 수 있습니다. 첫번째 단계 : 브라우저는 읽어들인 문.. 2021. 1. 26.