놀러와요 버그의 숲

// 10강 타입스크립트로 HTML 변경과 조작할때 주의점 // 잘 찾으면 html object 자료가 남고 // 요소를 예를들어 못찾으면 null이 남기 때문에 // union type으로 설정해주어야 함 let title = document.querySelector("#title"); if (title != null) { title.innerHTML = " 반가워요"; } // HTML 조작시 narrowing 방법 5가지 // 1. instanceof연산자 => 가장 많이 쓰게 될 확률 높음 if (title instanceof Element) { title.innerHTML = "반가워요"; } // 2. as로 사기치기 // as는 타입 assertion으로 , Element 타입으로 사기쳐주세..

본글은 자바스크립트 딥다이브 39장 DOM 파트를 요약한 내용입니다 (p.677~ p.709) 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM (Document Object Model) : HTML 문서의 계층적 구조와 정보를 표현하여 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료 구조다. 39.1 노드 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 반환된다. 이때 HTML 요소의 속성은 속성 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 요소의 콘텐츠 영역(시작태그와 종료 태그 사이) 에는 텍스트 ..

자바스크립트의 가장 중요한 역할 중 하나는 HTML 문서를 조작하는 것이다. 그래 그건 알겠어. 그런데 정확히 어떻게 조작해? 이것에 대해서 의문점을 가져본적이 없다. 그냥 태그 써서 요소를 불러왔지. (이 글은 계속 업데이트 될 예정이니 내용이 빈약하더라도..걱정 말아라) MDN 문서를 살펴보니, 어떻게 조작하는지를 알려면 DOM의 개념을 이해해야 한다고 한다. 한번 살펴보자. Introduction to the DOM The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. -> DOM 일단 그자체에서 유추해보..