Node 선택 방법

JavaScript에서 Node를 선택하는 다양한 방법들이 있습니다.

부모 자식 관계를 이용할 수도 있고 직접적으로 id, class, tag 등을 이용하여 Node를 선택할 수 있습니다. 

 

 

• getElemetsByTagName()
• getElementsByClassName() && getElementById()
• querySelector()

 

 

getElemetsByTagName()

HTML 태그를 가져옵니다.

   <section id = "sec1">
        <h1></h1>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
    </section>

var lis = sec1.getElemetsByTagName("li");
lis[0].textContent = "Hello"; 

textContent: 안쪽에 있는 text 

function ex1(){
 let section2 = document.getElementById("section-2");
    let inputs = section2.getElementsByTagName("input");

    let txtX = inputs[0];
    let txtY = inputs[1];
    let btnAdd = inputs[2];
    let textSum = inputs[3];

    btnAdd.onclick = function(){
        let x = parseInt(txtX.value);
        let y = parseInt(txtY.value);

        console.log(x+y);
        textSum.value = x+y;
    };
}

input에 순서 또는 개수가 바뀌면 배열에 순서도 바뀌게 됩니다.

 

 

getElementsByClassName() && getElementsById()

function ex2(){
    //Ex 2: 엘리번트 선택방법 개선하기
    let section2 = document.getElementById("section-2"); //id
    let txtX = section2.getElementsByClassName("txt-x")[0]; //class
    let txtY = section2.getElementsByClassName("txt-y")[0];
    let btnAdd = section2.getElementsByClassName("add-btn")[0];
    let textSum = section2.getElementsByClassName("txt-sum")[0];

    btnAdd.onclick = function(){
        let x = parseInt(txtX.value);
        let y = parseInt(txtY.value);

        console.log(x+y);
        textSum.value = x+y;
    };
}

getElementsByClassName은 배열이기 때문에 [0]을 해주어야 합니다.

 

querySelector()

function ex3(){
   //Ex 3: querySelector 이용하기 
   let section3 = document.querySelector("#section-3"); //id
   let txtX = section3.querySelector(".txt-x"); //class
   let txtY = section3.querySelector(".txt-y");
   let btnAdd = section3.querySelector(".add-btn");
   let textSum = section3.querySelector(".txt-sum");

   btnAdd.onclick = function(){
       let x = parseInt(txtX.value);
       let y = parseInt(txtY.value);

       console.log(x+y);
       textSum.value = x+y;
   };
}