자바스크립트 HTML 태크 이름으로 요소 취득 방법 getElementsByTagName

자바스크립트에서 HTML의 태그명을 지정 요소를 취득할 수 있는 getElementsByTagName대해 살펴보겠습니다.

getElementsByTagName 메서드의 사용 방법을 먼저 보겠습니다.

document.getElementsByTagName(태그 이름)

태그 이름에는 ‘div’나 ‘p’처럼 태그 종류 이름을 지정합니다.

‘*’를 지정하면 모든 요소를 취득합니다.

태그 이름을 지정해 취득한 반환값은 HTMLCollection 오브젝트 형태로 반환합니다.

HTMLCollection 오브젝트는 여러개 요소의 노드가 집합됩니다.

집합된 오브젝트에 접근하기 위해 length 프로퍼티, item 메서드, nameditem 메서드가 있습니다.

length – 요소 개수 취득
item(인덱스) – 요소 인덱스로 요소를 취득
item(ID or name) – ID 속성 또는 name 속성으로 요소를 취득

getElementsByTagName 사용법
id 속성으로 요소 취득

getElementsByTagName 사용법

getElementsByTagName을 사용해 해당 태그의 문자열을 취득해오는 샘플 코드를 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>getElementsByTagName sample</title>
  </head>
  <body>

    <p>과일 종류</p>

    <div>
      <p>수박</p>
      <p>사과</p>
    </div>

    <div>
      <p>바나나</p>
      <p>딸기</p>
    </div>

    <button onClick="getElements();">요소 취득</button>

<script>
function getElements(){
    
    let elements = document.getElementsByTagName('p');
    let len = elements.length;
    
    for (let i = 0; i < len; i++){
        console.log('Text: ' + elements.item(i).textContent);
    }
}
</script>
</body>
</html>

요소 취득 버튼을 클릭하면 p태그에 해당하는 문자열들을 취득해옵니다.

해당 태그에서 문자열을 취득해오기 위해 getElementsByTagName을 사용했습니다.

취득한 문자열을 Console 로그창에서 확인할 수 있습니다.

id 속성으로 요소 취득

id 속성 값으로 요소에 접근하는 방법을 알아보겠습니다.

id로 요소에 접근하기 위해서는 getElementById를 사용합니다.

var element = document.getElementById('example'); 
var elements = element.getElementsByTagName('p');

아래처럼 작성할 수도 있습니다.

var elements = document.getElementById('example').getElementsByTagName('p');

샘플 코드를 보면서 사용 방법을 자세히 해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>getElementsByTagName sample</title>
  </head>
  <body>

    <p>과일 종류</p>

    <div id="summer">
        <p>수박</p>
        <p>사과</p>
    </div>

    <div id="winter">
        <p>바나나</p>
        <p>딸기</p>
    </div>

    <button onClick="getElements();">요소 취득</button>

<script>
function getElements(){

    let winter = document.getElementById('winter');
    let elements = winter.getElementsByTagName('p');
    
    let len = elements.length;
    
    for (let i = 0; i < len; i++){
        console.log('Text: ' + elements.item(i).textContent);
    }
}
</script>
</body>
</html>

요소 취득 버튼을 클릭하면 id 속성 값이 winter p태그에 접근해 값을 취득합니다.

취득한 값은 Console 로그창에서 확인할 수 있습니다.

요소의 태그를 사용해 요소 값을 취득하는 방법을 알아봤습니다.

요소의 값을 변경하는 방법은 아래 내용을 참조해주세요.