728x90
[Javascript] 자바스크립트 엘리먼트의 선택
1. 아이디로 찾기 : document.getElementById
2. 클래스명으로 찾기 : document.getElementsByClassName
3. 태그명으로 찾기 : document.getElementsByTagName
4. CSS Selector로 찾기 : document.querySelector, document.querySelectorAll
기본 형태
//아이디로 찾기
document.getElementById('아이디');
//클래스명으로 찾기
document.getElementsByClassName('클래스명');
//태그이름으로 찾기
document.getElementsByTagName('태그이름');
//CSS Selector로 찾기 (강추)
//id 찾을때는 앞에 #, Class로 선택시 앞에 .
document.querySelector('CSS Selector'); //한개
document.querySelectorAll('CSS Selector'); //여러개
getElementById와 getElementsByClassName을 비교해보면
Id는 단수 선택 이고 ClassName은 복수 선택으로 사용되고 있다.
말그대로 Id는 페이지내 한개밖에 없는 고유 식별자 이기 때문에
엘리먼트 하나만 선택이 되는 것이고,
클래스는 여러개의 태그에 한번에 적용이 가능하기 때문에
엘리먼트 여러개 선택이 되는 것이다.
querySelector도 마찬가지로
querySelector(한개 선택)와 querySelectorAll(여러개 선택)이 있는데,
규칙이 정해지진 않았지만,
아이디로 찾을때는 querySelector를 사용하고,
그외 여러개의 복수 엘리먼트 선택시 querySelectorAll을 사용한다.
샘플 예제 [getElement]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>자바스크립트 선택자 예제 [getElementsByTagName, getElementsByClassName, getElementById]</title>
<style>
#red {
color : white;
background:#fb3640;
}
.box {
width: 100px;
height: 50px;
margin : 3px;
text-align : center;
line-height: 50px;
background:lightgreen;
}
</style>
</head>
<body>
<div id="red" class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box blue"></div>
<script>
//getElementsByTagName
var divAll = document.getElementsByTagName('div');
for(var i=0;i<divAll.length;i++){
divAll[i].style.border = '1px solid gray';
}
//getElementsByClassName
var boxAll = document.getElementsByClassName('box');
for(var i=0;i<boxAll.length;i++){
boxAll[i].innerText = 'item';
}
//getElemetById
var redBox = document.getElementById('red');
redBox.innerText = 'Red Box';
</script>
</body>
</html>결과 출력
샘플 예제 [querySelector, querySelectorAll]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>자바스크립트 선택자 예제 [querySelector, querySelectorAll]</title>
<style>
#red {
color : white;
background:#fb3640;
}
.box {
width: 100px;
height: 50px;
margin : 3px;
text-align : center;
line-height: 50px;
background:lightgreen;
}
</style>
</head>
<body>
<div id="red" class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box blue"></div>
<script>
//querySelectorAll (태그명으로 찾기) : 태그명만 입력
var divAll = document.querySelectorAll('div');
for(var i=0;i<divAll.length;i++){
divAll[i].style.border = '1px solid gray';
}
//querySelectorAll (클래스명으로 찾기) : .클래스명 입력
var boxAll = document.querySelectorAll('.box');
for(var i=0;i<boxAll.length;i++){
boxAll[i].innerText = 'item';
}
//querySelector (아이디로 찾기) : #아이디 입력
var redBox = document.querySelector('#red');
redBox.innerText = 'Red Box';
</script>
</body>
</html>
결과 출력
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [프론트엔드] 윈도우 창 / 스크롤바 / 브라우저 사이즈 feat 자바스크립트 (0) | 2021.05.20 |
|---|---|
| [Javascript] 페이스북 아이디로 간편 로그인 기능 구현 Facebook Login (2) | 2021.05.14 |
| [CSS / Javascript] 메뉴 클릭시 화면 스크롤 이동 (0) | 2021.04.17 |
| [Javascript] 엘리먼트 위치로 스크롤 이동 scrollIntoView() (0) | 2021.04.15 |
| [Javascript] cookie 사용하기 (0) | 2021.04.01 |
댓글