Javascript - BOM (Browser Object Model)

30 Jul 2018 • Javascript
  • 브라우저 객체 모델
  • 웹브라우저에서 사용하는 자바스크립트에서만 사용할 수 있는 객체 모델
  • 모든 브라우저 객체들은 window 객체에 귀속
   - BOM 객체의 종류

      window.location
      window.navigator
      window.history
      window.screen
      window.documqent

2. window.onload( )

  • HTML 읽는 순서 : 위에서 아래로 읽음
  • HTML > HEAD > TITLE > SCRIPT > BODY > …
  • document.querySelecor(“”) : css selector를 통해 DOM을 찾을 수 있음.
  • head 태그 안의 script에 작성할 경우 body에 있는 선택자에 선택되지 않음.
<html>
  <head>
    <title>Document Object Model</title>
    <script>
      // 에러 발생, 이 '<script></script>' 태그 내부에서 'h1' 태그를 찾을 수 없습니다.
        document.querySelector("h1").style.color = "red";
    </script>
  </head>
  <body>
    <h1>Process -1 </h1>
    <script>document.write('script test 2')</script>
    <h2>Process -2</h2>
    <script>document.write('script test 2')</script>
  </body>
</html>
  • 해결방법 1 : script 태그를 body 태그 안으로 옮긴다
<body>
    <h1>Process -1 </h1>
    <script>document.write('script test 2')</script>
    <h2>Process -2</h2>
    <script>document.write('script test 2')</script>

     <script>
     //script 태그를 body 태그 안으로 이동
        document.querySelector("h1").style.color = "red";
    </script>
  </body>
  • 해결방법 2 : head 태그 안의 script 에 작성할 때, window.onload( )(화면이 로드될 때 함수 실행) 이벤트를 사용한다.
  <head>
    <title>Document Object Model</title>
    <script>
  // window.onload() 이벤트 사용
  	window.onload = () => { document.querySelector("h1").style.color = "red" };
    </script>
  </head>

Comments

Related Posts