개발/JavaScript
JavaScript - 선택자 (Selector)
뉴에이스
2018. 12. 4. 13:42
태그선택자 - getElementsByTagName
아이디선택자 - getElementById
클래스선택자 - getElementsByClassName
ES5부터 - querySelectorAll
소스
<body>
<button onclick="doAction(1);">태그 선택자</button>
<button onclick="doAction(2);">아이디 선택자</button>
<button onclick="doAction(3);">클래스 선택자</button>
<div>테스트1</div>
<div id="a">테스트2</div>
<div class="b">테스트3</div>
<script>
function doAction (type) {
switch(type){
case 1: // getElementsByTagName : 태그 이름으로 엘리먼트를 찾음
// ES5부터 document.querySelectorAll("div")
var list = document.getElementsByTagName("div");
for(var i=0 ; i<list.length ; i++){
console.log(list[i]);
console.log(list[i].innerText); // 태그의 값만 출력
}
break;
case 2: // 아이디 검색
// 아이디는 고유하기 때문에 하나의 값 반환
// ES5부터 document.querySelector("#a")
var ele = document.getElementById("a");
console.log(ele);
console.log(ele.innerText); // 태그의 값만 출력, 크롬에서 같은값(text)을 바로 출력하는경우 카운트뱃지가 증가됨
break;
case 3: // 클래스 속성으로 검색
// ES5부터 document.querySelectorAll(".b")
// ES5부터 document.querySelectorAll("span > .aaa > .b") 가능
var b = document.getElementsByClassName("b");
for(var i=0 ; i<b.length ; i++){
console.log(b[i]);
console.log(b[i].innerText); // 태그의 값만 출력
}
break;
}
}
</script>
</body>
결과
