JavaScript全總結之定時器&DOM的document-js教程-PHP中文網

在學習JavaScript過程中會遇到許多定時器和dom等問題，本篇將會詳解其相關問題。

在javascript中，計時器有兩種，一種是setTimeout()，還有一種的setTimeout()

setTimeout()

setTimeout函數用來指定某個函數或某段程式碼，在多少毫秒之後執行。它傳回一個整數，表示定時器的編號，以後可以用來取消這個定時器。
var timerId = setTimeout(func|code, delay)

上面程式碼中，setTimeout函數接受兩個參數，第一個參數func|code是將要延遲執行的函數名稱或一段程式碼，第二個參數delay是延遲執行的毫秒數。

要注意的是，延遲執行的程式碼必須以字串的形式，放入setTimeout，因為引擎內部使用eval函數，將字串轉為程式碼。
如果延遲執行的是函數，則可以直接將函數名，放入setTimeout。一方面eval函數有安全疑慮，另一方面為了方便JavaScript引擎優化程式碼，setTimeout方法一般總是採用函數名稱的形式，就像下面這樣。

function f(){  console.log(2);}setTimeout(f,1000);// 或者setTimeout(function (){console.log(2)},1000);
setInterval()
setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。
clearTimeout()，clearInterval()

登入後複製

setTimeout和setInterval函数，都返回一个表示计数器编号的整数值，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。
var id1 = setTimeout(f,1000);var id2 = setInterval(f,1000);

登入後複製

clearTimeout(id1);
clearInterval(id2);

登入後複製

setTimeout和setInterval返回的整数值是连续的，也就是说，第二个setTimeout方法返回的整数值，将比第一个的整数值大1。利用这一点，可以写一个函数，取消当前所有的setTimeout。

登入後複製

(function() {  var gid = setInterval(clearAllTimeouts, 0);  function clearAllTimeouts() {    var id = setTimeout(function() {}, 0);    while (id > 0) {      if (id !== gid) {
        clearTimeout(id);
      }
      id--;
    }
  }
})();```

登入後複製

執行上面程式碼後，實際上再設定任何setTimeout都無效了。
運行機制setTimeout和setInterval的運作機制是:1. 將指定的程式碼移出本次執行，等到下一輪Event Loop時，再檢查是否到了指定時間。 2. 如果到了，就執行對應的程式碼；如果不到，就等到再下一輪Event Loop時重新判斷。

這意味著，setTimeout指定的程式碼，必須等到本次執行的所有程式碼都執行完，才會執行。

setTimeout的作用是將程式碼延後到指定時間執行，如果指定時間為0，即setTimeout(f,0)，那麼不會立刻執行

setTimeout(f,0)將第二個參數設為0，作用是讓f在現有的任務（腳本的同步任務和「任務佇列」中已有的事件）一結束就立刻執行。也就是說，setTimeout(f,0)的作用是，盡可能提早執行指定的任務。 #DOM>之前呢基本上都是在講這個js的語法啊，但現在就把html 和js結合起來了。
文檔物件模型 (DOM) 是HTML和XML文檔的程式介面。它為文件（結構樹）提供了一個結構化的表述並且定義了一種方式—程式可以對結構樹進行訪問，以改變文件的結構，樣式和內容。

DOM 提供了一種表述形式將文件視為結構化的節點群組以及包含屬性和方法的物件。從本質上說，它將web 頁面和腳本或程式語言連接起來了。
![](http://upload-images.jianshu.io/upload_images/961879-30d442b188b865e3.gif?imageMogr2/auto-orient/strip)要改變頁面的某個東西，JavaScript中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行新增、移動、改變或移除的方法和屬性，都是透過DOM來獲得的##document 物件* 每個載入瀏覽器的HTML文件都會成為document物件。 document物件包含了文件的基本訊息，我們可以透過JavaScript對HTML頁面中的所有元素進行存取、修改。
#document物件常用屬性document物件有很多屬性來描述文件訊息，介紹幾個常用的
*
#doctype在書寫HTML文檔的時候第一句一般都是doctype聲明，可以透過document物件獲取，沒有則回傳null`document.doctype; // document.doctype.name; // "html"`*
#head、body`document.head;`
` document.body;`
透過這兩個屬性何以分別取得文件的head，body節點
*
#activeElementactiveElement屬性傳回目前文件中獲得焦點的那個元素。
使用者通常可以使用tab鍵移動焦點，使用空白鍵啟動焦點，例如如果焦點在一個連結上，此時按一下空白鍵，就會跳到該連結

