JAVA SCRIPT

(수정중) DOM

aking 2013. 7. 2. 09:07




  • onload()
    • 브라우저가 HTML 문서를 모두 읽은 다음 각 Element를 객체로 만들고
    • Tree 구조로 구성한다. => Document Object Model(DOM)
    • DOM 객체 생성 후 화면을 출력하고 => onload() 호출한다.

window.onload = function() {

    • 화면을 출력한 후, 초기화 작업 기술

    • DOM API : getElementById("아이디")
      • DOM 트리에서 지정한 아이디 값을 갖는 엘리멘트를 찾는다.
      • Document(브라우저에게 제공하는 객체) 객체의 메서드이다.

var header = document.getElementById('header');

};

setTimeout()

- 지정된 시간에 딱 한번 함수를 호출해 실행시킨다.


$('#이벤트 객체 아이디').click( function(event) {

event.preventDefault();

setTimeout(function(){

$('목표지정코드').load('로드(불러올) 를 원하는 html문서의 위치와 이름');

}, 2000);

});


setTimeout(code, delay)

- 지정된 시간이 되면 특정 코드를 실행해주는 메서드이다.

- code: 일정시간이 지나고나서 실행시킬 자바스크립트 코드를 포함한 문자열

- delay: 문자열 code 내에 있는 자바스크립트 코드가 실행되기까지 걸리는 시간 (1/1000)초 단위


preventDefault()
- function의 파라메터의 event를 받아 일련의 처리를 할 수 있도록 한다.
- 기본 동작 및 href 를 작동하지 않도록 중지 시키고, 아래 코드들만 처리 할 수 있게 해준다.





<script> </script>는 body 안에 들어가도 실행된다.


<body>


<script>

window.onload = function () { 

    

    var d1 = document.getElementById("d1");

    d1.onclick = function() {

    console.log("d1 눌렀다.");

    };

};

</script>


<h1 id='d1'>이 문자를 클릭하면 (console.log)가 찍힙니다.</h1>


</body>






removeChild


clock.innerHTML