자바스크립트와 웹프론트엔드 - 2

본 내용은 https://programmers.co.kr/learn/courses/10

강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. 

 

 

Part2. DOM + JS

1. DOM 소개 및 탐색

[ DOM, Document Object Model ]

• 컴퓨터가 문서를 잘 처리할 수 있도록 문서의 구조를 약속한 것 ( Tree 형태 )

• document object

-      javascript에서 document로 접근 가능

-      children에는 문서의 최상위 엘리먼트인 html이 존재

[ Element API ]

• 자식, 부모 엘리먼트에 접근하는 방법

-      .children : 해당 object의 자식 노드에 대한 배열

-      .parentNode : 부모 노드

-      .firstElementChild : 첫 자식 엘리먼트

-      .lastElementChild : 마지막 자식 엘리먼트

• 같은 레벨의 형제 엘리먼트에 접근하는 방법

-      .nextElementSibling

-   .previousElementSibling

 

2. 단일 Element 선택

[ Document API ]

• DOM API를 활용해 문서에서 엘리먼트를 선택하는 방법

-      document.getElementBy~ /  document.getElementsBy~

• document.getElementById 메소드 : 인자로 HTML element 태그의 id를 전달하면 해당 엘리먼트가 반환됨

[ Element API ]

• .innerHTML 속성 : 엘리먼트 안의 HTML코드를 변경

• .innerText 속성 : 엘리먼트 안의 텍스트를 변경

• .style 속성 : css를 변경 가능 (.style.color /.style.fontsize )

• getAttribute ( attribute ) : element의 속성의 값을 얻어옴 /직접 객체에 동기화되지 않는 속성도 가능

• setAttribute ( attribute, 설정할 속성의 값) : element의 속성의 값을 설정함 / 직접 객체에 동기화되지 않는 속성도 가능

 

3. 다중 Element 선택

[ Document API ]

• document.getElementsBy~ : 다중 엘리먼트를 선택하는 메소드. 배열형태로 값을 반환함

• document.getElementsByTagName ( tagname ) : 해당 엘리먼트들이 반환됨

• document.getElementsClassName ( classname) : 해당 class의 모든 엘리먼트가 배열로 반환됨

• document.getElementsByName ( name ) : 해당 name 속성을 가진 모든 엘리먼트가 배열로 반환됨

.

[ Element API ]

• .value 속성 : input element에 입력된 값은 .value를 통해 얻어올 수 있음

*c getAttribute 메소드로는 받아올 수 없다는 점 주의

 

4. CSS Selector를 이용한 Element 선택

[ Document API ]

• document.querySelector(  ) : css selector를 기반으로 조건에 부합하는 첫 element만 반환.

• document.querySelectorAll(  ) : css selector를 기반으로 만족하는 모든 엘리먼트를 선택

[ CSS Selector ]

-      # : name 기반으로 선택 / . : class 기반으로 선택 /  , : 여러개의 셀렉터를 사용

-       

5. Element 추가/삭제

[ Document API ]

• document.createElement( ) : 문자열 인자로 element tag를 입력하면 해당 엘리먼트가 생성돼 반환됨

 

[ Element API ]

• .appendChild(인자) : 추가할 element를 인자로 받아 호출된 element의 자식으로 인자를 추가함

• .removeChild(인자) : 삭제할 element를 인자로 받아 호출된 element의 자식중에서 해당 element를 삭제

• .insertBefore(인자1, 인자2) : 인자1로 받은 element를 호출된 element의 자식중 인자2의 이전에 추가함

• .cloneNode() : 호출된 element를 복사해서 반환함

hr = document.createElement( “hr“ );

document.body.appendChild( hr );

hr2 = hr.cloneNode ( ) ;