Window
表示一個包含DOM文檔的窗口,其
document
屬性指向窗口中載入的 DOM文檔。使用document.defaultView
屬性可以獲取指定文檔所在窗口。window作爲全局變量,代表了腳本正在運行的窗口,暴露給 Javascript 代碼。PS:在有標籤頁功能的瀏覽器中,每個標籤都擁有自己的 window 對象;也就是說,同一個窗口的標籤頁之間不會共享一個 window 對象。
window.resizeTo
和window.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