태그의 이름으로 요소(Element) 가져오는 방법
JavaScript에서 태그의 이름으로 요소를 가져와야 하는 경우가 있을 수 있습니다.
예를 들어, 다음 html 문서에서 <p> 태그에 해당하는 요소만 가져와야 하는 상황이 발생할 수 있습니다.
<p>JavaScript</p>
<p>React</p>
<p>Vue</p>
<div>div tag1</div>
<div>div tag2</div>이번 포스팅은 JavaScript에서 getElementsByTagName() 및 querySelectorAll() 메서드를 사용하여 태그 이름으로 하나 이상의 HTML 요소를 가져오는 방법을 소개합니다.
getElementsByTagName() 메서드
getElementsByTagName() 메서드는 태그 이름에 해당하는 모든 요소를 가져옵니다.
다음 HTML 예제의 body에는 3개의 p 요소와 2개의 div 요소가 존재합니다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<p>JavaScript</p>
<p>React</p>
<p>Vue</p>
<div>div tag1</div>
<div>div tag2</div>
<script src="script.js"></script>
</body>
</html>다음은 getElementsByTagName() 메서드를 사용하여 p 요소만 가져옵니다.
function getElements(tagName) {
const pElements = document.getElementsByTagName(tagName);
console.log(pElements);
}
// tag 이름을 전달
getElements('p');[실행 결과]
전역 객체인 document에서 getElementsByTagName() 메서드를 호출하며, 태그 이름을 전달합니다. 전체 문서에서 모든 p 요소를 가져온 다음 HTMLCollection이라는 배열과 유사한 객체로 반환합니다.
HTMLCollection는 for...of 문을 사용하여 각 요소를 접근할 수 있으며, 다음 예시는 <p> ~ </p> 태그 사이에 작성된 텍스트를 콘솔에 출력합니다.
function getElements(tagName) {
const pElements = document.getElementsByTagName(tagName);
for (let pItem of pElements) {
console.log(pItem.innerHTML);
}
}
getElements("p");[실행 결과]
JavaScript
React
VuequerySelectorAll() 메서드
또 다른 방법으로 querySelectorAll() 메서드를 사용하여 태그 이름으로 하나 이상의 요소를 가져올 수 있습니다.
다음은 querySelectorAll() 메서드를 사용하여 p 요소만 가져옵니다.
function getElements(tagName) {
const pElements = document.querySelectorAll(tagName);
console.log(pElements);
}
getElements("p");[실행 결과]
querySelectorAll() 메서드는 getElementsByTagName() 메서드와 다르게 NodeList를 반환합니다. NodeList는 for...of 문이 아닌 forEach() 메서드를 사용하여 각 요소를 접근합니다.
다음 예시는 <p> ~ </p> 태그 사이에 작성된 텍스트를 콘솔에 출력합니다.
function getElements(tagName) {
const pElements = document.querySelectorAll(tagName);
pElements.forEach(pItem => {console.log(pItem.innerHTML)});
}
getElements("p");[실행 결과]
JavaScript
React
Vue두 개 이상의 태그 이름으로 요소 가져오는 방법
두 개 이상의 태그 이름으로 요소를 가져오고 싶다면 querySelectorAll() 메서드에 태그가 쉼표(,)로 구분된 문자열을 전달합니다.
다음 예시는 p 요소와 div 요소를 한 번에 가져온 다음 태그 사이에 작성된 텍스트를 콘솔에 출력합니다.
function getElements(tagName) {
const pElements = document.querySelectorAll(tagName);
pElements.forEach((pItem) => {
console.log(pItem.innerHTML);
});
}
getElements("p, div");[실행 결과]
JavaScript
React
Vue
div tag1
div tag2'JavaScript > DOM' 카테고리의 다른 글
| [JavaScript]HTML 요소 가져오는 방법 (1) | 2022.11.13 |
|---|---|
| [JavaScript]HTML 요소의 넓이와 높이 가져오는 방법 (0) | 2022.11.13 |
| [JavaScript]JavaScript에서 배경색 변경하는 방법 (0) | 2022.11.11 |
| [JavaScript]OnClick 이벤트에서 DOM 요소 제거하는 방법 (0) | 2022.11.11 |
| [JavaScript]HTMLCollection과 NodeList 차이점 (0) | 2022.11.10 |
댓글