제어대상 찾기

문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document객체의 메소드를 이용한다.

getElementsByTagName

<ul>                                 
    <li>HTML</li>       
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<ul>
    <li style="color: red;">HTML</li>
    <li style="color: red;">CSS</li>
    <li style="color: red;">JavaScript</li>
</ul>

위와 같은 효과를 자바스크립트로 동적인 제어를 하고 싶을 때

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

lis는 li에 해당되는 각각의 태그들을 담은 유사배열을 담은 값을 리턴

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

ul에 해당되는 tag 값만 변경시키고 싶을 때?
1. ul에 해당되는 객체를 찾고
2. 그 객체에 대해 .getElementByTagName

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

getElementsByClassName

<ul>
    <li>HTML</li>
    <li class="active">CSS</li>
    <li class="active">JavaScript</li>
</ul>


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

getElementById

id 값을 기준으로 객체를 조회한다. 성능면에서 가장 우수하다

<ul>
    <li>HTML</li>
    <li id="active">CSS</li>
    <li>JavaScript</li>
</ul>


<script>
    var li = document.getElementById('active');
    li.style.color='red';
</script>

querySelector

CSS는 선택자가 있어 꾸미자고 하는 ELEMENT를 디자인을 할 수 있는 기능이 있음
바로 그 선택자를 인자로 받아서 그 선택자에 해당되는 ELEMENT의 객체를 찾아서 리턴해줌

  <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 li = document.querySelector('li');
        li.style.color ='red';
        var li = document.querySelector('.active');
        li.style.color ='blue';         
    </script>

querySelector는 그 조건에 해당되는 element 하나만을 리턴 반면에
querySelectorAll은 그 조건에 해당되는 모든 elements를 유사배열에 담는다

 <script>
        var lis = document.querySelectorAll('li');
        for(var name in lis){
            lis[name].style.color = 'blue';
        }         
  </script> // 다 blue로 바뀜