class 를 사용하여 객체 가져오기

javascript ES5 정리

class 를 사용하여 객체 가져오기

풀스택 개발자 2020. 9. 24. 00:40

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">
       <ul>
            <li>번호1</li>
            <li>번호2</li>
       </ul>
       <input type="button" value="버튼1" class="btn1">
       <input type="button" value="버튼2" class="btn1">
    </section>
</body>
</html>

수행할 이벤트

1.버튼1번을 누르면 li첫번째 번호1 text가 hello로 변한다.

2.버튼2번을 누르면 li두번째 번호2 text가 wrold로 변한다.

window.addEventListener("load", function(){
   var sec1 = document.getElementById("sec1");
   var btn = sec1.getElementsByClassName("btn1")[0];
   var btn2 = sec1.getElementsByClassName("btn1")[1];
    var lis = sec1.getElementsByTagName("li");

   btn.onclick = function (){
    lis[0].textContent = "hello";
 }
    btn2.onclick = function (){
    lis[1].textContent = "world";
 }
});

코드해석

1.id가 sec1인 객체를 가져와서 sec1에 대입시켜준다.

2.class는 id와 달리 중복사용이 가능하다. 따라서 getElementsByClassName()[] 뒤에 배열을 사용하여 몇번째 객체를 가리키는 class name인지 지정해주어야 한다.

3.버튼1과 버튼2를 각각 btn btn2에 대입시켜준후 li태그또한 lis에 대입시켜준다.

4.btn을 클릭하면 lis중 첫번째 lis인 lis[0]의 데이터를 hello로 변환시킨다.

5.btn2을 클릭하면 lis중 두번째 lis인 lis[1]의 데이터를 world로 변환시킨다.