Language/JavaScript
[JavaScript] document.getElementsByTagName() - 특정 tag명을 가진 dom 요소들을 찾기/가져오기 (ft. element.getElementsByTagName())
썸머워즈
2022. 2. 24. 21:40
반응형
javascript로 dom 요소를 제어할때 사용되는 메서드중 하나인 document.getElementsByTagName()에 대해 알아보자.
메서드명 그 의미를 그대로 가지고 있어, 특정 tag명을 가지고 있는 dom 요소에 접근하기 위한 메서드이다.
▷ 구문
document.getElementsByTagName(name);
name : 찾으려는 태그 요소명을 의미한다. (특수 문자 * 은 모든 엘리먼트를 나타낸다.)
▷ 예제 1) document.getElementsByTagName() 사용법
<!doctype html>
<html lang="ko">
<head>
<script src="./test.js"></script>
<title>mineItRecord</title>
</head>
<body>
<div>div-1</div>
<div>div_2</div>
<div>
<span>span</span>
<p>p</p>
</div>
<div id="wrap" class="wrap">
<span class="sp">span</span>
</div>
</body>
</html>// 기본 사용법
document.getElementsByTagName('div');
// HTMLCollection(4) [div, div, div, div#wrap.wrap, wrap: div#wrap.wrap]
document.getElementsByTagName('span');
// HTMLCollection(2) [span, span.sp]
// 모든 태그 요소 가져오기
document.getElementsByTagName('*');
// HTMLCollection(13)
// [html, head, script, title, body, div, div, div, span, p, div#wrap.wrap, span.sp, script, wrap: div#wrap.wrap]
// 특정 요소 내부에서 스캔하기
wrap.getElementsByTagName('span'); // HTMLCollection [span.sp]
document.getElementsByTagName('div')[2].getElementsByTagName('p');
// HTMLCollection [p]
document.getElementsByTagName('div')[2].getElementsByTagName('*');
// HTMLCollection(2) [span, p]
getElementsByTagName() 메서드는 특이하게도 '*'을 사용할 수 있으니 알아두도록 하자.
참고 : https://developer.mozilla.org/ko/docs/Web/API/Document/getElementsByTagName
Document.getElementsByTagName() - Web API | MDN
다음 예시에서, getElementsByTagName() 는 특정 부모 엘리먼트에서 시작해 그 부모 엘리먼트의 DOM 을 거쳐 위에서 아래로 재귀 탐색을하고, 태그 name 파라미터에 일치하는 모든 자손 엘리먼트의
developer.mozilla.org
반응형