0314notes

[shiaoyi]

0314

Javascript

DOM

• DOM(Document-Object-model)其實就是把不同的html節點對應到一個javascript的物件。
• DOM的使用範例：var test = document.getElementById("test");document是瀏覽器給你的物件，getElementById是function，test是節點
• 瀏覽器跑網頁是有先後順序的，首先是跑html和css，再建DOM tree，再執行javascript。那寫的code就是由上往下執行下來，所以javascript最好都寫在最下面，讓DOM建好再去執行動作
• 如果真的很想把script寫在上面(裡面)，就用監聽器EventListener：有什麼事件發生的時候，他就會做什麼事情

//第一種方法，DOMContentLoaded指的是DOM的內容已經好了
document.addEvenListener('DOMContentLoaded',function(){
    var test = document.getElementById("#test");
})
//第二種方法，load指的是所有資源都載入好了，才觸發function裡的事件
window.addEvenListener('load',function(){
    var test = document.getElementById("#test");
})
//第一種方法較常用

Callback function = 好了叫我 = 回呼函示

為了不讓事情阻塞（block）而延伸出來的方式
放進callback function的東西，做好之後就會通知你，你就不用自己等，不會阻塞到後面要做的事
addEvenListener就是callback function的一種