2023. 6. 20. 22:43ㆍFront/JS
1. Document API
1) 하나의 요소(Element) 선택 : id로 접근
- [window.]document.getElementById("Id명");
- 해당되는 id의 요소에 접근한다
2) 다중 요소 선택 : class, tag로 접근
- document.getElementsByClassName("")
- document.getElementsByTagName("")
- document.getElementsByName("")
- 결과물은 모두 배열 (결과물이 한 개이더라도 배열임)
3) form태그 선택 시 name속성의 값으로 선택
<body>
<div id="d1"></div>
<div class="d2"></div>
<div class="d2" ></div>
<form action="" name="frm">
<input type="text" name="yId">
</form>
<script type="text/javascript">
var d1 = document.getElementById("d1");
var d2 = document.getElementsByClassName("d2"); //배열
document.frm.yId.value="test";
</script>
</body>4) CSS Selector 사용
- document.querySelector("css selector") : 선택자에 걸리는 요소 중 첫번째 것만 가져옴
- document.querySelectorAll("css selector") : 선택자에 걸리는 모든 요소를 배열로 가져옴
<body>
<button class="c2" id="btn1">BTN</button>
<input type="button" class="c1" value="BTN3">
<input type="button" class="c1" value="BTN4">
<p></p>
<p class="c2"></p>
<script type="text/javascript">
var btn1 = document.querySelector("#btn1");
btn1.addEventListener("click", function(){
alert("btn2");
});
var c1 = document.querySelector(".c1"); //c1은 배열X 첫번째 요소만 가지고 옴
c1.addEventListener("click", function(){
alert("btn!");
});
var p = document.querySelector("p"); //p는 배열X 첫번째 요소만 가지고 옴
p.innerHTML = "안녕";
var p2 = document.querySelector("p.c2");
p2.style.backgroundColor="blue";
</script>
</body><body>
<button class="c1">BTN1</button>
<button class="c1">BTN2</button>
<script type="text/javascript">
var c1 = document.querySelectorAll(".c1"); //c1은 배열
for(i=0;i<c1.length;i++){
c1[i].addEventListener("click",function(){
alert("짠");
})
}
</script>
</body>
2. Element API
1) innerText
- 선택한 Element 내의 모든 "TextNode"들의 내용을 담는 변수
- Element 안의 text에 접근
2) innerHTML
- 선택한 Element 내의 모든 "Element"들의 내용을 담는 변수
- Element 안의 HTML 코드에 접근, 가져오는 것은 태그 내의 text를 가져온다.
- 사용
var a = "변경할 내용";
document.getElementById("Id명").innerHTML = a ; //a의 내용을 접근한 요소에 넣음
<div id="result"> </div>
<script type="text/javascript">
var age = window.prompt("나이를 입력하세요");
var reslut = document.getElementById("result");
result.innerHTML = '"<h1>"+age+"</h1>"' //넣은 문자열을 ""html코드로서"" 인식
</script><select>
<option class="opt" selected ="selected">KT</option>
<option class="opt">SKT</option>
<option class="opt">LG</option>
</select>
<button id="btn"> CLICK </button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function() {
var opt = document.getElementsByClassName("opt");
for(i=0;i<opt.length;i++){
if(opt[i].selected){
alert(opt[i].innerHTML); //가져올 때는 HTML코드의 안에 있는 text를 가져옴
break;
}
}
</script>
3) Attribute 접근
- var 변수명 = document.getElementsById("아이디명");
- 속성명으로 접근
변수명.속성명 [= "변경될 값";]
- 메서드로 접근
변수명.getAttribute("가져올속성명");
변수명.setAttribute("속성명", "변경값");
<h1>성적입력</h1>
<p><input type="text" class="point"> </p>
<p><input type="text" class="point"> </p>
<p><input type="text" class="point"> </p>
<script type="text/javascript">
var sub = ["국어", "수학", "영어"];
var points = [];
for(i=0;i<sub.length;i++){
//points[i] = prompt(sub[i]+"성적을 입력하세요");
points.push(prompt(sub[i]+"성적을 입력하세요"));
}
var ar = document.getElementsByClassName("point");
for(i=0;i<sub.length;i++){
//ar[i].value = points[i];
ar[i].setAttribute("value", point[i]);
}
</script>