javascript - DOM과 메소드

DOM요소란?

Document Object Model 의 약자로 HTML, XML 문서의 프로그래밍 인터페이스이다.

 

DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는

방법을 제공하여 그들의 문서 구조, 스타일, 내용 등을 변경할 수 있게 도와주며,

DOM은 HTML을 위한 API이면서 HTML을 탐색할 수 있고 HTML의 구조를 바꿀 수 있다.

 

DOM은 웹 페이지의 객체 지향 표현인데 우리가 Javascript로 구현한 모든 동작들이

대체로 DOM을 수정하기 위한 것이며 Javascript는 브라우저가 읽고 어떠한 작업을

할 수 있는 언어이며 DOM은 바로 이 작업이 이루어지는 장소인 것이다.

 

쉽게 말하면 DOM은 HTML 요소들의 구조화된 표현인 것이다.

---

DOM에 접근하는 방법은 메소드를 이용하여 접근하는 방법이 있다.

 

메소드	설명
document.getElementById()	해당 아이디의 요소를 선택
document .getElementsByClassName()	해당 클래스에 속한 요소를 모두 선택
document .getElementsByName()	해당 name 속성값을 가진 요소를 모두 선택
document .querySelectorAll()	해당 선택자로 선택되는 요소들을 모두 선택
document .querySelector()	해당 선택자로 선택되는 첫 요소를 1개만 선택

 

표를 확인해보면 가장 먼저 모두 공통된 단어가 보이는데 바로 document인데

웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때에는 반드시  document로 시작을 해줘야 한다.

 

<div id="javascript" class="hello">Hello World!</div>

document.getElementById("javascript")
document.getElementsByClass("hello")[0];
document.querySelector(".hello") // class
document.querySelector("#javascript") // id

위와 같은 형태로 작성하면되고 getElementsByClassName 같이 element 뒤에 s가 붙어 복수인 경우,

배열타입으로 출력 되기에 보통 맨 뒤에 [0]을 붙여 사용한다.

 

다음 포스팅에서는 조금 더 자세하게 알아보도록 하겠다.