오늘은 자바스크립트의 기본 내장 함수인 getElementsByTagName에 대해서 정리해 보려고 한다. 이름에서도 알 수 있듯이 DOM 요소의 태그 명을 기준으로 요소를 조회하고 다룰 수 있는 기능이다.
getElementsByTagName 메서드
getElementsByTagName 메서드는 Document 객체의 메서드 중 하나로, 특정 태그 이름에 해당하는 모든 요소를 포함하는 HTML을 반환한다. 이 메서드는 Document 내에서 특정 태그 이름을 가진 모든 요소를 선택할 때 사용되며, 반환된 HTMLCollection은 실시간으로 업데이트되는 살아 있는 객체이므로, DOM의 변경에 따라 업데이트된다.
메서드의 특징
태그 이름으로 요소 선택하기
getElementsByTagName 메서드는 주어진 태그 이름을 가진 모든 요소를 선택한다. 예를 들어, getElementsByTagName('div')는 문서 내의 모든 <div> 요소를 선택한다.
리스트 반환
선택된 모든 요소를 NodeList라는 유사 배열 객체에 담겨 반환된다. 이 NodeList는 선택된 요소의 순서대로 요소를 포함하며, 배열처럼 인덱스를 사용하여 개별 요소에 접근할 수 있다.
실시간 업데이트
getElementsByTagName로 선택된 요소는 실시간으로 업데이트된다. 즉, DOM이 변경되면 NodeList로 변경된다. 이는 새로운 요소가 추가되거나 기존 요소가 제거되는 경우에도 적용된다.
성능
getElementsByTagName 메서드는 모든 하위 요소를 검색하므로 큰 사이즈 DOM에서 사용할 경우 성능이 저하될 수 있다.
교차 브라우저 호환성
getElementsByTagName 메서드는 모든 주요 브라우저에서 지원되는 표준 메서드이므로 교차 브라우저 호환성에 문제가 없다.
getElementsByTagName 메서드의 활용 사례
getElementsByTagName 메서드는 HTML 문서의 특정 태그를 가진 요소를 선택하는 데에 사용된다. 이 메서드는 특정한 상황에서 다양하게 활용될 수 있다.
특정 태그 요소에 대한 스타일 변경
getElementsByTagName 메서드를 사용하여 특정 태그 이름을 가진 요소를 선택하고, 이들의 스타일을 일괄적으로 변경할 수 있다. 예를 들어, <p> 태그로 된 모든 문단 요소에 대해 특정 스타일을 적용하는 등의 작업에 사용할 수 있다.
동적 콘텐츠 생성
특정 태그 이름을 가진 요소를 선택하여 해당하는 위치에 동적으로 콘텐츠를 추가할 수 있다. 예를 들어, getElementsByTagName 메서드를 사용하여 <ul> 태그를 선택하고, 선택된 요소에 새로운 <li> 요소를 추가하여 목록을 동적으로 생성할 수 있다.
이벤트 핸들러
getElementsByTagName 메서드를 사용하여 특정 태그를 가진 요소를 선택하고, 이들에게 이벤트 핸들러를 추가하여 사용자의 상호 작용에 대응할 수 있다. 예를 들어 <button> 태그를 가진 모든 요소에 대해 클릭 이벤트를 처리하는 핸들러를 추가할 수 있다.
동적 UI 업데이트
웹 페이지에서 동적으로 UI를 업데이트해야 할 때 사용될 수 있다. 예를 들어, getElementsByTagName 메서드를 사용하여 특정 태그를 가진 요소를 선택하고, 이들의 내용이나 스타일을 변경하여 사용자에게 즉각적인 피드백을 제공할 수 있다.
getElementsByTagName 메서드의 기본 예제
<script>
/**
* window document load 실행
*/
window.addEventListener('DOMContentLoaded', () => {
// span tag names
const spanTagNames = document.getElementsByTagName('span');
// 버튼 id
const buttonId = document.getElementById('buttonId');
// input id
const inputId = document.getElementById('inputId');
/**
* button click 이벤트
*/
buttonId.addEventListener('click', () => {
let textContent = '';
let spanLength = spanTagNames.length;
for (let i = 0; i < spanLength; i++) {
if (i > 0) textContent += ', ';
textContent += spanTagNames[i].textContent;
}
inputId.value = textContent;
});
});
</script>
<br>
<span>span 01</span>
<span>span 02</span>
<span>span 03</span>
<br>
<div>
<input type="button" id="buttonId" value="click"/>
<br>
<input type="text" id="inputId" style="width:200px;"/>
</div>위의 예제 소스 코드를 보게 되면 span 태그 3개를 내용만 바꿔서 동일하게 생성을 하였다. id, class, name 속성과는 다르게 getElementsByTagName 함수는 태그에 따로 속성을 주지 않고 태그 이름만 가지고 가져올 수 있게 된다. 그렇기 때문에 주의할 점은 html 내에 원하는 태그가 중복 생성이 되어 있다면 조회의 오류가 생길 수 있으니 주의해서 사용해야 한다.
1. 선택 요소
getElementsByTagName('span')은 문서 내의 모든 <span> 요소를 선택하고, spanTagNames은 NodeList로 선택된 모든 <span> 요소를 포함하게 된다.
2. NodeList 반복
spanTagNames NodeList를 반복하여 각 <span> 요소의 textContent를 가져오고 이를 문자열로 합쳐 textContent 변수에 할당한다.
3. 버튼 클릭 이벤트
buttonId 요소에 대한 클릭 이벤트 리스너를 추가하고, 클릭 이벤트가 발생하면 실행된다. 클릭 이벤트 핸들러에서는 NodeList를 반복하여 각 <span> 요소의 텍스트 내용을 가져와 textContent 변수에 쉼표와 함께 연결한다.
4. 입력 필드 할당
마지막으로 textContent에 있는 모든 텍스트를 inputId 요소의 value 속성에 할당하여 화면에 출력한다.
getElementsByTagName은 getElementById와 다르게 한 요소만 가져오는 것이 아니라 동일한 태그가 있으면 리스트 형태로 담아 모두 가져오게 되며, 그렇기 때문에 위의 예제 소스처럼 for문을 통하여 컨트롤해주어야 한다.
실행 결과
click을 하였을 경우 span 태그 3개를 가져와 input text에 넣어주도록 하였는데 내용이 잘 들어가고 있는 결과 화면이다.
getElementsByTagName 메서드의 요소 스타일 변경
getElementsByTagName 메서드를 이용해서 선택된 여러 개의 요소에 스타일을 일괄적으로 적용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 선택된 span 요소의 텍스트 색상을 빨간색으로 변경 */
.red-text {
color: red;
}
</style>
</head>
<body>
<!-- span 요소 -->
<span>Span 01</span>
<span>Span 02</span>
<span>Span 03</span>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 모든 <span> 요소를 선택하여 컬렉션으로 반환
const spanElements = document.getElementsByTagName('span');
// 선택된 모든 <span> 요소에 대해 반복하여 스타일을 변경
for (let i = 0; i < spanElements.length; i++) {
// red-text 클래스를 추가하여 텍스트 색상을 빨간색으로 변경
spanElements[i].classList.add('red-text');
}
});
</script>
</body>
</html>위의 코드는 페이지가 로드될 때 <span> 요소를 모두 선택해서 요소의 텍스트 색상을 빨간색으로 변경하는 코드다.
각 요소에 red-text 클래스를 추가하여 해당 스타일을 적용한다.
1. document.getElementsByTagName('span') 이 코드를 통해 페이지에 있는 모든 <span> 요소를 선택하여 컬렉션으로 반환
2. for문을 통해 선택된 요소를 순환하면서 각 <span> 요소에 대해 .classList.add('red-text') 코드를 실행한다.
getElementsByTagName 메서드를 잘 활용한다면 한번에 많은 태그를 컨트롤할 수 있으며, 스타일을 손쉽게 바꿔줄 수 있다. 태그 명만 같다면 한 번에 처리하기 좋은 기능이라고 생각한다.
getElementsByTagName 메서드의 이벤트 처리
getElementsByTagName 메서드를 이용하여 선택된 모든 요소에 동일한 이벤트를 주입하고 처리할 수 있다.
window.addEventListener('DOMContentLoaded', () => {
// 모든 <span> 요소를 선택하여 HTMLCollection으로 반환합니다.
const spans = document.getElementsByTagName('span');
// HTML에 포함된 모든 <span> 요소에 클릭 이벤트 리스너를 추가
for (let i = 0; i < spans.length; i++) {
// 각 <span> 요소에 클릭 이벤트 리스너를 추가
spans[i].addEventListener('click', () => {
spans[i].classList.add('red-text');
});
}
});위의 코드는 페이지가 로드될 때, 모든 <span> 요소를 선택하여 HTMLCollection으로 가져오게 된다. 그 후, for 문을 사용하여 각 <span> 요소에 클릭 이벤트 리스너를 추가하게 된다. 클릭 이벤트가 발생하면 해당 <span> 요소의 텍스트 색상을 빨간색으로 변경하는 클래스를 추가한다.
동일한 태그에 동일한 이벤트를 한 번에 처리해야 하는 경우에는 위와 같이 처리한다면 간단하게 해결할 수 있다. 그러나 선택되는 요소가 너무 많아 성능에 이슈가 될 수 있으니 선택되는 요소가 어느 정도인지 파악하고 적용하는 것이 중요하다.
getElementsByTagName 메서드의 동적으로 요소 추가 및 제거
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.red-text {
color: red;
}
</style>
</head>
<body>
<!-- 동적으로 요소를 추가할 버튼 -->
<button id="addButton">Add New Span</button>
<!-- 동적으로 추가될 요소를 감싸는 div -->
<div id="container">
<span>Span 01</span>
<span>Span 02</span>
</div>
<script>
window.addEventListener('DOMContentLoaded', () => {
// 'Add New Span' 버튼 가져오기
const addButton = document.getElementById('addButton');
// 'container' div 요소를 가져오기
const container = document.getElementById('container');
// 'Add New Span' 버튼에 클릭 이벤트 리스너를 추가
addButton.addEventListener('click', () => {
// 새로운 <span> 요소를 생성
const newSpan = document.createElement('span');
// 생성된 <span> 요소에 텍스트 추가
newSpan.textContent = 'New Span';
// 생성된 <span> 요소를 'container' div에 추가
container.appendChild(newSpan);
});
// 'container' div에 있는 모든 <span> 요소에 클릭 이벤트 리스너 추가
container.addEventListener('click', (event) => {
// 클릭된 요소가 <span> 요소인지 확인
if (event.target.tagName === 'SPAN') {
// 클릭된 <span> 요소의 클래스에 'red-text'를 토글 처리
event.target.classList.toggle('red-text');
}
});
});
</script>
</body>
</html>위의 코드는 페이지가 로드될 때, 'Add New Span' 버튼을 클릭하게 되면 새로운 <span> 요소가 동적으로 추가되고, 'container' div 내에 추가된다. 위에서 계속 설명한 예제에도 중복된 내용이지만, 위의 예제와 같이 이벤트가 실행될 때 요소의 상태가 동적으로 변경되는 것을 확인할 수 있다.
getElementsByTagName 메서드 사용 시 주의사항
getElementsByTagName 메서드를 사용하여 코드를 작성하는 것은 간단한 작업이지만 기능이 간단한 만큼 주의해야 할 부분도 알아두는 것이 좋다.
성능
위에서도 설명한 바와 같이 getElementsByTagName 메서드는 DOM의 모든 하위 요소를 검색하기 때문에 큰 사이즈의 DOM 구조에서 사용할 때에는 성능에 영향을 줄 수 있다. 특히, 문서의 크기가 크고 요소의 수가 많을수록 이러한 영향이 더 클 수 있다.
태그명 오타
getElementsByTagName 메서드에 전달하는 태그명은 대소문자를 구분하며, HTML 요소의 정확한 태그명을 사용해야 한다. 잘못된 태그명을 사용하면 원하는 결과를 얻을 수 없다.
유사한 태그명
특정 태그명을 사용하여 요소를 선택할 때, 유사한 태그명을 가진 다른 요소도 함께 선택될 수 있다. 예를 들어, div 태그를 사용하면 문서 내의 모든 <div> 요소가 선택될 수 있으므로, 선택된 요소를 필요에 따라 추가로 필터링하는 것이 좋다.
실시간 업데이트와 DOM 변경
getElementsByTagName으로 선택된 요소 집합은 실시간으로 업데이트되지 않는다. 해당 요소 집합을 저장한 후에 DOM이 변경되어도 자동으로 반영되지 않으며, DOM이 변경될 때마다 getElementsByTagName을 다시 호출하여 최신 정보를 유지해야 한다.
유지보수와 성능 최적화
getElementsByTagName은 느린 DOM 탐색 방법 중 하나이므로, 가능한 경우에는 성능을 개선하기 위해 다른 방법을 고려해야 한다. 예를 들어, 더 빠른 선택자를 사용하거나 요소에 고유한 ID를 할당하여 getElementById를 사용하는 것이 좋다.
마무리
오늘은 getElementsByTagName메서드에 대해서 개념과 활용 사례, 예제, 주의사항을 정리해 보았다. 개발할 때에는 크게 신경 안쓰고 사용했던 것 같은데, 이번에 글을 정리하면서 보니 생각보다 getElementsByTagName 메서드를 사용하는 것이 성능을 많이 고려해야 한다는 것을 알게 되었다. 어떻게 생각하면 당연한 부분이지만, 너무 익숙한 나머지 생각 없이 사용했던 것 같다.
getElementsByTagName 메서드는 분명 강력하고 편리한 기능이지만, 기능이 가지고 있는 특성을 잘 알지 못한다면 웹 페이지의 성능이 저하될 수 있다는 것을 잘 숙지해야 될 것 같다.
'javascript > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 날짜 포맷 알아보자! (date format, date parse) (0) | 2022.12.30 |
|---|---|
| [javascript] 자바스크립트 getElementsByName 배워보자! (0) | 2022.12.29 |
| [javascript] 자바스크립트 getElementById() 알아보자! (0) | 2022.12.28 |
| [javascript] 자바스크립트 date parse 날짜 파싱 배우기 (date to string) (0) | 2022.12.27 |
| [javascript] 이벤트 전파 막기 (preventDefault, stopPropagation) (0) | 2022.12.25 |
