Javascript

자바스크립트 DOM, BOM을 알아보자

코드사냥꾼 2021. 3. 7. 00:05

본 내용에 들어가기 앞서 Window 객체에 대해 간단히 알아볼 것이다. JSC(Javascript core), DOM, BOM을 포함한 전역 객체이기 때문이다.

이때, F12를 눌러 콘솔 모드를 열어 Window 객체에 접근해보자 

위의 예시를 보면 알 수 있듯이 모든 객체들이 Window 객체에 소속되어 있다는 것을 확인할 수 있다. 따라서 우리가 만든 변수, 함수이거나 브라우저가 제공하는 기본적인 내장 함수는 Window 객체의 메소드이다. 

alert('hello world!'); == window.alert('hello world!');

BOM이란?

Browser Object Model의 약자이며, 웹 브라우저에 대한 모든 내용을 담고있는 객체이다. 뒤로 가기, 북마크, 웹 브라우저 새 창 띄우기, 히스토리, URL 정보 등을 확인할 수 있다. 

[활용사례] 사용자와 커뮤니케이션

사용자에게 정보를 제공하거나, 사용자로 하여금 어떤 정보를 입력하게 해서 그 정보를 처리하는 방법이다.

alert

경고창이라고 부른다. 사용자에게 정보를 제공하거나 디버깅등의 용도로 많이 사용한다. 

<!DOCTYPE html>
<html>
  <body>
    <input type="button" value="alert" onclick="alertfnc();" />
    <script>
      function alertfnc(){
         alert(1);
         alert(2);
         alert(3);
      }
    </script>
  </body>
</html>

 

confirm

사용자의 긍정 및 부정 선택에 따라 true값과 false값을 리턴하며, alert과 비슷하지만 다른 성격을 가지는 메시지를 띄운다.

<!DOCTYPE html>
<html>
  <body>
    <input type="button" value="confirm" onclick="func_alertfnc();" />
    <script>
      function func_alertfnc(){
         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?') === 'codechasseur'){
            alert('hi codechasseur');
        } else {
            alert('fail');
        }
      }
    </script>
  </body>
</html>

 

[활용사례] Location 객체

현재 웹 브라우저 창의 URL을 알려주는 객체이다.

console.log(location.protocol); // 현재 문서의 프로토콜을 나타냄 [결과] http: or https:
console.log(location.host); // 현재 문서의 도메인 주소를 나타냄 [결과] codechasseur.tistory.com
console.log(location.port); // 현재 문서의 port 번호를 나타냄 [결과] 8080
console.log(location.pathname); // 현재 문서가 가지고 있는 구체적인 정보의 위치 [결과] manage/newpost
console.log(location.search); // 서비스에 전달된 값을 출력 [결과] ?id=20
console.log(location.hash); // 주소에 담긴 해쉬태그 값(북마크)을 출력 [결과] #bookmark

 

DOM이란?

Document Object Model의 약자이며, 열려있는 웹 페이지에 대한 정보를 따로 객체화하여 관리한다. 이때, Window 객체의 document 프로퍼티를 사용한다.

[활용사례] DOM tree

웹 브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때, 모델은 객체의 트리로 구성되는데 이것을 DOM tree라고 한다. DOM tree는 총 네 종류의 노드로 구성된다.

DOM tree 객체 구성

 

문서 노드(Document Node)

트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다.

요소 노드(Element Node)

요소 노드는 HTML 요소를 표현한다. HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 서술한다고 말 할 수 있다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTML Element 객체를 상속한 객체로 구성된다.

어트리뷰트 노드(Attribute Node)

어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현한다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.

텍스트 노드(Text Node)

텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 최종단이다.

크롬 개발자 도구(F12)에서 확인한 DOM tree

 

[활용사례] 제어대상찾기

document.getElementsByTagName

인자로 전달된 태그명에 해당하는 객체를 찾아서 그 리스트를 NodeList라는 유사 배열에 담아 변환한다. NodeList는 배열은 아니지만 length와 배열접근연사자를 사용해서 엘리먼트를 조회할 수 있다.

<!DOCTYPE html>
<html>
  <body>
     <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
     </ul>
     
     <script>
       var list = document.getElementsByTagName('li');
       for(var i = 0; i < list.length; i++){
         list[i].style.color = 'red';
       }
     </script>
  </body>
</html>

 

document.getElementsByClassName

class 속성 값을 기준으로 객체를 조회할 수 있다.

<!DOCTYPE html>
<html>
  <body>
     <ul>
        <li>HTML</li>
        <li class="active">CSS</li>
        <li class="active">JavaScript</li>
     </ul>
     
     <script>
       var list = document.getElementsByClassName('active');
       for(var i = 0; i < list.length; i++){
         list[i].style.color = 'red';
       }
     </script>
  </body>
</html>

 

document.getElementById

id 값을 기준으로 객체를 조회하며 성능측에서 가장 우수하다. 또한, 조회한 결과는 하나의 결과만 가진다.

<!DOCTYPE html>
<html>
  <body>
     <ul>
        <li>HTML</li>
        <li id="active">CSS</li>
        <li>JavaScript</li>
     </ul>
     
     <script>
       var list = document.getElementById('active');
       list.style.color='red';
     </script>
  </body>
</html>

 

document.querySelector

css 선택자의 문법을 사용하여 객체를 조회할 수 있다.

<!DOCTYPE html>
<html>
  <body>
     <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
     </ul>
     
     <ol>
        <li>HTML</li>
        <li class="active">CSS</li>
        <li>JavaScript</li>
     </ol>
     
     <script>
       var list = document.querySelector('li');
       list.style.color = 'red';
       
       var qs = document.querySelector('.active');
       qs.style.color = 'blue';
     </script>
  </body>
</html>

 

document.querySelectorAll

querySelector와 기본적인 동작방법은 같지만 모든 객체를 조회한다는 점이 다르다.

<!DOCTYPE html>
<html>
  <body>
     <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
     </ul>
     
     <ol>
        <li>HTML</li>
        <li class="active">CSS</li>
        <li>JavaScript</li>
     </ol>
     
     <script>
       var list = document.querySelector('li');
       
       // 향상된 for 문
       for(var name in list){
         list[name].style.color = 'blue';
       }
     </script>
  </body>
</html>
저작자표시 비영리

'Javascript' 카테고리의 다른 글

이벤트가 발생한 대상의 데이터 값 가져오기 - event.target  (0) 2021.04.19
데이터 속성 값(data-)의 개념과 활용을 알아보자  (0) 2021.04.19
자바스크립트 프로토타입(Prototype)과 프로토타입 체인(Prototype Chain) 기초 다지기  (0) 2021.03.01
리팩토링 작업 - 중복 제거와 this 키워드  (3) 2021.03.01

'Javascript'의 다른글

  • 현재글자바스크립트 DOM, BOM을 알아보자

관련글

댓글

티스토리툴바