[D+16] DOM

 

D+16

-  DOM -

(DOM, DOM 조작)

 

---

 

 

DOM ( Document Object Model )

• HTML(Document)에 접근하여 Object(Java Script)처럼 엘리먼트의 속성값을 얻어내거나 변경할 수 있게 하는 모델

 

• 트리구조

 

 

엘리먼트를 확인하는 방법

보통 우리는 엘리먼트를 확인할 때 콘솔창에 'console.log()'를 입력해 확인해 왔다.

 

하지만 이렇게 입력했을 경우 구체적인 속성값들을 확인하기 어렵다.

 

만약 다양한 속성들을 확인하기를 원한다면 'console.dir()'을 입력하게 되면 

엘리먼트가 객체의 형태로 다양하게 나오는 것을 확인할 수 있다.

 

 

element 객체에 사용되는 속성

속성	속성 이름
태그 이름	tagName
id	id
class 목록	classList
class 문자열	className
속성 객체	attributes
스타일 객체	style
엘리먼트에 담긴 내용	innerHTML, innerText, textContent
form 입력 값	value
자식 엘리먼트	children
부모 엘리먼트	parentElement
자식 노드	childNodes
data -* 속성에 담긴 값	dataset
이벤트	onclick

 

 

자식 엘리먼트 vs 자식 노드

• children (자식 엘리먼트)

자식 엘리먼트는 말 그대로 현재 요소에 있는 자식 요소들을 반환하는 것으로 비요소일 경우는 포함되지 않는다.

 

• childNodes (자식 노드)

현재 요소의 자식 노드가 포함된 NodeList를 반환하게 되는데 비요소인 주석같은 것도 포함되어 나오게 된다.

이를 통해 알 수 있는 건 element는 Node에 속해 있다는 것 을 할 수 있다.

 

 

innerText / innerHTML / textContent

• innerText

화면에 렌더링이 되어지고 있는 모습으로 텍스트가 보여진다.

 

• innerHTML

텍스트와 태그들까지 포함한 내용들이 나오게 되며 실제내용을 변경할 수 있다.

 

• textContent

실제 공백을 모두 포함해서 보여지며 실제내용을 변경할 수 있다.

 

 

value

value는 폼에 입력한 값을 받아올 때 사용한다.

 

HTML 화면

콘솔창

이런식으로 HTML 화면에서 '홍길동'이라는 값을 입력하게 되면

콘솔창에 value를 사용해 폼에 입력되어진 '홍길동'이라는 값을 불러올 수 있게 된다.

 

 

---

DOM 조작

간단하게 DOM의 속성과 정의 등에 대해서 알아보았다면 이번에는 DOM 직접 사용해보고 조작해 볼 수 있어야 한다.

 

 

Element 생성

엘리먼트를 생성하는 방법은 createElement를 사용하면 된다.

document.createElement('div'); // 'div'라는 요소를 만들고 싶다.

실행화면

 

 

Element 첨부하기

실행화면

콘솔 입력창

append를 사용하면 위의 화면처럼 기존에 없었던 div태그를 첨부할 수 있다.

 

이때 append는 'append, preappend, appendchild'가 있다.

 

• append

선택 요소의 자식 요소 뒤에 내용 삽입

 

• prepend

선택 요소의 자식 요소 앞에 내용 삽입

 

• appendChild

선택 요소의 자식 요소 뒤에 내용 삽입

 

	append()	appendChild()
타입	자바스크립트	DOM
추가노드	여러개 추가	단일 항목
문자열 노드 지원	가능	불가능 (노드객체만 가능)
리턴 값	없음	추가된 노드 객체 반환

 

 

Element 조회

• 태그 : getElementsByTagName

 

• id : getElementById

클래스와는 달리 아이디는 s가 빠져있는데 이는 id는 자체의 개성이 있어 한번만 사용할 수 있기 때문에 복수의 s가 빠진 것이다.

 

• class : getElementsByClassName

 

• selector : querySelector / querySelectorAll

querySelector는 가장 최상위의 요소를 확인하거나 해당 요소가 하나일때 사용하며,

querySelectorAll은 요소가 여러개일때 한번에 확인할때 사용한다.

 

 

 

Element 수정

• textContent

기존에 작성되어진 text에 재할당이 가능하다.

 

• classList.add

클래스를 필요에 따라 삽입할 수 있다.

 

 

 

Element 삭제

• remove

노드를 메모리에서 삭제하고 종료한다.

 

• removeChild

노드를 메모리에서 삭제하는 것이 아닌 부모 노드와의 자식관계를 끊어

DOM 트리에서 해제하는 것이다.