[ JavaScript ] 자바스크립트 기본 문법 | 조회 API | getElementsBy

이미지 출처 :    https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

 

 

자바스크립트 기본 문법  ::  조회 API

 

 

 

조회 API는 엘리먼트를 조회하는 기능입니다.

 

조회 방법에 대해서는 이미 여러차례 살펴봤기 때문에,

 

이번 포스팅에서 알아볼 내용은 조회 대상을 제한하는 방법에 대한 것입니다.

 

 

 

혹시 getElementsBy ~~ 에 대한 내용이 궁금하신 분은,

 

아래 링크의 포스팅을 확인해보시길 바랍니다.

 

 

 

 

 

ffoorreeuunn.tistory.com/170

[ JavaScript ] 제어 대상 찾기 - getElementById, getElementsByClassName, getElementsByTagName

 

 

 

 

 

지금까지 document.getElementsBy* 메소드를 통해서 엘리먼트를 조회했습니다.

 

document 객체는 문서 전체를 의미하는 엘리먼트이기 때문에,

 

document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회합니다.

 

 

 

Element 객체 역시도 getElementsBy* 엘리먼트를 가지고 있는데,

Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회를 수행합니다.

 

 

만약 위의 문장이 잘 이해가 안가신다면, 예시를 통해서 이해하시면 됩니다.

 

 

 

 

 

<ul>
    <li class="marked">html</li>
    <li>css</li>
    <li id="active">JavaScript
        <ul>
            <li>JavaScript Core</li>
            <li class="marked">DOM</li>
            <li class="marked">BOM</li>
        </ul>
    </li>
</ul>
<script>
    var list = document.getElementsByClassName('marked');
    console.group('document');
    for(var i=0; i<list.length; i++){
        console.log(list[i].textContent);
    }
    console.groupEnd();
     
    console.group('active');
    var active = document.getElementById('active');     
    var list = active.getElementsByClassName('marked');
    for(var i=0; i<list.length; i++){
        console.log(list[i].textContent);
    }
    console.groupEnd();
</script>

 

 

 

 

 

참고로 console.group 과 console.groupEnd 는 위의 실행 결과와 같이

 

출력을 그룹화 시키는 메소드입니다.

 

 

 

처음 document.getElementsByClassName('marked'); 를 통해

 

모든 문서 중에 marked 라는 이름의 class 를 갖고 있는 객체를 조회합니다.

 

 

그 결과가 html 과 DOM, BOM 입니다.

 

 

 

이후, 

 

 

 

var active = document.getElementById('active');     

 

를 통해 active 라는 id 를 가진 객체를 active 에 넣고,

 

 

var list = active.getElementsByClassName('marked');

 

 

를 통해 active element 객체의 하위 태그에서 marked 라는 이름의 클래스명을 가진 것을 조회해

 

list 에 넣는 것입니다.

 

 

 

 

document 와 element 객체의 차이를 아시겠나요?

 

 

 

 

만약 이를 이해하셨다면, 이번 포스팅 전체를 이해하셨다고 생각합니다.