JS_document.getElementsByTagName

▶document.getElementsByTagName

 

1) getElementsByTagName

 

자바스크립트를 제어하기위해 제어의 대상에 해당되는 객체를 찾는 메서드로서, 태그명을 기준을 조회한다. 그리고 리스트들을 유사배열에 담아서 변환한다. 유사배열의 의미하는바는 배열은 아니지만 배열접근연산자를 사용하여 각 요소들에 접근 및 조회할 수 있다는 말이다. 

 

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

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

 

"li" 태그를 가진 모든 항목의 style.color를 tomato색으로 변환하기위해 해당 메서드를 사용하였다.

 

 

2) getElementsByClassName

 

자바스크립트를 제어하기위해 제어의 대상에 해당되는 객체를 찾는 메서드로서, Class 속성값을 기준으로 조회한다. 

 

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

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

 

"active" 클래스를 가진 모든 항목의 style.color를 powerblue색으로 변환하기위해 해당 메서드를 사용하였다.

 

 

3) getElementsById

 

자바스크립트를 제어하기위해 제어의 대상에 해당되는 객체를 찾는 메서드로서, Id 속성값을 기준으로 조회한다. 성능면에서 가장 우수하다.

 

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

<script>
        let list = document.getElementsByID("active");
      
          list.style.color = 'Orange';
</script>

 

"active" ID를 가진 항목의 style.color를 Orange색으로 변환하기위해 해당 메서드를 사용하였다.