[생활코딩] Object Model(1/2)

2419 단어 DOMObjectModel생활코딩DOM
  • Object Model
  • JS를 통해서 브라우저를 제어하기 위해서는 JS로 제어할 수 있는 Object(객체)가 준비가 돼있어야 한다.
  • 우리가 자바스크립트로 제어할 수 있도록 브라우저의 여러 구성요소들을 객체로 만들어서(객체화) 제공해주는 것.
  • 웹브라우저의 구성요소 하나하나 객체화 되어있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있다.

ex)

<html>
  <body>
     <img src=“abcde”> => img tag에 src속성으로 이런 값을 주면 이 값에 해당되는 이미지를 로드(html프로그래밍)
  </body>
</html>

JavaScript를 통해 프로그래밍적으로 제어하려면?

<img src=“abcde”>

=> 이것을 JS로 제어가능한 상태, 즉 object여야함 -> 브라우저가 만들어놓은 이미지태그에 해당되는 객체를 찾아야함

브라우저에서 이미 각각의 태그들을 미리 객체로 만들어놓고 준비해두었다.
이미 만들어진 태그에 해당하는 객체를 대상으로 method를 호출한다거나, property값을 가져와서 객체를 제어.
자바스크립트를 통해 브라우저를 제어하려면? ‘객체’를 다뤄야한다.

  • document라는 객체가 있다. 메소드 중,
    document.getElementsByTagName : tag name을 이용해 엘리먼트 객체를 가져온다.
    ex) var imgs = documnt.getElementsByTagName(‘img’) : tag name이 img인 모든 element를 가지고 와서 리턴해주는 것. imgs변수에 리턴값을 받음.

img ;// []값이 나온다.
img[0];//
img[0].style.width=‘300px’;// 이미지의 크기 변경

웹브라우저의 윈도우 창에 해당되는 객체 : window
window.alert(‘Hello World’);// 경고창 뜬다.
window라는 객체에서 alert(내장함수)라고하는, 브라우저가 미리 준비해놓고 제공한 메소드를 호출해서 경고창 실행=> window라는 객체의 method.

Kotlin - 간단한 기본 문법
🐜 Mine 애플리케이션 프로젝트 - 달력 페이지 (1)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage