JavaScript - 문제 미리보기
문제 779
easy
다음 jQuery 코드와 같은 기능을 하는 JavaScript 코드는?
```javascript
// jQuery
myElements = $("p");
// JavaScript
myElements = document.______("p");
```
```javascript
// jQuery
myElements = $("p");
// JavaScript
myElements = document.______("p");
```
정답: B
태그명으로 요소를 선택하는 JavaScript의 표준 메서드입니다.
태그명 선택 비교:
jQuery 방식:
```javascript
var myElements = $("p"); // 모든 <p> 태그 선택
console.log(myElements.length); // 요소 개수
console.log(myElements[0].innerHTML); // 첫 번째 요소 내용
```
JavaScript 방식:
```javascript
var myElements = document.getElementsByTagName("p");
console.log(myElements.length); // 요소 개수
console.log(myElements[0].innerHTML); // 첫 번째 요소 내용
```
반환값의 특징:
• jQuery: jQuery 객체 반환 (jQuery 메서드 사용 가능)
• JavaScript: HTMLCollection 반환 (배열과 유사하지만 배열은 아님)
HTMLCollection 특성:
```javascript
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // 길이 확인
console.log(paragraphs[0]); // 인덱스로 접근
// paragraphs.forEach() // ❌ 작동하지 않음 (배열이 아니므로)
// 배열로 변환하려면:
const paragraphArray = Array.from(paragraphs);
paragraphArray.forEach(p => console.log(p.innerHTML)); // ✅ 작동
```
현대적 대안:
```javascript
// querySelectorAll 사용 (NodeList 반환, forEach 사용 가능)
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach(p => console.log(p.innerHTML));
```
태그명 선택 비교:
jQuery 방식:
```javascript
var myElements = $("p"); // 모든 <p> 태그 선택
console.log(myElements.length); // 요소 개수
console.log(myElements[0].innerHTML); // 첫 번째 요소 내용
```
JavaScript 방식:
```javascript
var myElements = document.getElementsByTagName("p");
console.log(myElements.length); // 요소 개수
console.log(myElements[0].innerHTML); // 첫 번째 요소 내용
```
반환값의 특징:
• jQuery: jQuery 객체 반환 (jQuery 메서드 사용 가능)
• JavaScript: HTMLCollection 반환 (배열과 유사하지만 배열은 아님)
HTMLCollection 특성:
```javascript
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // 길이 확인
console.log(paragraphs[0]); // 인덱스로 접근
// paragraphs.forEach() // ❌ 작동하지 않음 (배열이 아니므로)
// 배열로 변환하려면:
const paragraphArray = Array.from(paragraphs);
paragraphArray.forEach(p => console.log(p.innerHTML)); // ✅ 작동
```
현대적 대안:
```javascript
// querySelectorAll 사용 (NodeList 반환, forEach 사용 가능)
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach(p => console.log(p.innerHTML));
```
💡 학습 팁
이 문제를 포함한 JavaScript 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.