웹브라우저 JavaScript

조회 API

조회 API는 엘리먼트를 조회하는 기능이다. 조회 방법에 대해서는 이미 여러차례 살펴봤기 때문에 이번 시간에 알아볼 내용은 조회 대상을 제한하는 방법에 대한 것이다. 

지금까지 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>

실행결과

댓글

댓글 본문
작성자
비밀번호
  1. 유유
    감사합니다.
  2. 감사합니다
    추석이지만 열공중이어요
  3. tachyon
    감사합니다
  4. olgierd
    document 객체로는 안 될까 실습해 봤는데 querySelectorAll() 메서드로 되네요.

    console.group('document 2');
    var list = document.querySelectorAll('#active .marked');
    for (var i = 0; i < list.length; i++) {
    console.log(list[i].textContent);
    }
    console.groupEnd();
  5. yihsang
    문서전체에 대한 조회와 특정엘리먼트객체의 하위엘리먼트를 대상으로 하는 조회...
    감사합니다.
  6. JustStudy
    2016.07.08 금
    고맙습니다 3.
  7. JustStudy
    2016.06,30
    고맙습니다 2.
  8. 이주환
    2016. 04. 27
    잘보고갑니다~!
    조회를 document 와 element를 비교한 예제 정말 좋았습니다.
  9. JustStudy
    정말 다양한 면으로 최고의 훌륭한 강의입니다.
    고맙습니다
  10. 진승범
    열공 퐈이팅~!
  11. WayneKing
    열공!!!!!!!!!!!!!
  12. 코딩!
    감사합니다
  13. 팽맨이러닝
    Element 들의 위계에 따라
    조회할 수 있는 기능이겠군요.

    같은 위계에 혹은 다른 위계이냐에 따라 차별적으로 조회. :)
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기