-
js selector api 사용하여 객체 가져오기javascript ES5 정리 2020. 9. 24. 00:46
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src = "javascript1-dom.js"></script> </head> <body> <section id="sec1"> <input type="text" value="0" class="textx"> <input type="text" value="0" class="texty"> <input type="text" value="결과" class="result"> <input type="text" value="다른결과창" class="result"> <input type="button" value="합계버튼" class="btn1"> </section> </body> </html>js
window.addEventListener("load", function(){ var sec1 = document.getElementById("sec1"); var textx = sec1.querySelector(".textx"); var texty = sec1.querySelector(".texty"); var result = sec1.querySelectorAll(".result"); var btn1 = sec1.querySelector(".btn1"); btn1.onclick = function (){ var x = parseInt(textx.value); var y = parseInt(texty.value); result[0].value = x+y; result[1].value = x+y; } });1.각각의 class name을 queryselector를 사용하여 가져옵니다.
2.class name ' result ' 는 2번 사용되었기때문에 queryselectorAll 를 사용합니다.
3.queryselectorAll은 result[0] , result[1] 이런식으로 배열을 활용하여 각 class의 객체를 구분해줍니다.
'javascript ES5 정리' 카테고리의 다른 글
node의 종류와 개체 형식 (0) 2020.09.28 Node와 Element Node그리고 childNodes, children (0) 2020.09.28 class 를 사용하여 객체 가져오기 (0) 2020.09.24 js getElementsByTagname (0) 2020.09.23 js 간단한 계산기 만들기 (0) 2020.09.23