[Javascript] DOM(Document, Object, Model)

DOM, DocuMent Object Model 

컴퓨터가 문서를 잘 처리할 수 있도록 문서의 구조를 약속한 것 

 -tree 형태에 따름: 족보나 가계도와 비슷함

 

document object 

• javascript에서 document로 접근가능
• childen에는 문서의 최상위 엘리먼트인 html이 존재

Element API

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

• childen : 해당 object의 자식 노드에 대한 배열
• parentNode : 부모 노드
• firstElementChild : 첫 자식 엘리먼트 
• lastElementChild : 마지막 자식 엘리먼트 

 

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

• nextElementSibling 
• previousElementSibling

Document API

 

• DOM API를 활용하여 문서에서 엘리먼트를 선택하는 방법
• document.getElementBy ~ 단일 엘리먼트를 선택하는 메소드
• document.getElementsBy ~ 단일 엘리먼트를 선택하는 메소드
•  

document.getElementById 메소드

• 인자로 html element 태그의 id를 전달하면 해당 엘리먼트가 변환됨

 

Element API

• innerHTML 속성
• 엘리먼트 안의 HTML코드를 변경(태그까지)
•  
• innerText 속성
• 엘리먼트 안의 텍스트를 변경(태그까지 글자로 취급됨)

 

style 속성

• css를 변경가능
•  

getAttribue 메소드

• element의 속성 값을 얻어옴
• 하나의 인자 : attribute 이름을 받음
• 직접 객체에서 동기화되지 않는 속성에 대해서도 접근이 가능 

setAttribute 메소드

• element의 속성의 값을 설정함(저장)
• 두개의 인자 : attribute의 이름과 설정할 속성의 값을 받음
• 직접 객체에 동기화되지 않는 속성에 대해서도 값 설정 가능 

 

다중 Element 선택

Document API

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

 

document.getElementsByTagName 메소드

• 인자로 HTML element 태그의 이름을 전할하면 해당 엘리먼트들이 반환됨

 

document.getElementsByClassNmae 메소드

• 인자로 class의 이름을 전달하면 해당 class의 모든 엘리먼트가 배열로 반환됨

 

document.getElementsByName 메소드

• 인자로 name를 전달하면 해당 name 속성을 가진 모든 엘리먼트가 반환됨

 

Element API

.value속성

• input element에 입력된 값은 .value를 통해 얻어올 수 있음
• getArttribute 메소드로는 받아올 수 없다는 점 주의 

CSS Selector를 이용한 Element 선택

Documnet API

• document.querySelector : css selector를 기반으로 엘리먼트를 선택
• 위 조건에 부합하는 element가 여러개인 경우 제일 첫번째 엘리먼트만 반환.
• document.querySelector : css selector를 기반으로 만족하는 모든 엘리먼트를 석택
•  

 

CSS Selector

• #: id를 기반으로 선택 
• . : class를 기반으로 선택
• , : 여려개의 셀렉터를 사용(예 documemt.querySelectorAll(h1, h2)

 

Element 추가/삭제

Documnet API

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

 

Element API

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

• 예 => a.appendChild(b) : a라는 엘리먼트의 자식으로 b가 추가된다.

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

• 예 => a.removeChild(b) : a라는 엘리먼트의 자식으로 b가 삭제된다.

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