JavaScript DOM 조작③ 「태그명을 키로 요소를 취득」

let 変数名 = document.getElementsByTagName('タグ名');

인 요소를 취득해, 그 내용을 콘솔에 출력한다.

연습 전 튜토리얼

실천에 들어가기 전에 완성형을 먼저 표시해 둔다.

구조로서는 다음과 같이 되어 있다.

HTML에 5개의 태그를 기술하고, 5개의 태그 내에는 요소를 기술한다. + 획득 버튼 포함


취득 버튼을 클릭하면, JavaScript로 지정한 태그내의 요소를 콘솔에 출력하도록(듯이) 한다.

마크업

브라우저에 문자열을 표시하지 않으면 안되기 때문에, HTML의 작성으로부터 취한다.

index.html

``index.html






문서


요소 1(div)

요소 2(p)

요소 3(div)

요소 4(span)
요소 5(div)

<input type="button" value="取得" onclick="showElements()" />

<script src="js/index.js"></script>

``

※input 태그내의 기술에 관해서는 여기

마크업하여 브라우저로 표시하면 다음과 같다.

자바스크립트 설명

다음에 JavaScript를 완성해 간다.

getElementsByTagName 처리

index.js

index.js

function showElements() {
  let elements = document.getElementsByTagName('div');
  for (let i = 0; i < elements.length; i++) {
    console.log(elements[i].innerText);
  }
}

상기 구문에 관해서, 순서를 따라 해설해 나간다.

function showElements()

HTML내의 input 태그에 있는 onclick 속성의 showElements로 함수를 작성해 간다.


let elements = document.getElementsByTagName('div');

elememts라는 변수를 정의하고 getElementsByTagName 메소드로 HTML 내의 태그 내의 요소를 가져옵니다.


for (let i = 0; i < elements.length; i++)

for를 사용하는 이유로 HTML에서 요소를 얻기 위해 반복 처리를 수행해야하기 때문입니다.


elements.length는 변수 elements에서 얻은 태그 수를 나타냅니다.


console.log(elements[i].innerText);

콘솔에 출력할 때, for로 정의한 변수 i를 배열로서 기술하고 innerText와 결합시킴으로써 태그 내의 요소를 출력할 수 있다.

브라우저에서 확인

실제로 브라우저에서 거동을 확인해 간다.

검증 결과,

복수의 태그 중에서,