[JavaScript] 웹 브라우저에 대한 기초 지식, DOM

이전 Browser Object Model (BOM) 포스팅에서 '웹 브라우저'가 어떻게 이루어졌는지 간단히 탐색해보는 시간을 가졌는데, 이번에는 BOM의 구성요소 중 하나인 Document 객체에 대해 간단히 다뤄보려고 한다.

 

 

 

---

 

 

2023.03.20 - [HTML, CSS, Javascript] - [JavaScript] 웹 브라우저에 대한 기초 지식, BOM

[JavaScript] 웹 브라우저에 대한 기초 지식, BOM

 

 

---

 

 

 

Document 객체는 먼저 콘솔에서 'document' 명령어를 입력해 살펴볼 수 있다. 신기하게도 해당 객체는 해당 상단에 Element탭에 나오는 것과 동일하게 현재 보고있는 소스코드를 보여준다. 이것은 이전 포스팅에 적은 것처럼 document 객체가 브라우저에 보여줄 '문서' 부분을 만든 소스코드를 가지고 있기 때문인데, 단순해 보이는 겉과 달리 가지고 있는 프로퍼티(Properties)가 많다. ' document. ' 을 콘솔에 입력하면 여러 프로퍼티가 나오는데 location객체도 동일하게 있고, 문서를 이루는 타입, 문자셋, 태그등의 정보와 cookie 정보도 들어있으며, 여러 함수들도 있고 design mode를 이용해 화면을 바꿔볼 수도 있다.

 

 

 

 

 

 

그러나 이 글에서 다루는 포인트는 Document Object Model이라는 개념 안에 핵심인 document 객체를 가지고 보여지는 페이지를 동작시키는 데에 있으므로 아래에는 간단하게 document 객체를 사용하는 방법에 대해 공유하려고 한다.

 

 

 

 

이 방법은 document 객체가 가진 함수를 이용해 해당 문서의 특정 태그에 접근해서 이벤트를 넣어주는 개념으로 접근하면 쉽다. 

 

 

1. 우선 소스 코드 내 특정태그를 선택하기 (document객체의 함수 사용)

2. 애당 태그에 이벤트를 넣어주는 방법

 

 

 

 

여기서 특정 태그접근을 위해 사용하는 함수들은 아래와 같다.

 

 

getElementById(),

getElementByName(),

getElementByTagName(),

getElementByTagNameNS()

getElementByClassName()

 

 

 

핵심은 특정 태그 속성과 값을 변수에 넣어준 뒤 해당 변수에 이벤트 또는 스타일 등을 적용하는 것이라는 것만 알면 쉽다.

jQuery 사용 전 이해해두면 큰 도움이 될 것이다.

 

 

 

이것들은 레퍼런스문서에서 쉽게 확인 및 테스트를 해볼 수 있으니 직접 한 번 해보는게 좋다.

 

 

 

 

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Document.getElementById() - Web APIs | MDN