-
웹브라우저 자바스크립트 - 조회 APIJavaScript/생활코딩 2018. 11. 27. 15:13
조회 API - https://opentutorials.org/course/1375/6684
document.getElementsBy*메소드를 통해서 엘리먼트를 조회했다.
document 객체는 문서전체를 의미하는 엘리먼트이기 때문에 document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회한다.
Element 객체도 getElementsBy* 엘리먼트를 가지고 있는데 Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회한다.
아래 예제는 class가 marked인 엘리먼트를 찾는데
className으로 marked인 엘리먼트를 찾는것과 id가 active인 엘리먼트의 하위 엘리먼트로 class가 marked인 엘리먼트는 찾는 예제이다.
document 객체의 getElementsBy* 와 Element객체의 getElementsBy* 의 차이점을 확인할 수 있다.
<!DOCTYPE html>
<html>
<body>
<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'); //document인 문서전체에서 class가 marked인 엘리먼트를 담는다.
console.group('document'); //document 그룹핑
for(var i=0; i<list.length; i++){
console.log(list[i].textContent); //textContent를 통해 텍스트를 반환한다.
}
console.groupEnd();
console.group('active'); //active 그룹핑
var active = document.getElementById('active');
var list = active.getElementsByClassName('marked'); //특정한 엘리먼트인 active에서 class가 marked인 엘리먼트를 담는다.
for(var i=0; i<list.length; i++){
console.log(list[i].textContent);
}
console.groupEnd();
</script>
</body>
</html>
[결과화면]
'JavaScript > 생활코딩' 카테고리의 다른 글
웹브라우저 자바스크립트 - Node 객체 (0) 2018.11.27 웹브라우저 자바스크립트 - 속성 API (0) 2018.11.27 웹브라우저 자바스크립트 - 식별자 API (0) 2018.11.26 웹브라우저 자바스크립트 - Element객체 (0) 2018.11.26 웹브라우저 자바스크립트 - HTMLCollection (0) 2018.11.26 댓글
