[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> 




# 출력결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기