자바스크립트 HTML요소 접근하기 getElementsByTagName()

 

자바스크립트 에서 HTML요소로 접근하는 방법 중 하나인 document.getElementsByTagName() 메서드 이다.

바로 코드이다.

 <h1>The Document Object</h1>

 <h2>The getElementsByTagName() Method</h2>

  <p>An unordered list</p>

    <ul>

      <li>Coffee</li>

      <li>Tea</li>

      <li>Milk</li>

    </ul>

    <p>The innerHTML of the second li element is</p>

    <p id="demo"></p>

    <script>

      const collection = document.getElementsByTagName("li");

      document.getElementById("demo").innerHTML

= collection[1].innerHTML;

    </script>

역시 가장 중요한 것은 

document.getElementsByTagName("li");

메서드 이고, 인자 값으로 HTML 태그 명을 적어 준다.
HTML문서 안의 모든 li 태그 값을 찾아달라는 의미이다.

반환 값은 지난 시간 살펴본 것 과 같이

HTMLCollection 객체를 가진다. 배열과 유사한 형태를 가진 객체 이다.

자바스크립트 요소 접근 방법 getelementsbyclassname()

collection[1].innerHTML 로 li 태그 두번째 요소의 콘텐츠 값을

P 요소 의 콘텐츠 값에 넣어 주는 코드이다.

예상했던 결과가 나온다.

The Document Object

The getElementsByTagName() Method

An unordered list:

• Coffee
• Tea
• Milk

The innerHTML of the second li element is:

Tea