Romantic Developer : )

(Web JavaScript) 웹 자바스크립트 DOM (7) 조회 API 본문

Romantic Developer/Web JavaScript

(Web JavaScript) 웹 자바스크립트 DOM (7) 조회 API

Romantic_Developer 2018. 8. 5. 17:00
안녕하세요, 영감을 주는 개발자 방민방민입니다.

오늘은 조회 API 대하여 알아보고자 합니다.


조회는 이전 시간에 많은 포스팅을 통해 알아보았기 때문에 조금 더 심화적으로 조회를 깊이 있게 들어가는 것에 대하여 실습해 보고자 합니다.


1. 조회 API 


아래 코드를 먼저 살펴 보도록 하겠습니다.

<!DOCTYPE>
<html>
	<head>
		
	</head>
	<body>
		<script src = 'jquery.js'></script>
			<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>
			//marked 클레스 네임으로 갖는 엘리먼트 조회
			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');//그룹 시작
			//active 를  id 로 갖는 엘리먼트 조회
			var active = document.getElementById('active');
			//active 중 marked를 클레스네임으로 갖는 엘리먼트 조회
			var list = active.getElementsByClassName('marked');
			for(var i = 0; i<list.length; i++){
				console.log(list[i].textContent);//콘텐츠 내용 출력
			}

			console.groupEnd();//그룹 종료
		</script>
	</body>
</html>


이는 아래의 내용을 출력합니다.

document 그룹에서는 class Name 을 marked 로 갖는 html, DOM, BOM 이 출력됩니다.

반면 active 그룹에서는 active 를 id 로 갖는 javascript 엘리먼트의 하위 엘리먼트 중에서 className 을 marked 로 갖는 엘리먼트만을 조회하였습니다.


이처럼 API 를 이용한 조회는 세부적으로 특정 엘리먼트 객체의 하위 엘리먼트 객체를 조회할 수도 있습니다.


오늘은 자바스크립트에서 조회에 대한 내용은 조금 더 심화적으로 알아보았습니다.


지금까지 영감을 주는 개발자 방민방민 이었습니다 :)


감사합니다 :) 


저작자표시

'Romantic Developer > Web JavaScript' 카테고리의 다른 글

(Web JavaScript) 웹 자바스크립트 DOM (9) Node API  (0) 2018.08.07
(Web JavaScript) 웹 자바스크립트 DOM (8) Element jQuery  (0) 2018.08.06
(Web JavaScript) 웹 자바스크립트 DOM (6) 식별자 API  (0) 2018.08.04
(Web JavaScript) 웹 자바스크립트 DOM (5) jQuery객체  (0) 2018.08.03
(Web JavaScript) 웹 자바스크립트 DOM (4) HTML element  (0) 2018.08.02
'Romantic Developer/Web JavaScript' Related Articles more