본문 바로가기

programming study/JavaScript

 (186)
39장. DOM(4) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 39.6 DOM 조작 새로운 노드르 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체 리플로우와 리페인트가 발생하므로 성능 영향 39.6.1 innerHTML Element.prototype.innerHTML setter, getter 모두 존재하는 접근자 프로퍼티 요소 노드의 HTML 마크업을 취득하거나 변경 요소 노드의 콘텐츠 영역(시작 태그 ~ 종료 태그)에 포함된 HTML 마크업을 문자열로 반환 문자열 할당 시 HTML 마크업을 파싱하여 자식 노드로 DOM에 반영 모든 자식 노드를 제거하고 할당한 것으로 DOM을 변경 사용자로부터 입력 받은 데이터를 그대로 innerHTML프로퍼..
39장. DOM(3) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 39.3 노드 탐색 요소 노드 취득 후 부모, 형제, 자식 노드 등을 탐색 Node.prototype parentNode previousSibling firstChild childeNodes 모두 읽기 전용 접근자 프로퍼티이므로 값을 할당할 수 없음 Element.prototype previousElementSibling nextElementSibling childeren 39.3.1 공백 텍스트 노드 공백 텍스트 노드 : HTML 요소 사이의 스페이스, 탭, 줄바꿈(개행) 등의 공백 문자는 텍스트 노드 생성 노드 탐색 시, 공백 텍스트 노드에 주의 39.3.2 자식 노드 탐색 Node.pro..
39장. DOM(2) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 39.2 요소 노드 취득 HTML의 구조나 내용, 스타일을 동적으로 조작하기 위해서는 요소 노드를 취득해야 함 DOM은 요소 노드를 취득할 수 있는 다양한 메서드 제공 39.2.1 id를 이용한 요소 노드 취득 Document.prototype.getElementById 인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환 id는 문서 내에서 유일한 값이어야 함 여러개가 존재하더라도, 에러가 발생하지는 않으나 첫 번째 요소만을 반환 존재하지 않는 경우 null을 반환 39.2.2 태그 이름을 이용한 요소 노드 취득 Document.prototype/Element.proto..
39장. DOM(1) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 39.0 DOM이란? HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API 프로퍼티와 메서드를 제공하는 트리 자료구조 39.1 노드 39.1.1 HTML 요소와 노드 객체 HTML요소 : HTML 문서를 구성하는 개별적인 요소 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환 다른 HTML 요소를 포함할 수 있어 중첩 관계를 가질 수 있음 계층적인 부자 관계가 형성 트리 자료구조 트리 자료구조 노드들의 계층 구조로 이루어진 자료구조 부모 노드와 자식 노드로 구상되어 노드..
38장. 브라우저의 렌더링 과정(2) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 38.3 HTML 파싱과 DOM 생성 브라우저의 응답으로 서버가 응답한 HTML은 문자열로 이루어진 순수한 텍스트 HTML 문서를 렌더링하기 위해서는 브라우저가 이해할 수 있는 자료구조(객체)로 변환해야 함 브라우저의 렌더링 엔진이 DOM을 생성하게 됨 HTML 문서는 HTML 요소들의 집합으로 이루어지며 중첩 관계를 가짐 DOM은 HTML 문서를 파싱한 결과물 변환 과정 바이트 형태의 HTML 문서를 문자열로 변환 문자열 형태의 HTLM 문서를 문법적 의미를 갖는 최소 코드 단위인 토큰으로 분해 토큰들을 객체로 변환하여 노드들을 생성 토큰의 내용에 따라 문서 노드, 요소 노드, 어트리뷰트 노..
38장. 브라우저의 렌더링 과정(1) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 38.0 브라우저 렌더링이란 자바스크립트의 대표적인 런타임 환경은 웹 브라우저 브라우저에서 HTML, CSS과 함께 파싱하여 렌더링 렌더링 : HTML, CSS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 간략한 브라우저의 렌더링 과정 HTML, CSS, JavaScript, 이미지, 폰트 파일 등의 리소스를 서버에 요청하여 응답 받음 렌더링 엔진이 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하여 렌더 트리를 생성 자바스크립트 엔진은 JavaScript를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드를 변환하여 실행. 이 시점에서 Java..
37장. Set과 Map(2) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 37.2 Map 키와 값의 쌍으로 이루어진 컬렉션 객체와 유사 키로 객체를 포함한 모든 값 사용 가능 이터러블 37.2.1 Map 객체의 생성 Map 생성자 함수로 생성 인수를 전달하지 않으면, 빈 Map 객체가 생성 인수는 키와 값의 쌍으로 된 요소로 구성된 이터러블을 전달 받아야 함 중복된 키를 추가 하면 갚이 덮어써짐 const mapForCats = new Map([['siru', 'cat'], ['mummum', 'dog']]); console.log(mapForCats); // Map(2) {'siru' => 'cat', 'mummum' => 'dog'} 37.2.2 요소 개수 확인..
37장. Set과 Map(1) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 37.1 Set 중복되지 않는 유일한 값들의 집합 배열과 유사 중복 x 순서 x 인덱스 x 수학적 집합의 특성과 일치 교집합, 합집합, 차집합, 여집합 등을 구현 가능 37.1.1 Set 객체의 생성 Set 생성자 함수로 생성 인수를 전달하지 않으면 빈 Set 객체가 생성 활용하여 중복된 요소 제거 가능 const cats = ['siru', 'nunu', 'mango', 'meonji', 'siru']; ​ const setForCats = new Set(cats); console.log(setForCats); // Set(4) {'siru', 'nunu', 'mango', 'meonji'}..

티스토리툴바