• JavaScript之DOM對象和內置對象

    2016-07-12

    1. window 和document 對象

    瀏覽器每次加載和顯示頁面時,都在內存里創建頁面及其全部元素的一個內部表示體系,也就是DOM。在DOM 里,頁面的元素具有一個邏輯化、層級化的結構,就像一個由父對象和子對象組成的樹形結構。這些對象及其相互關系構成了Web 頁面及顯示頁面的瀏覽器的抽象模型。每個對象都有“屬性”列表來描述它,而利用JavaScript可以使用一些方法來操作這些屬性。

    這個層級樹的最頂端是瀏覽器window對象,它是DOM 樹里一切對象的根。window對象具有一些子對象,如圖下圖所示。圖中第一個子對象是document,這也是最經常使用的對象。瀏覽器加載的任何HTML頁面都會創建一個document對象,包含全部HTML內容及其他構成頁面顯示的資源。利用JavaScript以父子對象的形式就可以訪問這些信息。這些對象都具有自己的屬性和方法。


    2. DOM對象和內置對象

    2.1 alert()

    alert() 沒有返回值,向用戶彈出一個對話框。

    2.2 confirm()

    confirm() 對話框為用戶提供了一個選擇,可以點擊“確定”或者“取消”按鈕。點擊任意一個按鈕都會關閉對話框,讓腳本繼續執行,但根據哪個按鈕被單擊,confirm()方法返回不同的值。單擊“確定”返回布爾值“真”,單擊“取消”返回布爾值“假”。

    2.3 prompt()

         prompt() 是打開模態對話框的另一種方式,它允許用戶輸入信息。使用示例:

    var name =prompt(“what is your name?”);
    prompt() 方法還可以有第二個可選參數,表示默認的輸入內容,從而避免用戶直接點擊“確定”而不輸入任何內容。如,
    var name = prompt(“what is your name?”,”John”);

         當用戶輸入了信息,然后點擊“確定”按鈕或者按回車鍵后,返回值就是用戶輸入的字符串;如果用戶沒有在對話框輸入信息就點擊“確定按鈕”或者按回車鍵,返回值就是prompt()方法設置的第二個可選參數的值(如果有的話);當用戶簡單關閉了這個對話框(點擊了“取消”或者按了Esc鍵),返回值就是null。

    2.4 根據ID選取元素

         如果想從HTML頁面里選擇某個特定id的元素,我們只需要把相應的id作為參數來調用document對象的 getElementById()方法,他就會返回特定id的頁面元素所對應的DOM對象。例如,

    var myDiv = document.getElementById(“div1”);

         注:innerHTML屬性的介紹:innerHTML屬性可以讀取或者設置特定頁面元素內部的HTML內容。假設假設HTML頁面包含如下元素:

    <div id=”div1”>      <p> Here is some originaltext. </p> </div>

    如果執行下面的語句

    var myDivContents =document.getElementById().innerHTML;

    那么myDivContents則包含了如下字符串:Hereis some original text.

    2.5 訪問瀏覽器記錄

    在JavaScript里,瀏覽器的歷史記錄是以 window.history對象代表的,它基本上就是訪問過的URL列表。這個對象的方法讓我們能夠使用這個列表,但是不能直接修改這些URL。這個對象只有一個屬性,就是他的長度,即history.length。有三個方法,forward(),backward(),go()。

    forward()和backward()方法相當于點擊瀏覽器的“前進”和“后退”按鈕。

    go()方法有一個參數,正數或者負數,可以跳到歷史記錄列表里的相對位置。如,

    history.go(-3);  // 回退3個頁面 history.go(2);  // 前進2個頁面
    這個方法也可以接受字符串作為參數,找到歷史記錄列表里第一匹配的URL。如,
    history.go(“example.com”);  //到達歷史記錄列表里面第一個包含“example.com”的URL

    2.6 location對象

    location對象主要是包含當前加載頁面的URL信息。

    location對象的屬性:

    屬性

    描述

    hash

    設置或返回從井號 (#) 開始的 URL(錨)。

    host

    設置或返回主機名和當前 URL 的端口號。

    hostname

    設置或返回當前 URL 的主機名。

    href

    設置或返回完整的 URL。

    pathname

    設置或返回當前 URL 的路徑部分。

    port

    設置或返回當前 URL 的端口號。

    protocol

    設置或返回當前 URL 的協議。

    search

    設置或返回從問號 (?) 開始的 URL(查詢部分)。




















     利用location對象導航。第一種是直接設置對象的href屬性:

    location.href= ‘www.baidu.com’;

    使用這種方法把用戶轉移到新頁面時,原始頁面還保留在瀏覽器的歷史記錄里面。第二種是直接用新的URL代替當前頁面,即把當前頁面從歷史記錄列表里刪除。如:

    location.replace(‘www.baidu.com’);


    更多內容可以參考  JavaScript手冊


    天堂网