DOM과 EVENT 그리고 BOM

안녕하세요~

오늘은 DOM, Event, BOM, 에 대해 공부했습니다.

 

오늘 공부한 내용은 브라우저에서 JavaScript가 어떻게 동작하는지 이해하는 데 필요한 기본 개념들이었습니다.

 

먼저 DOM은 Document Object Model의 약자로, 브라우저가 HTML 문서를 읽고 객체 트리 형태로 만든 구조를 의미합니다. 쉽게 말하면 HTML 태그들을 JavaScript로 접근하고 수정할 수 있게 만들어주는 연결 통로라고 볼 수 있습니다.

wiki -dom

DOM을 공부하면서 document.querySelector()와 querySelectorAll()도 함께 살펴봤습니다. 

querySelector()는 조건에 맞는 첫 번째 요소를 가져오고, querySelectorAll()은 조건에 맞는 여러 요소를 가져올 때 사용합니다.

 

예전에는 getElementById() 같은 방식도 많이 사용했지만, CSS 선택자처럼 사용할 수 있는 querySelector 방식이 더 직관적으로 느껴졌습니다.

 

Event는 사용자의 행동이나 브라우저 상태 변화에 반응하는 개념이었습니다.

 

예를 들어 버튼을 클릭하거나, 입력창에 글자를 입력하거나, 폼을 제출하는 행동이 모두 이벤트가 될 수 있습니다.

 

JavaScript는 계속 실행되는 것이 아니라, 이런 사건이 발생했을 때 미리 연결해 둔 함수가 실행되는 방식이라는 점이 중요했습니다.

 

특히 addEventListener()를 사용하면 하나의 요소에 여러 이벤트 동작을 안전하게 연결할 수 있다는 점을 알게 되었습니다.

(솔직하게 아직도 이해가 안되기는 합니다... ㅠㅠ a태그가 더 쉬운 것 같아요..)

 

BOM은 Browser Object Model의 약자로, HTML 문서 자체보다는 브라우저 환경을 다루는 개념이었습니다.

 

window, location, history, localStorage, sessionStorage 같은 것들이 여기에 포함됩니다.

 

DOM이 문서 내부를 다룬다면, BOM은 브라우저 창, 주소, 방문 기록, 저장소 같은 바깥 환경을 다룬다고 이해했습니다.

 

강사님께서는 DOM과 BOM의 개념을 비슷하다고 해주셨는데 흠.. 다시 한번 더 공부해봐야겠다 싶다

 

참고 사이트

1. MDN Web Docs - Document Object Model
   https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model
   성경책입니다.
2. W3Schoool.com
   https://www.w3schools.com/js/default.asp
   Javascript연습할때 좋은 사이트라고 하네요..
3. Programiz
   https://www.programiz.com/javascript
   JS연습할때 좋은 사이트라고 하네요....