Study/DOM (6) 썸네일형 리스트형 Intersection Observer Intersection Observer Intersection Observer API는 브라우저에서 제공하는 api이다. 우리가 지정한 요소와, viewport 또는 그 요소의 부모가 겹치는 영역이 어떻게 변하는지 비동기적으로 관찰할 수 있다. 예를 들어, 카드 리스트의 마지막 아이템이 viewport에 보이면(아이템과 viewport가 겹치기 시작하면), 새로운 리스트 아이템 정보를 요청할 수 있다. => infinite scroll how to create intersection observer? const options = { root: null, rootMargin: '0px', threshold: 1.0 } const observer = new IntersectionObserver(callbac.. Window & Document object 브라우저에서 js 코드를 실행하면, 최상위 객체로 윈도우 객체가 만들어진다. 윈도우 객체의 유용한 property와 method에는 무엇이 있는지 알아보자. Window Object Size 모니터의 사이즈 | 콘솔에 위의 코드를 입력하면 모니터의 width와 height 값이 포함되어있는 "Screen"이라는 객체를 확인할 수 있다. window.screen; 브라우저의 사이즈 | 브라우저 사이즈의 너비와 높이를 나타내는 데이터는 크게 outer와 inner로 나누어진다. outer는 전체 브라우저 창의 사이즈를 나타내는 값인데, 여기에는 웹 페이지를 나타내는 Document 파일뿐만 아니라 주소 검색창, 페이지 탭, 스크롤 바가 포함되어있다. 따라서 우리가 창의 크기를 조정하면 줄어들거나 늘어난다. .. Event types & object Event Object addEventListener를 이용해서 어떤 요소에 이벤트를 등록하면, 이벤트가 발생할 때 마다 자동으로 event object라는 것이 생성된다. event object는 우리가 이벤트 발생 시 호출하는 함수의 첫번째 parameter로 전달할 수 있다(하지 않을 수도 있다). event의 property나 method를 이용할 수 있다. const input = document.querySelector("input[type='text']"); input.addEventListener("keydown", () => console.log('key down!') ); input.addEventListener("keydown", event => console.log(event) );.. What is Event? Event | 모든 이벤트 종류 DOM Node & EventTarget The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. The root of the hierarchy is EventTarget, that is inherited by Node, and other DOM nodes inherit from it. DOM tree는 DOM을 데이터 구조인 tree로 표현한 것이다. tree의 각 branch는 모두 node로 끝나는데, node는 "event target" 이라는 상위 객체를 상속한다. EventTarget은 "Event"를.. Select & Manipulate css에서 요소를 선택하고, 해당 요소에 스타일링을 지정한 것과 같이, DOM에서도 요소(Element)를 선택하고, 그 요소가 해야할 일을 처리하는 코드를 작성할 수 있다. 이 때 DOM 요소를 선택하고 조작하는 APIs는 "document" 객체에서 제공하는 내장 메서드이고, 이것을 DOM APIs라고 부른다. +) Element | DOM에서 반환하는 하나의 JS Object를 말한다. Select Elements | document. ~ getElementById(str) | 해당하는 id를 속성 값으로 갖는 요소를 찾아 반환, 해당하는 요소가 없으면 null 반환 이 때 요소는 html의 요소가 아니라, DOM의 JS Object이다. getElementsByTagName(str) | 해당하는 .. What is DOM? What is DOM? 윈도우 객체의 구성 | DOM, BOM, JavaScript JS의 실행 환경은 브라우저와 노드로 나뉜다. JS가 브라우저에서 실행될 때 최상위의 객체는 window 객체인데, 이 window 객체에는 "DOM"이라는 것이 있다. DOM | Document Object Model DOM은 Document Object Model의 약자인데, 단어의 뜻 그대로 document를 자바스크립트의 object로 변환 한 것을 말한다. 여기서 document는 html과 같은 웹 페이지 파일을 가리킨다. 그렇다면 document를 왜 object로 변환하는 걸까? 우리는 "브라우저"(크롬, 사파리...)라는 소프트웨어를 통해 화면에 웹 페이지를 띄운다. 그러나 브라우저는 html 자체의 문법.. 이전 1 다음
