자바스크립트의 Object Model
웹브라우저의 구성요소들은 하나하나 객체화 되어있다.
자바스크립트는 이 객체를 제어해 웹브라우저를 제어하게 된다.
BOM(Browser Object Model)과 DOM(Document Object Model)은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 생각하면 된다.
이관계는 아래와 같이 나타낼 수 있다.
window는 전역객체로 보면된다.
그러므로, window.document 대신, document를 써도 객체에 접근이 가능하다.
JavaScript Core
JavaScript 언어 자체에 정의되어 있는 객체들.
BOM
Browser Object Model. 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것이다. 전역객체 Window의 프로퍼티에 속한 객체들이 이에 속한다.
웹브라우저를 운영하기 위한 객체를 조작합니다새창을 열거나, 또는 현재창의 url을 가져오거나
브라우저의 버전, 모델을 알 수 있음.
<!DOCTYPE html>
<html><body> <input type="button" onclick="alert(window.location)" value="alert(window.location)" /> <input type="button" onclick="window.open('bom.html')" value="window.open('bom.html')" /></body></html>alert
경고창이라 부른다. 사용자에게 메시지를 주거나, 디버깅 등의 용도로 사용된다.
<!DOCTYPE html>
<html> <body> <input type="button" value="alert" onclick="alert('hello world');" /> </body></html>confrim
확인을 누르면 true, 취소를 누르면 false를 리턴한다.
<!DOCTYPE html>
<html> <body> <input type="button" value="confirm" onclick="func_confirm()" /> <script> function func_confirm(){ if(confirm('ok?')){ alert('ok'); } else { alert('cancel'); } } </script> </body>
</html>아래와 같이 확인 / 취소 분기되어 알림창이 뜬다.
prompt
사용자로 하여금 입력값을 받을 수 있다.
<!DOCTYPE html>
<html> <body> <input type="button" value="prompt" onclick="func_prompt()" /> <script> function func_prompt(){ //문자열이 같으면 알림창을 뜬다. if(prompt('id?') === 'lotty'){ alert('welcome'); } else { alert('fail'); } } </script> </body></html>아래와 같이 사용자로 하여금 입력값을 받아야 하는 것을 확인할 수 있다.
DOM
Document Object Model. 웹페이지의 내용을 제어한다. window의 프로퍼티인 document 프로퍼터에 할당된 Document 객체가 이러한 작업을 담당한다.
일례로, <body>, <img> 등과 같은 태그가 이에 속한다.
Document 객체의 프로퍼티는 문서 내의 주요 엘리먼트에 접근할 수 있는 객체를 제공한다.
<!DOCTYPE html>
<html><body> <script> // body 객체 console.log(document.body); // 이미지 객체들의 리스트 console.log(document.images); </script></body></html>또한 특정한 엘러먼트의 객체를 획득할 수 있는 메소드도 제공한다.
<!DOCTYPE html><html><body> <script type="text/javascript"> // body 객체 console.log(document.getElementsByTagName('body')[0]); // 이미지 객체들의 리스트 console.log(document.getElementsByTagName('body')); </script></body></html>
크롬 개발자도구에서 확인하면, 아래와 같이 엘리먼트 요소들을 가져온 것을 확인할 수 있다.
출처: 생활코딩
'IT > Javascript' 카테고리의 다른 글
| [javascript] 이벤트 추가 및 제거 (0) | 2021.02.17 |
|---|---|
| [javascript] 이벤트 버블링과 캡처링 (0) | 2021.02.17 |
| eslint 자동완성 이슈 (0) | 2020.12.10 |
| 자바스크립트 코딩 테스트에서 가장 많이하는 실수들 (0) | 2019.11.15 |
| HTML에서 JavaScript 로드하기 (0) | 2017.12.27 |
