DOM-getElementsByTagName

오늘은 JavaScript에서 DOM에 대해 알아보도록 하겠습니다.

DOM은 Document Object Model 의 약자로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미합니다.

첫번째로 getElementsByTagName에 대해 알아보겠습니다.

getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환합니다.

그럼 거두절미 하고 코딩을 통해 알아보도록 하겠습니다.

우선 getElementsByTagName는 document라는 객체에 속해있습니다.

따라서 사용할땐 document.getElementsByTagName 으로 사용하면 됩니다.

    <script type="text/javascript">

        var lis = document.getElementsByTagName('li');  // lis라는 변수에 'li'의 속성을 모두 선택(?)하게 됩니다.

        for(var i=0; i<lis.length; i++){                         // i 를 0으로 초기화 하고 lis의 길이만큼 반복문을 실행합니다.

          lis[i].style.color='red';                                 // lis 변수를 i번 반복하면서 색을 'red'로 바꿔줍니다.

        }

    </script>

결과화면은 다음과 같이 나오게 됩니다.

이해가 안가시면 소스를 차근차근 분석해보시고 직접 코딩해보시면서 이해하시길 바래요~ㅎㅎ

감사합니다~