공부 기록일지📚

HTML 태그는 중첩되어 있다. 따라서 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 될 수 있다. 이런 경우 중첩된 태그들에 이벤트가 등록되어 있다면 어떻게 처리될까? 캡쳐링(capturing) - 이벤트가 부모에서부터 발생해서 자식으로 전파 밖에서부터 안쪽으로 이벤트가 전파됨 IE 낮은 버전에서는 작동하지 않기 때문에 많이 사용 X 코드에서 차이점은 document.querySelector('html').addEventListener('click', handler, true); 이벤트리스너의 3번째 인자(use capturing) 기본값은 false ->3번째 인자를 주지 않는다면 자동으로 버블링 처리 값이 true이면 캡쳐링, false이면 버블링 버블링(bubbling) - 이벤트..

이벤트란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미 이벤트 관련 용어 ▶event target target은 이벤트가 일어날 객체를 의미한다. ▶event type 이벤트의 종류를 의미한다. 아래 예시 코드의 경우 click 이벤트 타입이다. 어떤 "때"에 해당하는 것 태그마다 사용할 수 있는 타입이 다르다 ▶event handler 이벤트가 발생했을 때 동작하는(실행될) 코드를 의미 아래 예시 코드에서는 alert(window.location) 이 이벤트 핸들러에 해당한다. //event target: button 태그에 대한 객체 //event type: click 이벤트 타..

😏이번 시간에는 요소들의 위치와 크기를 알아내는 방법을 배운다.😏 *기하학: 도형 및 공간의 성질에 대하여 연구하는 학문 요소의 크기와 위치 우선 엘리먼트의 크기를 알아내는 방법을 살펴보자. Element.getBoundingClientRect // 엘리먼트의 크기(보더 + 패딩 + 콘텐트 NOT margin)와 위치를 알고 싶을 때 사용하는 메소드 영어작명 그대로 클라이언트 직사각형 바운딩을 가져온다 라는 의미 EI 에서는 width 와 height의 값을 지원하지 않는다. 근데 EI는 죽어벌임 위치를 알아낼 때 기준점이 되는 부모는 body 태그(문맥상 문서) 입니다.(엘리먼트의 위치를 의미하는 top, right의 값을 통해서) 엘리먼트가 중첩되어 있을 경우? 엘리먼트가 중첩되어 있더라도 기준점이 ..

Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. -> html 문서에서 최상위 요소는 Doctype(문서의 형식을 지정하는 요소)과 html 태그 라는 것을 알 수 있다. *window 객체는 전역객체이므로 생략이 가능하다. 주요 API에 대해서 알아보자. 노드 생성 API document 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. document.createElement() document.createTextNode() 문서 정보 API title URL referrer // 링크를 통해 현재 페이지로 이동 시킨, 전 페이지의 URI 정보를 반환. 페이지로 바..

이전까지 노드 변경 API 에서는 여러 메소드를 이용해서 노드를 제어하는 방법에 대해서 알아봤다. 그 전의 방식들이 조금 장황한 편이라서 비교적 편리하게 노드를 조작하는 방법을 알아보자. 예시로 엘리먼트에 content를 추가할 때 createTextNode() 메소드를 이용하여 텍스트 노드를 생성한 뒤 추가하는 등 번잡함이 있다. appendChild()도 마찬가지 문자열로 노드 제어 ▶innerHTML innerHTML은 문자열로 자식 노드를 만들 수 있는 기능(set)을 제공하며 자식 노드의 값을 읽어올 수도 있다(get). HTML CSS ▶outerHTML innerHTML과 차이점: outerHTML은 자기 자신도 포함한다. innerHTML의 경우 하위 엘리먼트만 해당 위의 예시에서 targ..

jQuery 노드 변경 API jQuery 를 이용해서 노드를 제어하는 방법을 알아봅시다. -> 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해있다. https://api.jquery.com/category/manipulation/ Manipulation | jQuery API Documentation Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, t..

Node객체? Node 객체는 DOM에서 시조(최상위 객체)와 같은 역할을 한다. 다른 말로 모든 DOM객체는 Node객체를 상속 받는다. Node객체의 주요기능 ▶관계 (관계 API) 엘리먼트는 서로 부모, 자식, 혹은 형제 자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.childNodes // 자식 노드들을 유사배열에 담아서 리턴 Node.firstChild //첫 번째 자식 노드 Node.lastChild //마지막 자식 노드 Node.nextSibling // 다음 형제 노드 Node.previousSibling // 이전 형제 노드 Node.contains() //해당 엘리먼트가 하위에 특정..

jQuery : 속성제어 API Element의 API에 해당하는 기능(큰 범주로는 DOM의 기능)을 jQuery에서는 어떻게 구사하는가를 알아보자. JQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 attr이다. 또한, removeAttribute에 대응되는 메소드로는 remove Attr이 있다. opentutorials ->주석 처리해놓은 부분은 DOM객체의 메소드 를 적어놓은 것이며 아래의 코드는 같은 기능을 하는 jQuery객체의 메소드를 적용한 것이다. 속성제어 API에서도 DOM(Element객체의 속성API)처럼 attribute방식과 property 방식으로 기술하는 차이가 있다. DOM과 마찬가지로 jQuery도 속성(attribute)과..