Visual Studio Code dom에 대하여 - 2

1. 본문

    <h2 id="id1">html</h2>
    <h2 id="id2">javascript</h2>
    <h2 id="id3">css</h2>

    <h2 class="class1">spring</h2>
    <h2 class="class1">springboot</h2>

본문에 id , class 속성을 부여한 h2 글을 만들었다.

 

 

2. h2요소 가져오기

    const h2all1 = document.getElementsByTagName("h2");
    console.log(h2all1);

모든 h2요소를 가져왔다.

    const h2all2 = document.querySelectorAll("h2");
    console.log;

nodelist로 모든 h2요소를 가져왔다

3. 모든 h2 요소의 innerText 출력하기

    for (let i = 0; i < h2all1.length; i++) {
      console.log(h2all1[i].innerText);
    }

각 innerText만 출력되었다.

 

 

4. id1이 적용된 요소 가져오기

    const ele1 = document.getElementById("id1");

    const ele2 = document.querySelector("#id1");

getElementById는 ""로 선택되지만 querySelector는 "#"으로 선택한다.

 

 

5. class1이 적용된 모든 요소 가져오기

    const ele3 = document.getElementsByClassName("class1");
    for (let i = 0; i < ele3.length; i++) {
      console.log(ele3[i].innerText);
    }

 

    const ele4 = document.querySelectorAll(".class1");
    for (let i = 0; i < ele4.length; i++) {
      console.log(ele4[i].innerText);
    }