[FrontEnd] Jacascript - DOM

브라우저는 Html 파일을 트리형태로 저장한다.

출처 : 위키백과 - 문서 객체 모델

따라서 우리가 이 태그들을 자바스크립트에서 사용하려면 트리에서 탐색 알고리즘을 구현해야한다.

하지만 자료구조 배울때 느꼈지만 탐색 알고리즘짜기는 너무 힘들다. 그래서 브라우저들은 DOM API를 제공한다.

우리는 이 API를 통해서 태그들을 찾고 태그들의 속성값을 변경하는 등의 작업을 할 수 있다.

 

일단, Htm문서의 최상단의 부모는 document라 한다. 우리는 이 document로 부터 원하는 태그를 찾아야한다.

 

위와 같이 document를 치면 아래 여러함수가 뜨는 것을 볼 수있다.

함수 이름을 보니 태그의 Id, Class, 이름 등등으로 태그를 찾을 수 있다.

또 queryselector로도 찾을 수 있는 함수도 있다. 지금은 클래스 명으로 찾아 보겠다.

초록창을 들어가보면 저 네모 박스가 green_window라는 class이름으로 들어가 있다.

초록창의 네모 박스의 색을 바꿔보겠다.

성공! 

 

참고로 클래스네임으로 찾을 때는 같은 클래스 이름인 태그가 여러개 있을 수 있음으로 저렇게 HTML Collection으로 반환이 된다.