-
class 를 사용하여 객체 가져오기javascript ES5 정리 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로 변한다.
js
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로 변환시킨다.
'javascript ES5 정리' 카테고리의 다른 글
Node와 Element Node그리고 childNodes, children (0) 2020.09.28 js selector api 사용하여 객체 가져오기 (0) 2020.09.24 js getElementsByTagname (0) 2020.09.23 js 간단한 계산기 만들기 (0) 2020.09.23 js 코드분리와 이벤트 바인딩 방법 (0) 2020.09.23