HTML DOM의 getElementsByTagName() 메서드는 문서 내에서 지정한 태그 이름을 가진 모든 요소를 한꺼번에 가져오는 데 사용됩니다. 이 메서드는 해당 요소들을 NodeList 객체 형태로 반환하며, 인덱스 번호를 이용해 반환된 각 요소에 자유롭게 접근할 수 있습니다.
특히 getElementsByTagName()이 반환하는 HTMLCollection은 DOM 트리와 실시간으로 동기화됩니다. 따라서 요소를 추가하거나 삭제한 후에도 메서드를 반복해서 호출할 필요 없이 컬렉션이 자동으로 최신 상태를 유지한다는 점이 큰 장점입니다.
문법(Syntax)
getElementsByTagName() 메서드의 기본 문법은 다음과 같습니다.
element.getElementsByTagName(tagname)
여기서 tagname은 필수 매개변수로, 가져오고자 하는 자식 요소의 태그 이름을 나타냅니다.
예제(Example)
다음은 getElementsByTagName() 메서드를 활용한 실전 예제입니다.
<!DOCTYPE html>
<html>
<head>
<script>
function changePara() {
var p = document.getElementsByTagName("P");
p[0].innerHTML = "This text has been changed";
p[1].style.color = "red";
p[1].style.backgroundColor = "yellow";
}
</script>
</head>
<body>
<h1>getElementsByTagName() example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<button onclick="changePara()">CHANGE</button>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE 버튼을 클릭하면 아래와 같이 화면이 변경됩니다.
코드 설명
위 예제에서는 별도의 속성 없이 두 개의 단락(<p>) 요소를 먼저 생성했습니다.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
그다음, 사용자가 클릭하면 changePara() 함수를 실행하는 CHANGE 버튼을 만들었습니다.
<button onclick="changePara()">CHANGE</button>
changePara() 함수는 document 객체에 대해 getElementsByTagName() 메서드를 호출하여 문서 내 모든 <p> 요소를 NodeList 형태로 가져온 뒤 변수 p에 할당합니다. 이후 인덱스 번호를 활용해 첫 번째 단락(p[0])의 텍스트를 변경하고, 두 번째 단락(p[1])에는 글자색과 배경색 스타일을 적용합니다.
function changePara() {
var p = document.getElementsByTagName("P");
p[0].innerHTML = "This text has been changed";
p[1].style.color = "red";
p[1].style.backgroundColor = "yellow";
}이처럼 getElementsByTagName() 메서드를 사용하면 클래스나 ID 없이도 태그 이름만으로 원하는 요소 그룹을 손쉽게 선택하고 조작할 수 있습니다.