[JavaScript] getElementByTagName( ) 메소드[JavaScript] getElementByTagName( ) 메소드
Posted at 2020. 2. 28. 13:54 | Posted in JavaScript & jQuery/JavaScript발췌 : 하루 10분씩 핵심만 골라 마스터하는 Ajax
■ documet.getElementByTagName( ) 메소드
getElementByTagName( ) 메소드를 이용하면 각각의 태그 명을 통해서
문서안의 요소들에 대해서 자바스크립트 배열을 만들 수 있다.
자바스크립트 코드에서 다음과 같이 문서 안의 요소에 접근을 할 수 있다.
# 소스코드
<html> <head> <title>:: JavaScript - getElementsByTagName ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { const txtElements = document.getElementsByTagName("input")[0].value; alert( txtElements ); }); </script> </head> <body> <input type="text" value="누구나 그럴싸한 계획을 갖고 있다.\n치명타에 세 번 연속으로 처맞기 전까지는. 으하하하하하하하"/> </body> </html> |
# 출력결과
이 코드는 block 이라는 태그 이름을 가진 모든 요소들을 blocks 라는 변수에 배열 형식으로 반환하는 코드이다.
다음 코드처럼 다른 일반 배열과 같은 방식으로 배열의 크기를 알 수 있다.
( 인자로 주어진 태그 이름과 같은 요소들의 개수를 의미한다. )
# 소스코드
<html> <head> <title>:: JavaScript - getElementsByTagName ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { const blocks = document.getElementsByTagName( "block" ); alert( blocks.length ); }); </script> </head> <body> <block>1번 블럭</block> <block>2번 블럭</block> <block>3번 블럭</block> <block>4번 블럭</block> <block>5번 블럭</block> <block>6번 블럭</block> <block>7번 블럭</block> </body> </html> |
# 출력결과
배열의 각각의 요소에 대해서도 접근할 수 있다.
bean이라는 이름을 가진 두 번째 요소에 대해서 접근할 경우
bean[1]로 접근이 가능하다.
# 소스코드
<html> <head> <title>:: JavaScript - getElementsByTagName ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { const bean = document.getElementsByTagName("bean")[1]; alert( bean.innerHTML ); }); </script> </head> <body> <bean>임요환</bean> <bean>홍진호</bean> <bean>강 민</bean> </body> </html> |
# 출력결과
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
| [JavaScript] Canvas를 통한 이미지 회전 (6) | 2020.03.04 |
|---|---|
| [JavaScript] 업로드한 파일 Resizer 하여 화면에 출력시키기 (0) | 2020.03.04 |
| [JavaScript] INPUT TYPE FILE 썸네일 생성 (0) | 2020.01.16 |
| [JavaScript] 파일업로드시 용량 검사하기 (0) | 2019.12.26 |
| [JavaScript] 체크박스 전체 선택 - Sample (0) | 2019.12.19 |
