DOM

Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. window 객체의 document 프로퍼티를 통해서 사용할 수 있다. Window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다.

문서를 제어하는 방법에 대한 내용

제어 대상 찾기

```

• html
• css
• javascript

<script>
    var list = document.getElementsByTagName('li');
    for(var i= 0; list.length; i++){
      list[i].style.color='red';
    }
</script>

```

li태그의 문자를 가져와서 색을 빨간색으로 만든다.
그러나 이러면 li태그의 문자를 모두 가져오므로 범위를 좁힐 필요가 있다.

  <ul>
      <li>  html</li>
      <li>  css</li>
      <li>  javascript</li>
    </ul>

    <ol>
      <li>  html</li>
      <li>  css</li>
      <li>  javascript</li>
    </ol>
   <script>

      var unlist = document.getElementsByTagName('ul')[0];
      //[0]으로 배열의 첫번째 값(0번째)을 가져오면 
      //unlist변수에 ul태그의 값이 담기게 된다.

        var list = unlist.getElementsByTagName('li');
        for(var i= 0; list.length; i++){
          list[i].style.color='red';
        }   </script>

이렇게 ul태그의 li만 색이 변한 걸 볼 수 있다.

태그가 아니라 클래스로 제어대상 찾기.

getElementsByClassName

```

• html
• css
• javascript

<script>
    var list = document.getElementsByClassName('active');
    for(var i= 0; list.length; i++){
      list[i].style.color='red';
    }    </script>

 ```

이렇게 클래스네임이 active인 것만 색이 바뀌는 걸 볼 수 있다.

ID값을 기준으로 객체 조회.

getElementById, 성능 면에서 가장 우수하다. 그리고 element에서 s가 안붙는다 조회하는 값이 복수가 아니라 단수(Id는 유일한 값)이므로 ```

• html
• css
• javascript

<script>
    var list = document.getElementById('active');
    list.style.color = 'powderblue';
    
                    ```

Css 선택자로 조회 하기.

querySelector를 써서 객체를 조회.

    <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 list = document.querySelector('.active');
        list.style.color = 'green';

.active에 대해서 .이 앞에 붙는 다는 것은. 클래스의 속성 값이 active인 엘리먼트들을 선택하는 선택자다. (element는 요소란 뜻.)

li태그들을 모두 선택하고 싶다면 querySelectorAll을 쓰면 된다.

    <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.querySelectorAll('li');
      for(var name in list){
          list[name].style.color = 'green';
      }    </script> 

이렇게 모든 문자가 선택되어 색이 변한다.

1. getElementsByTagName
2. getElementById
3. getElementsByClassName
4. querySelector
5. querySelectorAll