DOM (Document Object Model)
- 컴퓨터가 문서를 잘 처리할 수 있도록
문서의 구조(structured representation)를 약속한 것이다. - 프로그래밍 언어가 DOM
구조에 접근할 수 있는 방법을 제공하여문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. - DOM 은 동일한
문서를 표현하고,저장하고,조작하는 방법을 제공한다. tree 형태부모 , 자식
document object
- javascript에서
document로 접근 가능하다. - children에는 문서의
최상위 엘리먼트인 html이 존재한다.
Element API
자식, 부모 엘리먼트에 접근하는 방법
.children: 해당 object의 자식 노드에 대한 배열.parentNode: 부모 노드.firstElementChild: 첫번째 자식 엘리먼트. lastElementChild: 마지막 자식 엘리먼트
같은 레벨의 형제 엘리먼트에 접근하는 방법
.nextElementSibling.previousElementSibling
단일 Element 선택
Doucoument API
DOM API를 활용해 문서에서 엘리먼트를 선택하는 방법
documnet.getElementBy~: 단일 엘리먼트를 선택하는 메소드document.getElementsBy~: 다중 엘리먼트를 선택하는 메소드
document.getElementById 메소드
- 인자로 HTMl element 태그의 id를 전달하면 해당 엘리먼트가 반환된다.
Element API
.innerHTML 속성
- 엘리먼트 안의
HTML 코드를 변경
.innerText 속성
- 엘리먼트 안의
텍스트를 변경
.style 속성
- css를 변경
.getAttribute 메소드
- element의 속성의 값을 얻어온다.
하나의 인자: attribute 이름을 받는다.- 직접 객체에 동기화되지 않는 속성에 대해서도 접근이 가능하다.
.setAttribute 메소드
- element의 속성의 값을 설정한다
두 개의 인자: attribute 이름, 설정할 속성의 값을 받는다.- 직접 객체에 동기화되지 않는 속성에 대해서도 값 설정이 가능하다.
다중 Element 선택
Doucoument API
document.getElementsBy~: 다중 엘리먼트를 선택하는 메소드. 배열형태로 값을 반환한다.
document.getElementsByTagName 메소드
- 인자로 HTML
element 태그의 이름을 전달하면해당 엘리먼트들이 반환된다. - 특정 부모 엘리먼트에서 시작해 그 부모 엘리먼트의 DOM을 거쳐 위에서 아래로 탐색한다.
- 태그
name파라미터에 일치하는 모든 자손 엘리먼트의 집합을 생성한다.
document.getElementsClassName 메소드
- 인자로
class의 이름을 전달하면, 해당 class의모든 엘리먼트가 배열로 반환된다.
document.getElementsByName 메소드
- 인자로
name을 전달하면, 해당name 속성을 가진 모든 엘리먼트가 배열로 반환된다.
Element API
.value 속성
- input element에 입력된 값은 .value를 통해 얻어올 수 있다.
-getAttribute메소드로는 받아올 수 없다는 점 주의!! 🚨
CSS Selector를 이용한 Element 선택
Document API
document.querySelector: css selector를 기반으로 엘리먼트를 선택한다.
- 조건에 부합하는 element가 여러개인 경우 첫 엘리먼트만 반환한다.document.querySelectorAll: css selector를 기반으로 만족하는 모든 엘리먼트를 선택한다.
CSS Selector
#:name기반으로 선택.:class기반으로 선택,:여러개의 셀렉터를 사용
🐢 💨 💨