제어 대상 찾기 ( getElementsByTagName )

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

문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다.

첫번째로 소개할 getElementsByTagNaem은   인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다.
NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 element를 조회할 수 있다.

예제 코드를 보자

8행부터 12행까지 ul이라고 하는 리스트의 element가 있다.

14행을 보면 document객체의 getElementsByTagName이라는 메서드를 호출하고있다 

document는 이 파일 전체를 의미하는 객체이다 , 즉 이 문서 전체에서 태그의 이름이 'li'인 엘리먼트 들을 가져와서 그 결과를 리턴한다.
이 메서드가 리턴하는값은 li에 해당되는 각각의 태그들의 객체를 담은 유사배열을 리턴해서 lis라는 변수에 담게된다.
(유사배열은 정확히는 배열은 아니지만 배열과 유사하게 작동한다는 뜻에서 유사배열이라고 표현한다.)
for문을 통해 li태그 전체에 접근하여 style.color를 red로 변경시킨다.


다음 예시 코드를 보자.

우리는 ul태그 내에 있는 li엘리먼츠들만 값을 변경시키고 싶다고 가정해보자.

우리는 방금 document.getElementsByTagName이라는 객체의 메서드를 다음과 같이 설명했다.
document객체는 이 코드 전체를 의미하는 파일이고 그 안에서 태그 네임에 의해 엘리먼트들을 가져와 유사배열로 리턴한다.

우리가 배운대로 위 코드를 살펴보면 ,  Tag name에 의해서만 엘리먼트를 가져오기때문에 ul태그와 ol태그 내에있는 모든 li 엘리먼츠들을 가져온다.
이러면 우리가 원하는대로 진행되지 않는다.
따라서 조회의 대상을 한정시키기 위해서는 위와같이 코딩한다.

19행을 주목하자 , 19행에서는  ul태그를 가진 엘리먼트들을 배열로 반환시켰다.
그 배열에 첫번째 요소값을 가져와서 ul이라는 변수에 저장시켰다.
그 이후 20행에서 , ul이라는 태그 하위에 존재하는 li엘리먼츠들만 조회시키기 위해 다음과 같이 코딩하였다.
var lis = ul.getElementsByTagname('li');                    // ul이라는 객체에서만 한정시켜 li태그이름을 가진 엘리먼츠들을 가져오자.

이러면 우리가 원하던대로 ul태그내에 li엘리먼츠들만 조회가 가능하다.