생활코딩

Coding Everybody

코스 전체목록

닫기

조회 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. 1.찾고자 하는 엘리먼트를 참조하는 객체를 생성한다
    2.그 객체에서 getElementsByClassName메서드를 통해 HTMLcollection을 얻을 수 있다
    3.연관 배열이므로 인덱스를 통해 원소를 얻을 수 있다
  3. 정승옥
    완료
  4. 한강
    Element 객체 조회 api 잘 배웠습니디~~^^!
    200701
  5. 김진욱
    완료
  6. 준바이
    감사합니다. 덕분에 하나 덤으로 알아가네요 !
    대화보기
    • ㅎㅅㅁ
      200208 화이팅
    • mangotrang
      19-12-16
    • 굼벵이
      완료
    • 모든일이일사천리
      완료 : 19-11-13 10PM
    • 2019-10-14 8:19pm 완료
    • 미완성
      20190109
    • JuicyFresh
      감사합니다.
    • 박인호
      12-29
      수강완료.
      문서내의 모든 엘리먼트들에서 조회하는 것과
      범위를 정해두고 해당 범위 안에서 원하는 엘리먼트를 조회하는 것.
    • 수복
      감사합니다.
    • 신시내티
      console.group('원하는 범위'); 로 일단 제한을 두고
      var 원하는 범위 = document.getElementById('원하는 범위내의 아이디'); 로 범위를 좁힌다음
      var list = active.getElementsByClassName('marked'); 를 해주면
      원하는 범위 내에서의 'marked'를 찾을수 있다.
    • Sangmook Kim
      170801 완료
    • crable
      감사합니다
    • BANIP
      감사합니다 잘 봤습니다!
    • 폭스킴
      textContent 메소드는 태그에 속한 text를 return~
    • 유유
      감사합니다.
    • hyuna
      감사합니다
      추석이지만 열공중이어요
    • tachyon
      감사합니다
    • 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();
    • yihsang
      문서전체에 대한 조회와 특정엘리먼트객체의 하위엘리먼트를 대상으로 하는 조회...
      감사합니다.
    • JustStudy
      2016.07.08 금
      고맙습니다 3.
    • JustStudy
      2016.06,30
      고맙습니다 2.
    • 이주환
      2016. 04. 27
      잘보고갑니다~!
      조회를 document 와 element를 비교한 예제 정말 좋았습니다.
    • JustStudy
      정말 다양한 면으로 최고의 훌륭한 강의입니다.
      고맙습니다
    • 진승범
      열공 퐈이팅~!
    • WayneKing
      열공!!!!!!!!!!!!!
    • 코딩!
      감사합니다
    • 팽맨이러닝
      Element 들의 위계에 따라
      조회할 수 있는 기능이겠군요.

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