[ Element ] 조회 API

 

 

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

---

 조회 API 

조회 API는 element를 조회하는 기능이다.

 

document 객체는 문서 전체를 의미하는 element이기 때문에 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>

위 소스 코드에서 document 그룹에 해당되는 list는 문서 전체를 대상으로 조회하는 것이고, active그룹은 id가 active인 곳을 대상으로 조회하는 것이라서 아래와 같은 결과가 나온다.

---

실행결과