태기의삶
2020. 3. 3. 22:34
[노마드 코더]
바닐라 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 속성
. innerText 속성
. style 속성
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()
|