Object Model & 객체화

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

 

---

웹페이지를 제어하기 위해서는 JavaScript를 로드해야 한다.

 Object Model 

자바스크립트로 웹 브라우저를 제어할 수 있도록, 브라우저의 여러 구성요소들을 객체로 만들어서 제공해주는 것을 Object model이라고 한다.

 

웹브라우저의 구성요소들은 하나하나가 객체화되어 있다. 

자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다.

---

1) JSC ( 자바스크립트 코어 )

2) BOM ( 브라우저 오브젝트 모델 )

3) DOM

 

위 3가지는 자바스크립트를 통해서 브라우저를 제어하는 데 있어서, 가장 큰 틀에 테두리와 같은 역할하는 것이다.

 

---

 객체화 

객체를 만드는 행위를 의미한다.

---

만약 웹페이지에서 이미지를 출력하려면, html 소스는 어떻게 작성해야 할까?????

html에 속성을 부여하여 img 태그로, 브라우저에서 사진을 불러와야 한다.

 

여기서, 자바스크립트를 통해서 프로그래밍적으로 제어하려면 이미지 태그가 자바스크립트로 제어 가능한 형태가 되어야 한다. 즉, object여야 한다는 뜻이다.

 

그렇다면, object는 누가 만드는 것일까?

object는 브라우저에서 이미 웹페이지에 있는 내용을 읽는 과정에서 각각의 태그들마다 미리 객체를 만들어 놓고 준비해 두고 있다.

---

즉, 우리는 만들어진 태그에 해당되는 객체를 찾아서, 그 객체를 대상으로 어떠한 메소드를 호출하거나 프로퍼티 값을 가져오는 등의 행위를 통해서 객체를 제어할 수 있었던 것이다.

 

따라서, 객체를 제어한다는 것은 그 객체가 가르키고 있는 태그를 우리가 제어한다는 의미이다.

---

 객체를 제어하는 방법 

사용하고자 하는 태그에 해당되는 객체를 찾아야 한다.

 

그렇다면, 브라우저가 갖고 있는 document 객체 안의 getElementsByTagName이라는 메소드를 사용하여 제어해보자.

해당 메소드는 tagname을 이용해서 Element객체를 가져온다는 뜻이다.

---

이미지 태그를 제어한다고 가정해보자.

getElementsByTagName의 인자로 img라는 값을 주면, img라는 태그의 이름을 가지고 있는 모든 Element를 가지고 와서 결과를 리턴해준다.

 

리턴된 결과값을 아래와 같이 imgs 변수에 넣어줘서 사용하면 된다.

var imgs = document.getElementsByTagName('img');

---

아래는 생활코딩이라는 이미지를 출력해주는 웹페이지이다.

이 페이지에, img 태그 이름을 가지고 있는 모든 Element의 결과를 가져와서 페이지에 있는 이미지를 제어해보자.

 

저장한 변수를 확인해보니, 배열로 저장된 것을 확인할 수 있다. 

그렇다면, 변수에 들은 값 확인을 위해 img[0]이라는 명령어를 입력해보자.

그 결과, 페이지에 대한 이미지 태그를 가져올 수 있다.

즉, imgs[0]명령어를 통해서 원하는 이미지 태그를 선택할 수 있었다.

---

이렇게 선택한 이미지 태그에 .style을 하면 해당 태그가 가지고 있는 스타일을 제어할 수 있다.

따라서, 이미지 크기를 제어하고 싶으면 아래와 같이 설정해주면 된다.

imgs[0].style.width = '30px';

콘솔 창에 해당 명령어를 입력하면, 아래와 같이 img태그에 sytle코드가 추가되고 사진이 30px로 작아진 것을 확인할 수 있다.

 

즉, 이미 화면에 만들어진 img 태그를 html을 통해서는 변경이 불가능하지만 태그가 의미하는 객체를 찾아내면 변경이 가능하다. 이러한 객체는 document.getElemetsByTagName을 통해 찾을 수 있다.