[TIL] 2020-03-03

 

[노마드 코더]

바닐라 JS로 게임 만들기 #1Setup + Styles까지 수강

 

[프로그래머스]

자바스크립트와 웹 프론트엔드 파트 2. DOM + JS까지 수강

 

[배운 내용 정리]

HTML, CSS, JS의 개념	HTML : 웹 페이지의 구조를 나타낸다. CSS : 웹 페이지 안에 존재하는 요소들의 스타일을 나타낸다.  JS : JS로직을 통해 문서의 구조와 스타일에 변화를 줄 수 있다.  브라우저에서는 Javascript에서 HTML, CSS에 접근할 수 있는 API를 제공한다.
window 객체	Javascript 실행 시 가장 상위에 존재하는 객체이다. 변수를 선언하거나 함수 선언 시 window 객체 안에 선언됨 표시된 웹 페이지의 정보에 접근하거나 변경을 할 수 있다. [종류] window.location : 현재 브라우저 창의 주소를 나타내는 객체 window.location.href : 브라우저 창에 입력된 주소, 변경 가능 window.navigator : 브라우저 자체에 대한 정보 window.screen : 디스플레이의 사이즈 window.document : 웹 페이지 문서의 HTML, CSS 등에 대한 접근 가능
DOM(Document Object Model)	자식, 부모 Element에 접근하는 방법이다. . children : 해당 object의 자식 노드에 대한 배열 .parentNode : 부모 노드 .firstElementChild : 첫 자식 엘리먼트 .lastElementChild : 마지막 자식 엘리먼트 같은 레벨의 형제 Element에 접근하는 방법 .nextElementSibling .previousElementSibling DOM을 통해 문서에서 Element를 선택하는 방법 document.getElementBy~ : 단일 엘리먼트를 선택하는 메소드 document.getElementsBy~ : 다중 엘리먼트를 선택하는 메소드 document.getElementById() 인자로 HTML element 태그의 id를 전달하면 해당 Element(태그)가 반환됨 document.getElementByTagName() 인자로 HTML element 태그의 이름을 전달하면 해당Element(태그)들이 반환됨 document.getElementsClassName() 인자로 class의 이름을 전달하면, 해당 class의 모든 Element(태그)가 배열로 반환됨 document.getElementsByName() 인자로 name을 전달하면, 해당 name 속성을 가진 모든 Element(태그)가 배열로 반환됨. . innerHTML 속성 엘리먼트 안의 HTML코드를 변경 . innerText 속성 엘리먼트 안의 텍스트를 변경 . style 속성 css를 변경 가능 getAttribute () element의 속성의 값을 얻어옴 하나의 인자 : attribute 이름을 받음 직접 객체에 동기화되지 않는 속성에 대해서도 접근이 가능 setAttribute () element의 속성의 값을 설정함 두개의 인자 : attribute 이름, 설정할 속성의 값을 받음 직접 객체에 동기화되지 않는 속성에 대해서도 값 설정이 가능 value 속성 input element에 입력된 값은 .value를 통해 얻어올 수 있음 getAttribute 메소드로는 받아올 수 없다는 점 주의   CSS Selector를 이용한 Element 선택 document.querySelector : css selector를 기반으로 엘리먼트를 선택 조건에 부합하는 element가 여러개인 경우 첫 엘리먼트만 반환. document.querySelectorAll : css selector를 기반으로 만족하는 모든 엘리먼트를 선택 CSS Selector # : id 기반으로 선택 . : class 기반으로 선택 , : 여러개의 셀렉터를 사용   Element 추가/삭제 document.createElement() : 문자열 인자로 element tag를 입력하면 해당 엘리먼트가 생성돼 반환됨  . appendChild(인자)  추가할 element를 인자로 받아 호출된 element의 자식으로 인자를 추가함  . removeChild(인자)  삭제할 element를 인자로 받아 호출된 element의 자식중에서 해당 element를 삭제  . insertBefore(인자 1, 인자 2) 인자1로 받은 element를 호출된 element의 자식중 인자2의 이전에 추가함  . cloneNode()  호출된 element를 복사해서 반환함