제로하우스

Overview dataset을 통해 태그 내에 선언한 데이터 속성을 가져올 수 있다. Song Artish // JavaScript $0.dataset.user // 'SongArtish' $0.dataset.role // 'moderator' $0.dataset.userId // 'bulgen' Copyright © 2022 Song_Artish

Event 객체 사용자 입력(onclick, onkeyup, onscroll 등)을 trigger로 발생한 이벤트 정보를 담은 객체 EventListener EventTarget.addEventListener(type, listener) EventTarget : 이벤트 감지를 위한 요소 addEventListener : EventTarget에 이벤트를 등록할 때 사용하는 이벤트 핸들러 type : 이벤트 종류 listener : (콜백 함수) 이벤트가 발생하면 실행되는 함수 - 매개변수 () 괄호를 넣지 않아도 된다! addEventListener: 이벤트를 등록할 수 있다. removeEventListener: 이벤트를 삭제할 수 있다. // 예시: 클릭을하면 alert 창을 발생하도록 하는 event..

Create createElement를 사용하여 새로운 element를 만들 수 있다. // div element를 만든다 document.createElement('div') Append append를 사용해 부모 노드에 자식 노드를 추가할 수 있다. // 생성한 div를 트리 구조와 연결한다 const exampleDiv = document.createElement('div') document.body.append(exampleDiv) appendChild 메서드는 append 메서드와는 다르게 오직 Node 객체만 받을 수 있으며, 한 번에 오직 하나의 노드만 추가할 수 있다. Read querySelector의 첫 번째 엘리먼트만을 가져오며, selector로는 아래 3가지를 가장 많이 사용한다...

Overview Element vs. Node Desc. Element 텍스트 노드를제외하고, 흔히 생각하는 태그만 지칭 Node 태그 노드와 텍스트 노드 전체를 지칭 1. 부모/자식 찾기 부모 요소 찾기 console.log(.parentElement) 자식 요소 찾기 // 의 자식 요소 찾기 console.dir(document.body.children) // console.dir은 해당 요소의 객체 정보를 출력 2. Selection (선택) 유연성이 좋은 아래의 2개의 selector를 사용한다. querySelector() querySelectorAll() 유형 구문 단일 Node document.getElementById(id) document.querySelector(selector) HTM..

Window 객체 (출처: http://www.ktword.co.kr/) Property property 설명 closed 창이 종료되었는지 여부를 나타내는 bolean 값 반환 defaultStatus 창의 상태표시줄의 텍스트를 반환하거나 설정한다. `document 창의 document 객체를 반환한다. frameElement 현재 창의 삽입된 요소를 반환한다. frames 현재 창에서 모든 요소를 반환한다. history 창의 history 객체를 반환한다. innerHeight 창의 콘텐츠 영역(뷰포트)의 내부 높이를 반환한다. innerWidth 창의 콘텐츠 영역(뷰포트)의 내부 너비를 반환한다. length 현재 창의 요소의 객수를 반환한다. localStorage 데이터를 저장하는데 사용되는..