// E4D217 C47FE8
자바스크립트와 웹 프론트엔드 강의와 구글링을 통해서 정리한 글입니다.
DOM + JS
DOM (Document Object Model)
DOM(Document Object Model)은 웹 페이지에 대한 인터페이스입니다.
기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다.DOM은 원본 HTML 문서를 객체 기반 표현 방식으로 나타냅니다.
개체 구조는 “노드 트리”로 표현됩니다.
콘솔창에서 document로 접근 가능
document.children[0] 를 통해 문서의 최상위 엘리먼트인 html을 확인가능
Document API를 통해 Element 선택하기
1. 단일 Element 선택
자식, 부모 엘리먼트에 접근하는 방법
- .children : 해당 object의 자식 노드에 대한 배열
- .parentNode : 부모 노드
- .firstElementChild : 첫 자식 엘리먼트
- .lastElementChild : 마지막 자식 엘리먼트
같은 레벨의 형제 엘리먼트에 접근하는 방법
- .nextElementSibling
- .previousElementSibling
2. 다중 Element 선택
document.getElementsBy~ : 다중 엘리먼트를 선택하는 메소드. 배열형태로 값을 반환함
-
document.getElementsByTagName() 메소드
인자로 HTML element 태그의 이름을 전달하면 해당 엘리먼트들이 반환됨 -
document.getElementsClassName() 메소드
인자로 class의 이름을 전달하면, 해당 class의 모든 엘리먼트가 배열로 반환됨 -
document.getElementsByName() 메소드
인자로 name을 전달하면, 해당 name 속성을 가진 모든 엘리먼트가 배열로 반환됨
3. CSS Selector를 이용한 Element 선택
CSS Selector
# : name 기반으로 선택
. : class 기반으로 선택
, : 여러개의 셀렉터를 사용document.querySelector() : css selector를 기반으로 첫번째 엘리먼트를 반환
document.querySelectorAll() : css selector를 기반으로 만족하는 모든 엘리먼트를 선택, 배열형태로 값을 반환
4. Element 추가/삭제
document.createElement() : 문자열 인자로 element tag를 입력하면 해당 엘리먼트가 생성돼 반환됨
.appendChild(인자)
➡ 추가할 element를 인자로 받아 호출된 element의 자식으로 인자를 추가함
.removeChild(인자)
➡ 삭제할 element를 인자로 받아 호출된 element의 자식중에서 해당 element를 삭제
.insertBefore(인자1, 인자2)
➡ 인자1로 받은 element를 호출된 element의 자식중 인자2의 이전에 추가함
.cloneNode()
➡ 호출된 element를 복사해서 반환함Element API 활용
.innerHTML 속성
➡ 엘리먼트 안의 HTML코드를 변경
.innerText 속성
➡ 엘리먼트 안의 텍스트를 변경
.style 속성
➡ css를 변경 가능
getAttribute 메소드
➡ element의 속성의 값을 얻어옴
# 하나의 인자 : attribute 이름을 받음
# 직접 객체에 동기화되지 않는 속성에 대해서도 접근이 가능
setAttribute 메소드
➡ element의 속성의 값을 설정함
# 두개의 인자 : attribute 이름, 설정할 속성의 값을 받음
# 직접 객체에 동기화되지 않는 속성에 대해서도 값 설정이 가능
.value 속성
➡ input element에 입력된 값은 .value를 통해 얻어올 수 있음
(getAttribute 메소드로는 input에 입력된 값을 받아올 수 없다)
쥐구멍에 볕드는 날