[웹 구성요소] -html 웹 페이지에 제목 이미지 표 등을 정의하고 구조와 의미를 부여하는 정적 언어로 웹의 전체적인 구조를 담당 -css htm이 실제 표시되는 방법 색상 레이아웃 등을 지정며 웹의 시각적인 표면을 담당 -자바스크트 html의 정적이고 새로운 한계를 극복하기 위해 만들어진 언어로 웹 문서를 더욱 동적으로 만들어 준다
->자바스크립트에서 어떻게 확장자가 다른 html과 css 파일의 내용을 읽고 수정할 수 있는가?
[DOM] 1. 문서 객체 모델 2. 문서(xtml html xml)에 대한 모든 내용을 담고 있는 객체 3. 텍스트 파일로 이루어진 문서를 브라우저가 이해할 수 있는 구조로 구성한 것. 4. HTML 요소 간의 부자 관계를 반영하여 모든 노드들을 트리 구조로 구성한 것. 5. DOM은 우리가 문서의 구조 스타일 내용 등을 변경할 수 있도록 도와준다.
HTML요소는 랜더링 엔진에 의해 파싱되어 돔을 구성하는 요소 노드리스트로 변환됨 HTML 요소의 Attribute는 Attribute 노드로 텍스트 콘텐츠는 텍스트 노드로 변환됨
이런 html 요소들이 들어 있는 html 문서를 렌더링 엔진이 파싱하여노드 객체로 구성된 트리 구조를 가진 DOM을 생성 -> DOM은 노드 객체의 계층적인 구조로 구성됨.
[문서 노드] -DOM 트리의 최상위에 존재하는 루트 노드로서 document 객체를 가리킨다. -hml 문서당 도큐먼트 객체는 유일 -문서 노드가 루트 노드이기 때문에 다른 노드들에 접근하기 위해서는 도큐먼트 객체를 도큐먼트를 통해야한다.
[요소 노드] - html 요소를 가리키는 객체로 문서의 노드를 표현한다. - HTML요소간의 중첩에 의해 부자관계를 가지며, 이 부자 관계를 통해 정보를 구조화한다.
[어트리뷰트 노드] html 요소의 Attribute를 가진다. Attribute 노드는 지정된 html 요소의 노드와 형제 관계를 가지지만 그 노드에 부모노드와 직접적으로 연결되지 않는다 Attribute를 참조하거나 변경하기 위해서는 먼저 형제 노드에 접근해야 한다.
[텍스트 노드] html 요소의 텍스트를 가리키는 객체. 문서의 정보를 표현하는 노드이고 자식을 가질 수 없기 때문에 DOM 트리의최종 단. 따라서 텍스트 노드에 접근하려면 먼저 부모 노드에 접근을 해야 한다.
but -기존 요소 노드의 모든 자식 노드를 제거하기 때문에 자식 로드에 걸려 있던 이벤트 리스너나 다른 코드에 의해 조작된 결과를 날려버린다. -기존 노드를 제거하기 때문에 요소 사이에 새로운 요소를 삽입하기 어렵다. -입력값 등을 통해 악의적인 스크립트 코드가 실행되는 크로스 사이트 스크립팅 공격에 취약하다.
2. insertAdjaventHTML -innerHTML의 단점을 보완하기 위해 만들어짐 -기존 요소를 제거하지 않기 때문에 위치를 지정해 추가가 가능하고 속도도 더욱 빠르다.
but -innerHTML과 마찬가지로 크로스 사이트 스크립팅 공격에 취약하다. ex)app.insertAdjacentHTML("beforeend","<div>Hello</div>");
3. appendChild -기존 요소를 제거하지 않으면서 위치를 지정해 추가가 가능하다. -보안 이슈가 상대적으로 높다.
[css 태그를 상단에 위치시키는 이유]
csssom이 구성되어야 브라우저가 랜더링을 하기 때문 외부 스타일 시트를 다운받아 사용하는 경우가 많기 때문에 스타일 시트를 최대한 빠르게 다운받기 위해 css 태그를 상단에 위치시키는 것. [스크립트 태그를 하단에 위치시키는 이유]
html 파서가 스크립트 태그를 만나면 파싱을 멈추고 스크립트를 읽기 때문에 웹 페이지의 로딩이 그만큼 늦춰질 수 있다.
[Virtual DOM] Virtual DOM은 이전 DOM과 가상 DOM에 있는 내용을 비교하여 바뀐 부분만 실제 DOM에 적용. 결과적으로 불필요한 렌더링 횟수를 줄이고 한 번만 랜더링 하여 성능을 개선시킬 수 있다. 이제 마지막으로 봄에 대해 알아보겠습니다.
[BOM] -BOM은 브라우저 오브젝트 모델. -봄은 웹 브라우저의 환경에 다양한 기능을 객체처럼 다루는 모델. -대부분의 브라우저에서 구현은 되어 있지만 정의된 표준이 없어 브라우저 제작사마다 세부 사항이 다르고 한정적이라는 특징. -봄의 역할은 웹 브라우저의 버튼 url 주소 입력창 타이틀 바 등 웹 브라우저 윈도우 및 페이지의 일부분을 제어할 수 있게끔 하는 것.
봄의 대표적인 객체: window, document, history, location, navigator, screen 여기서 객체는 자바스크립트의 최상의 객체이자 전역 객체이면서 모든 객체가 소속된 객체. 윈도우는 최상의 객체 때문에 객체이기 때문에 생략이 가능.
댓글