Web/자바스크립트
querySelector() / querySelectorAll() 사용법
챈박
2022. 3. 29. 22:06
querySelector
dom 요소를 하나만 선택할 때 사용한다.
해당 요소의 속성을 변경하거나, 자식 / 부모 관계로 Element를 만들 때 주로 사용된다.
예제1
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<script>
document.querySelector( '.abc' ).style.color = 'red';
</script>
</body>
</html>
예제2
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p class="abc">Lorem Ipsum Dolor</p>
<div>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
</div>
<script>
document.querySelector( 'div .abc' ).style.color = 'red';
</script>
</body>
</html>
querySelectorAll
해당되는 모든 요소를 nodeList(배열)로 반환한다.
예제1
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<script>
var jb = document.querySelectorAll( '.abc' );
jb[1].style.color = 'red';
</script>
</body>
</html>
예제2
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<script>
var jb = document.querySelectorAll( '.abc' );
for ( var i = 0; i < jb.length; i++ ) {
jb[i].style.color = 'red';
}
</script>
</body>
</html>
반응형