프로젝트 중 찾아본 것들 정리

querySelector()

querySelector 는 특정 name 이나 id 를 제한하지않고 css선택자를 사용하여 요소를 찾는다.

(#sections) -> sections 아이디를 가진 요소를 찾는다.
(.section) -> section 클래스명을 가진 요소를 찾는다.

반환객체는 한개의 요소만 찾을수있으며 동일한 클래스명 을 가진 객체가 있을경우 html문서내의 첫번째를 나타나는 요소를 반환함

querySelectorAll()

querySelectorAll 은 querySelect 과 동일하게 작동하나 차이점은 해당 선택자에 해당하는 모든 요소를 가져온다.

반환객체는 nodeList이기때문에 for문 또는 foreach 문을 사용해야 한다.

또한 (',') 을 사용하면 여러요소를 한번에 가져올 수 있다.

var sections = document.querySelectorAll("#sections , #sections .section");
console.log(sections.constructor.name)
for( var i = 0; i < sections.length; i++ ){
    var item = sections.item(i);
    item.style.border = "1px solid #ff0000";
}

setInterval 함수

일정한 시간 간격으로 작업을 수행하기 위해서 사용. clearInterval 함수를 사용하여 중지할 수 있다. 주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있다.

setTimeout 함수

일정한 시간 후에 작업을 한번 실행합니다. 보통 재귀적 호출을 사용하여 작업을 반복한다. 기본적으로 setInterval 과는 달리 지정된 시간을 기다린후 작업을 수행하고, 다시 일정한 시간을 기다린후 작업을 수행하는 방식이다. 지정된 시간 사이에 작업 시간이 추가 되는 것이다. clearTimeout() 을 사용해서 작업을 중지한다.

clearInterval(), clearTimeout()이 실행중인 작업을 중지시키는 것은 아니다. 지정된 작업은 모두 실행되고 다음 작업 스케쥴이 중지 되는 것이다.

<script type="text/javascript">
//<![CDATA[
// 현재 시간 출력
function PrintTime() {
    var today = new Date();
    var hh = today.getHours();
    var mi = today.getMinutes();
    var ss = today.getSeconds();
    document.getElementById("result").innerHTML = hh + ":" + mi + ":" + ss;
}
// 중지를 위해 ID 보관
var timerId = null;
// 시계 시작
function StartClock() {
    PrintTime();
    timerId = setInterval(PrintTime, 1000);
}
// 시계 중지
function StopClock() {
    if(timerId != null) {
        clearInterval(timerId);
    }
}
//]]>
</script>
<!--  시계가 보여질 div -->
<div id="result"></div>
<input type="button" value="시작" onclick="StartClock();" />
<input type="button" value="중지" onclick="StopClock();" />

setTimeout 사용 예

//시계 시작 - 재귀호출로 반복실행
function StartClock() {
    PrintTime();
    timerId = setTimeout(StartClock, 1000);
}
//시계 중지
function StopClock() {
    if(timerId != null) {
        clearTimeout(timerId);
    }
}

setTimeout 을 setInterval 과 유사하게

//시계 시작 - 재귀호출로 반복 실행
function StartClock() {
  timerId = setTimeout(StartClock, 1000);
  PrintTime();
}