고정 헤더 영역
상세 컨텐츠
본문
태그선택자 - 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>
결과
'개발 > JavaScript' 카테고리의 다른 글
| JavaScript - 엘리먼트의 속성 추가하기 1 (0) | 2020.06.03 |
|---|---|
| JavaScript - 태그를 동적으로 만들어서 특정 엘리먼트에 추가하기(createElement, createTextNode, appendChild) (0) | 2018.12.04 |
| JavaScript - ES6 디스트럭처링(Destructuring) (0) | 2018.12.04 |
| JavaScript - ES6 객체의 프로퍼티 단축 (0) | 2018.12.04 |
| JavaScript - 프로토타입(prototype) (0) | 2018.12.04 |
댓글 영역