JavaScript
[JavaScript] document
Potato Ongsim
2023. 7. 20. 00:02
반응형
document
.querySelector
<style>
#box{
width:100px;
height:100px;
background-color: aqua;
}
</style>
<script>
function myFunc(){
document.querySelector("#box").innerText="변경!"
}
</script>
<body>
<div id="box">
</div>
<button onClick="myFunc()">클릭</button>
</body>
function myFunc(){
var boxList=document.querySelectorAll("#wrap>#box")
//#wrap하위의 #box모두 접근
boxList[0].innerText="변경111"
boxList[1].innerText="변경222"
}
function myFunc2(){
var boxList=document.querySelectorAll("#wrap>#box")
//#wrap하위의 #box모두 접근
alert(boxList[0].innerText)
alert(boxList[1].innerText)
}wrap 하위 box로 접근도 가능하고, 배열 안에 넣어서도 사용가능하다.
.getElementById
<style>
#wrap{
width:300px;
height:300px;
background-color: aqua;
}
#box{
width:100px;
height:100px;
background-color: burlywood;
margin:5px;
}
</style>
<script>
function myFunc(){
document.getElementById("box").innerText="변경됨!"
}
</script>
<body>
<div id="box">
</div>
<button onClick="myFunc()">클릭</button>
</body>
ID에 의한 원소를 가져온다.
ID로 원소에 접근하는 메소드(함수)
다양하게 사용가능
<script>
function myFunc(){
var box = document.getElementById("box")
//아이디가 박스인 요소 접근
box.style.backgroundColor="red"
box.style.width="200px"
box.style.height="200px"
box.style.borderRadius="100%"
//접근한 요소의 style속성의 하위속성 backgroundColor속성에
//red를 넣겠다.
}
</script><script>
function myFunc(){
var myInput = document.getElementById("my-input")
//my-input에 접근해서
myInput.value="김대리"
//거기에 value속성 값 김대리로 변경
}
function myFunc2(){
var myInput = document.getElementById("my-input")
alert(myInput.value)
}
</script>
<body>
<input type="text" id="my-input" value="최부장"/>
<button onClick="myFunc()">클릭</button>
<button onClick="myFunc2()">조회</button>
</body>
.getElementsByClassName
<script>
function myFunc(){
var myCheck=document.getElementsByClassName("my-check")
console.log(myCheck[0].checked)
console.log(myCheck[1].checked)
console.log(myCheck[2].checked)
}
</script>
<body>
<input type="checkbox" class="my-check"/>
<input type="checkbox" class="my-check"/>
<input type="checkbox" class="my-check"/>
<button onClick="myFunc()">클릭</button>
</body>
//--------------------------------------------------------------------
<script>
function myFunc(){
var myCheck=document.getElementsByClassName("my-check")
for(var i=0; i<myCheck.length; i++){
if(myCheck[i].checked===true){
alert(myCheck[i].value)
}
}
}
</script>
<body>
<label>짜장면</label>
<input type="checkbox" class="my-check" value="짜장면"/>
<label>짬뽕</label>
<input type="checkbox" class="my-check" value="짬뽕"/>
<label>탕수육</label>
<input type="checkbox" class="my-check" value="탕수육"/>
<button onClick="myFunc()">클릭</button>
</body>
클래스이름에 의해서 원소를 가져오고 여러개의 원소에 접근하는 메소드
반응형