DOM... 내가 알고 있는 돔은
이 형이다.. 영화 '분노의 질주'의 도미닉 토레토(돔)... 정말 좋아하는 형님.
그러나 이제는 DOM이라는 단어를 보면 다른 DOM을 떠올리려 한다. 그것은 바로
✨ DOM (Document Object Model)
-
DOM은 자바스크립트와는 독립적인 기술 표준이다.
-
DOM은 HTML, CSS와 같은 W3C의 기술의 한 종류이다.
-
HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 잇는 역할이다.
-
JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다.
-
DOM은 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다.
또한, DOM의 개체 구조는 “노드 트리”로 표현된다. 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조로 이루어져 있기 때문이다.
HTML, CSS가 사용자에게 직접적으로 보이는 것이라면,
DOM은 기계나 소프트웨어가 웹 사이트의 구조를
어떻게 이해하는지에 대한 표준이라고 할 수 있다.
✨ DOM 의 요소들
JS에서 Dom을 통해서 HTML을 제어하기 위해서는 해당 요소를 선택해야 한다.
-
HTML 태그 이름(tag name)을 이용한 선택
- getElementsByTagName() : HTML 태그 이름을 이용하여 요소를 선택
-
name 속성(attribute)을 이용한 선택
- getElementByName() : HTML 요소의 name 속성을 이용하여 요소를 선택
-
아이디(id)를 이용한 선택
- getElementById() : 아이디를 이용하여 요소를 선택
-
클래스(class)를 이용한 선택
- getElementsByClassName() : 클래스 이름을 이용하여 요소를 선택
-
CSS 선택자(selector)를 이용한 선택
- querySelectorAll() : CSS 선택자(아이디, 클래스, 속성, 속성값 등)를 이용하여 요소를 선택
🌕 'DOM'에 대하여 간단하고 명료하게 정리해 보았다.
앞으로 공부하면서 더 다양하고 유용한 요소들과 DOM에 대해서 더욱 깊게 공부해봐야겠다는 것을 느꼈다.
사람들은 현재에 만족하지 않고 지금보다 훨씬 편리하고 효율적인 것을 찾아가기에 개발의 환경과 세계가 이렇게까지 발전했다는 것을 알 수 있었고 나 역시 그들의 노력에 감사하고 개발자의 길을 걸어가기 위해 같은 고민과 노력에 열심히 열정을 쏟아부어야겠다고 생각했다.🔥