*
#documentURI、domain、lastModifieddocumentURI屬性傳回目前文件的網址

domain屬性傳回文件網域###lastModified傳回目前文件的最後修改時間######* location###location屬性傳回一個唯讀對象，提供了目前文件的URL資訊#######

// 假定目前網址為
http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href // " http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"document.location.host // " www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/ path/a.html"document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document .location.password // "passed"
// 跳到另一個網址
document.location.assign('http://www.google.com')
// 優先從伺服器重新載入
document.location.reload(true)
// 優先從本機快取重新載入（預設值）
document.location.reload(false)
// 跳到另一個網址，但目前文件不保留在history物件中，
// 即無法使用後退按鈕，回到目前文件
document.location.assign('http://www.google.com')// 將location物件轉為字串，等價於document.location.href
document.location.toString()```

#雖然location屬性傳回的物件是唯讀的，但是可以將URL賦值為這個屬性，網頁就會自動跳到指定網址。
document.location = 'http://www.example.com';// 等價於document.location.href = 'http://www.example.com';

title、 characterSet

title屬性傳回目前文件的標題，該屬性是可寫入的
characterSet屬性傳回渲染目前文件的字元集

readyState

#readyState屬性傳回目前文件的狀態，共有三種可能的值
loading：載入HTML程式碼階段，尚未完成解析
interactive：載入外部資源階段
complete：全部載入完成

compatMode
compatMode屬性傳回瀏覽器處理文件的模式，可能的值為

BackCompat：向後相容模式，也就是沒有加入DOCTYPE

CSS1Compat：嚴格模式，新增了DOCTYPE

#cookie

cookie是儲存在客戶端的文本，後續在客戶端儲存章節會介紹到

innerText

innerText是可寫入屬性，返回元素內包含的文字內容，在多層次的時候會按照元素由淺到深的順序拼接其內容

123 456

外層div的innerText回傳內容是"123456"

innerHTML、outerHTML

innerHTML屬性作用和innerText類似，但不是傳回元素的文字內容，而是回傳元素的HTML結構，寫入的時候也會自動建構DOM

123 456

外層div的innerHTML回傳內容是"

123456

outerHTML 回傳內容也包含本身

##document物件常用方法

open()、close()document.open方法用於新建一個文檔，供write方法寫入內容。它實際上等於清除當前文檔，重新寫入內容
document.close方法用於關閉open方法所新建的文檔。一旦關閉，write方法就無法寫入內容了。

write()document.write方法用於向目前文件寫入內容。只要目前文件還沒用close方法關閉，它所寫入的內容就會追加在已有內容的後面。
document.open();document.write("hello");document.write("world");document.close();```

1. 如果頁面已經渲染完成再呼叫write方法，它會先呼叫open方法，擦除目前文檔所有內容，然後再寫入。 ### 2. 如果在頁面渲染過程中呼叫write方法，並不會呼叫open方法。 ###要注意的是，雖然呼叫close方法之後，無法再用write方法寫入內容，但此時目前頁面的其他DOM節點還是會繼續載入。 ########*除了某些特殊情況，應該盡量避免使用document.write這個方法。 #########本篇講解了定時器的相關問題，更多相關內容請關注php中文網。 ######相關推薦：#########詳解AJAX工作原理及其優缺點################JS取得元素的N種方法及其動靜態討論###############JavaScript全總結之DOM的Element#########

以上是JavaScript全總結之定時器&DOM的document的詳細內容。更多資訊請關注PHP中文網其他相關文章！