Window與Document

Window

表示一個包含DOM文檔的窗口,其 document 屬性指向窗口中載入的 DOM文檔。使用 document.defaultView 屬性可以獲取指定文檔所在窗口。window作爲全局變量,代表了腳本正在運行的窗口,暴露給 Javascript 代碼。

PS:在有標籤頁功能的瀏覽器中,每個標籤都擁有自己的 window 對象;也就是說,同一個窗口的標籤頁之間不會共享一個 window 對象。window.resizeTowindow.resizeBy 等方法除外。

  • 對象常用屬性

    window.innerHeight :獲得瀏覽器窗口的內容區域(視口viewport)的高度,包含水平滾動條(如果有的話)
    window.innerWidth :獲得瀏覽器窗口的內容區域(視口viewport)的寬度,包含垂直滾動條(如果有的話)
    window.location :獲取/設置 window 對象的 location, 或者當前的 URL
    window.name :獲取/設置窗口的名稱
    window.pageXOffset :返回文檔/頁面水平方向已滾動的像素值,window.scrollX的別名
    window.pageYOffset :返回文檔/頁面在垂直方向已滾動的像素值,window.scrollY的別名

  • 對象常用方法

    window.alert() :提示信息會話框
    window.confirm() :確認會話框
    window.prompt() :要求鍵盤輸入會話框
    window.open() :打開新的窗口
    window.close() :關閉當前窗口
    window.requestAnimationFrame() :告知瀏覽器有一個動畫正在進行,請求爲下一幀動畫重繪窗口
    window.scroll() :滾動窗口至文檔中的特定位置,與window.scrollTo()


Document

表示任何在瀏覽器中載入的網頁,並作爲網頁內容的入口,也就是DOM 樹。DOM 樹包含了像 <body><table> 這樣的元素,以及大量其他元素。Document向網頁文檔本身提供了全局操作功能(例如獲取頁面的 URL 、在文檔中創建一個新的元素)。

PS:Document 接口描述了任何類型的文檔(HTML、XML、SVG等)的通用屬性與方法

  • 對象常用屬性

    document.body :返回當前文檔的 <body><frameset> 節點
    document.head :返回當前文檔的 <head> 元素
    document.scripts :返回文檔中所有的 <script> 元素
    document.readyState :返回當前文檔的加載狀態(loading / 正在加載、interactive / 可交互、complete / 完成),當該屬性值發生變化時,會在document 對象上觸發readystatechange事件
    document.title :獲取或設置當前文檔的標題
    document.bgColor :獲取或設置當前文檔的背景色
    document.URL :以字符串形式返回文檔的地址欄鏈接(只讀),等同於document.location.href(可寫)
    document.location :返回當前文檔的 Location 對象,包含有文檔的 URL 相關的信息(href、protocol、host、port等)


    PS:document.location = 'http://www.example.com'等同於document.location.href = 'http://www.example.com'

  • 對象常用方法

    document.createAttribute() :創建並返回一個新的屬性節點
    document.createElement() :創建由tagName指定的HTML元素,或一個HTMLUnknownElement,如果tagName不被識別
    document.getElementsByClassName() :返回一個包含了所有指定類名的子元素的類數組對象
    document.getElementsByTagName() :返回一個包括所有給定標籤名稱的元素的HTML集合HTMLCollection
    document.getElementById() :返回一個匹配特定 ID的元素
    document.getElementsByName() :根據給定的屬性name值返回一個在 (X)HTML document的節點列表集合
    document.querySelector() :返回文檔中與指定選擇器或選擇器組匹配的第一個 html元素Element,如果找不到匹配項,則返回null
    document.close() :用於結束對文檔的 document.write() 寫入操作,這種寫入操作一般由 document.open() 打開

參考資料

1、Window:https://developer.mozilla.org/zh-CN/docs/Web/API/Window
2、Document:https://developer.mozilla.org/zh-CN/docs/Web/API/Document

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章