JavaScript - DOM

<목차>

1. DOM이란?

2. javascript 예제

---

1. DOM이란?

Document Object Model의 약자로 HTML, XML 문서의 프로그래밍 interface이다.

프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

웹 페이지는 일종의 문서(document)이기 때문에 JavaScript와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.

페이지 콘텐츠는 DOM에 저장되고 JavaScript를 통해 접근하거나 조작할 수 있다.

 

---

2. javascript 예제

 

요소 선택

 

getElementById

// getElementById
// test라는 아이디를 가지고 있는 요소를 찾아서 반환
// 해당하는 id를 가진 HTML element를 발견하지 못한 경우 null이 반환된다.
document.getElementById("test");

 

getElementByClassName

// getElementByClassName
// 해당하는 클래스를 가진 모든 HTML element를 반환
document.getElementByClassName("");

 

getElementByTagName

// getElementByTagName
// 해당 tag를 가진 모든 HTML element를 반환
document.getElementByTagName("")

 

---

querytSelector

// querySelector
document.querySelector("");

 

getElementBy와 다르게 해당하는 요소 중 가장 첫 번째 요소를 반환한다.

css의 선택자처럼 class는 .클래스명 id는 #아이디명으로 접근한다.

 

querytSelectorAll

querytSelector는 해당하는 요소 중 첫 번째 요소를 반환하지만 querytSelectorAll은 해당하는 모든 요소를 반환한다.

// quertSelectorAll
document.querySelectorAll("")

 

---

innerHTML

innerHTML은 태그 안에 HTML을 넣을 때 사용한다.

querySelector나 getElementBy로 가져온 요소 안에 자식 요소가 생성된다.

innerHTML은 태그 안의 내용을 재할당 하는 방식이라 할당연산자(=)만 사용 시 원래 있던 내용이 제거되고 추가한 내용으로 변한다.

let temp = document.querySelector(".test")

// innerHTML
// querySelector로 가져온 요소의 자식이 제거된다.
temp.innerHTML = "";

// querySelector로 가져온 요소의 자식요소들의 맨 뒤에 요소가 추가된다.
temp.innerHTML += "";

 

innerTEXT

innerHTML은 "<div></div>"를 할당할 시 div태그가 자식요소에 추가되지만 innerTEXT로 "<div></div>"를 할당할 시 문자열의 형태로 자식요소에 추가된다. (태그로 변환되지 않고 문자열 그대로 "<div></div>"가 추가됨)

let temp = document.querySelector(".test")

// innerTEXT
temp.innerTEXT = "";

 

---

createElement, append

// 요소 생성 노드
let el = document.createElement("div");
// 여기까지는 데이터에만 요소가 있는 상태
// append 노드로 요소를 추가주어야 한다.
document.querySelector(".test").append(el);