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

posted @ 2019-12-04 12:09  Dreamsqin  阅读(266)  评论(0编辑  收藏  举报