[TIL] DOM(Document Object Model) 이란?

 

 

 

🌷 DOM(Document Object Model) 문서객체모델에 대하여 

---

 

DOM에 대해 강조하는 분들이 꽤 있어서 열심히 공부해보려 했지만 

처음 접했을 땐 이게 몰까.. 문서 객체 모델..? 단어 하나부터 어려워요.. 공부의 세계란 끝이 없다(?)

 

그래서 살짝 제껴 놓고 다른 강의 들을 듣다가 오늘 다시 공부를 했는데 제법 이해가 되어서 정리해 보려한다 😎

 

 

 

✔️ DOM의 구조는 나무처럼 생김 ㅡ DOM 트리라고도 한다 

 

Live DOM Viewer  

아래 사이트에 들어가서 이것저것 실습해보면 쬐끔 감이 잡힘..

https://software.hixie.ch/utilities/js/live-dom-viewer/

Live DOM Viewer

 

 

 

✔️ HTML은 정적인 text 이므로 JavaScript를 사용하여 웹 문서의 일부를 동적으로 만든다

(DOM의 목적이라고 할 수 있겠쬬)

 

 

 

✔️ DOM 요소에 접근하기

 

 

1️⃣ DOM 요소를 id 선택자로 접근하는 함수 ㅡ getElementById()

 

제로초님 게임강의를 들으면서 이 함수를 처음 접해봤던 나..! 이제 죄금 이해가가는 함수이다

 

h1 에는 id 값이 있기 때문에 id 선택자를 사용하여 DOM 요소에 접근하는 함수가 바로

getElementById("heading") 

**console 창에 넣어보면 id 값이 heading인 요소를 출력할 것이당 

 

 

 

 

 

2️⃣ DOM 요소를 class값으로 찾아내는 함수 ㅡ getElementsByClassName() 

 

By 앞에 Elements를 보면 's'가 붙어 있다 

class 선택자는 id 선택자와 다르게 웹 문서 안에서 여러 번 사용할 수 있음! 그래서 2개 이상의 웹 요소에 접근할 수 있다!

 

class 값이 "accent" 인 것 두개가 있지요 오늘은과 토끼구름 

getElementsByClassName("accent")

콘솔창에 입력해 보면 오늘은, 토끼구름 요소에 모두 접근하는 것을 볼 수 있다 

1개의 요소에만 접근하고 싶다면 인덱스를 사용하면 된다 

getElementsByClassName("accent")[0] 이렇게 !!

 

 

 

 

3️⃣ DOM 요소를 태그 이름으로 찾아내는 함수 ㅡ getElementsByTagName()

 

id나 class 선택자가 없을땐 이 함수를 사용하여 요소에 접근하기 (여기에도 's'가 붙어 있기 때문에 여러 요소를 모두 찾아 접근한다) 

getElementsByTagName("h2") 이렇게 접근하면 h2의 두가지 요소가 나오게 된다 

 

이때도 한 개의 요소에만 접근하고 싶다면 인덱스를 사용하면 된다 

getElementsByTagName("h2")[1] => NewJeans에만 접근 !!

 

 

 

4️⃣ DOM 요소를 다양한 방법으로 찾아주는 함수 ㅡ querySelector(), querySelectorAll()

 

이 함수는 많이 보셨죠? (아는척) 후후.. 

id, class 값을 사용해도 되고 태그 이름을 사용해도 되는 함수이다 

입력할 때 : class 값 앞에는 마침표(.), id값 앞에는 샵(#)을 붙이면 된다 태그는 기호 없이 태그 이름만 사용

 

getElementById() 함수와 querySelector() 함수를 사용할 때 다른 점은 아래와 같아요

 

getElementById("container")

querySelector("#container") 

 

다른점을 아시겠찌오? (아는척...) 녜녜..