[daily study] DOM_조회API

*본 글은 생활코딩 강의를 듣고 복습을 위해 작성되었습니다.

1. 조회API

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>

👉 class의 이름이 'marked'인 것을 가져오는 코드와 id의 이름이 active인 엘리먼트 하위에 있는 makred라는 이름을 가진 class를 불러오는 코드이다.

*본 글은 생활코딩 조회API에서 이론적인 내용을 가져왔음을 밝힘니다.

출처 : https://opentutorials.org/course/1375/6684