JAVASCRIPT- 노드선택 방법 개선
- 하위 엘리먼트 선택하기 아이디를 효과적으로 부여하는방법에대해서 알아보자.
.getElementsByTagName(); .getElementsByClassName();
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="javascript1-dom.js"></script>
</head>
<body>
<section id = "section2">
<h1>Ex2: 앨리먼트 선택방법 개선하기</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" dir="rtl" readonly/>
</div>
</section>
</body>
</html>
js
// Ex2: 앨리먼트 선택방법 개선하기
window.addEventListener("load",function(){
var section2 = document.getElementById("section2");
var txtX = section2.getElementsByClassName("txt-x")[0];
var txtY = section2.getElementsByClassName("txt-y")[0];
var btnAdd = section2.getElementsByClassName("btn-add")[0];
var txtSum =section2.getElementsByClassName("txt-sum")[0];
/* 방법 1
var inputs = section2.getElementsByTagName("input");
var txtX = input[0];
var txtY = input[1];
var btnAdd = input[2];
var txtSum =input[3];
*/
btnAdd.onclick = function(){
var x = parseInt(txtX.value);
var y = parseInt(txtY.value);
txtSum.value = x+y;
};
});
방법 1도있고 방법2도있다. 방법 1은 class의 이름이 뭔지 식별을 할수없기때문에 불편한점이있다. 2번 방법은 보기에는 좋지만 배열이기때문에 불편한점이있다.
댓글남기기