728x90
반응형
SMALL
1. querySelector:
querySelector 메서드는 주어진 CSS 선택자에 해당하는 첫 번째 요소를 반환
선택자에 해당하는 요소가 여러 개 있더라도 첫 번째 요소만 반환
선택자에 일치하는 요소가 없으면 null을 반환
예제:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>querySelector Example</title>
</head>
<body>
<div id="example">
<p>Hello</p>
<p>안녕!</p>
</div>
<script>
// 첫 번째 <p> 요소를 선택
var paragraph = document.querySelector('p');
console.log(paragraph.textContent); // 출력: "Hello"
</script>
</body>
</html>
2. querySelectorAll:
querySelectorAll 메서드는 주어진 CSS 선택자에 해당하는 모든 요소를 NodeList로 반환
선택자에 일치하는 모든 요소를 가져올 수 있다.
일치하는 요소가 없으면 빈 NodeList를 반환
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>querySelectorAll Example</title>
</head>
<body>
<div id="example">
<p>Hello</p>
<p>안녕!</p>
</div>
<script>
// 모든 <p> 요소를 선택
var paragraphs = document.querySelectorAll('p');
paragraphs.forEach(function(paragraph) {
console.log(paragraph.textContent); // 각 요소의 텍스트 내용을 출력
});
</script>
</body>
</html>
실행하면 각각 첫 번째 <p> 요소를 선택하거나 모든 <p> 요소를 선택하여 콘솔에 텍스트 내용을 출력
728x90
반응형
LIST