![[JavaScript] html태그 name과 id로 접근하기 ( document.getElementById('id') )](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtnMSd%2Fbtq6LfjODMt%2FR35FxBcCtjxkqtXl7g14CK%2Fimg.png)
반응형
객체 접근 : document.getElementById('id')
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>index1</title>
</head>
<body>
<div id="demo" style="background-color: #ffffff">Hello JS CSS</div> <!--하나의 객체라고 생각!-->
<button type="button" onclick="func()">적용</button>
<script type = "text/javascript">
function func(){
let obj = document.getElementById('demo');
console.log(obj);
obj.style.color = "#ffffff";
obj.style.backgroundColor = '#0000ff';
obj.style.textAlign = 'center';
obj.style.borderStyle = 'double';
obj.style.borderColor = 'red';
obj.style.fontFamily = 'MS PGothic';
obj.style.fontStyle = 'italic';
obj.style.fontSize = '24pt';
}
/*
<div> 하나의 객체라고 생각!
let obj = document.getElementById('demo');
obj 통째로 들고옴.
*/
</script>
</body>
</html>document.getElementById('id')를 통해서 하나의 객체 그 자체의 값을 넘겨받을 수 있다.
객체 자체를 받아와서 변수 obj에 값을 넣어주면 변수 obj를 통해서 객체의 값을 set 할 수 있다.
let obj = document.getElementById('demo');
console.log(obj);
출력결과
<div id="demo" style="background-color: rgb(0, 0, 255); color: rgb(255, 255, 255); text-align: center; border-style: double; border-color: red; font-family: "MS PGothic"; font-style: italic; font-size: 24pt;">Hello JS CSS</div>
Hello JS CSS
적용버튼 누른 결과
func()에서 set 한 값들이 적용된다.
<form> name으로 접근
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" name="frm">
<div align="center">
<strong>라면 타이머</strong>
<br><br>
<select id="selid" name="selid">
<option value="180">원하는 시간을 선택해 주십시오(기본 시간 3분)</option>
<option value="300">5분</option>
<option value="180">3분</option>
<option value="120">2분</option>
<option value="60">1분</option>
<option value="30">30초</option>
</select>
<input type="button" value="Timer Start" onclick="noodle()">
<br><br>
<span id="countdown">time selected</span> <!--div태그랑 비슷. css적용시 많이 사용한다.-->
<br><br>
<button type="button" onclick="window.close()">close</button><br><br>
</div>
</form>
<script type="text/javascript">
let index = 0;
let value = 0;
let time = 0;
function noodle(){
clearInterval(time); //timer 초기화
index = document.frm.selid.selectedIndex;
value = parseInt(document.frm.selid.options[index].value); //name안에 options를 가져온다. 배열로 되어있다.
time = setInterval('noodleTimer()',1000); //1초마다 noodleTime()호출
}
function noodleTimer(){
value = value - 1;
document.getElementById('countdown').innerHTML = "완료까지 <b>" + value + "</b>초 남았습니다.";
if(value == 0){
clearInterval(time);
let audio = new Audio('AlarmClockBell.wav');
audio.play();
}
}
</script>
</body>
</html>value = parseInt(document.frm.selid.options[index].value);
<select>의 선택된 index번호의 value의 값을 가져온다.
<from>을 사용해서 tag들을 묶고, <form>의 name로 접근을 하여 <form> 안에 있는 tag들에 접근이 가능하다.
id로 접근
let value = document.getElementById('selid').value
getElementById('id')를 이용해서 <select> tag id값을 통해서 접근하여 value값을 가져온다.
반응형