Selectors API

querySelector : 한개의 엘리먼트를 선택할 때.
querySelectorsAll : 여러개의 엘리먼트를 선택할 때.
Class명으로 select할 땐, .class명, id명으로 select할 땐, #id명 = CSS와 동일

HTML

<section id="section3">
<h1>Ex3 : Selectors API Level1  </h1>
<div>
<input class = "txt-x" type="text" value="0" dir="rtl"/>
+
<input class = "txt-y" type="text" value="0" dir="rtl"/>
<input class = "btn-add" type="button" value="="/>
<input class = "txt-sum" type="text" value="0" readonly dir="rtl"/>
</div>
</section>

JavaScript

//Ex3 : Selectors API Level1
window.addEventListener("load",function(){
    var section3 = document.getElementById("section3");
    var txtX = section3.querySelector(".txt-x");
    var txtY = section3.querySelector(".txt-y");
    var btnAdd = section3.querySelector(".btn-add");
    var txtSum = section3.querySelector(".txt-sum");

    btnAdd.onclick = function(){ 
        var x = parseInt(txtX.value);
        var y = parseInt(txtY.value);
        
        txtSum.value = x+y;
    };
});

꼭 class명과 id명이 아니어도 name,type,value등 다양한 속성을 이용해 선택할 수 있다!
예시:

<input name = "x" type="text" value="0" dir="rtl"/>
            +
<input name = "y" type="text" value="0" dir="rtl"/>
<input name = "btn-add" type="button" value="="/>
<input name = "sum" type="text" value="0" readonly dir="rtl"/>

window.addEventListener("load",function(){
    var section3 = document.getElementById("section3");
    var txtX = section3.querySelector("input[name='x']");
    //input 태그를 가진 것중 name값이 'x'인것을 선택.
});