Window与Document

Posted dreamsqin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Window与Document相关的知识，希望对你有一定的参考价值。

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

以上是关于Window与Document的主要内容，如果未能解决你的问题，请参考以下文章

location 对象

jQuery中的$(window).load()与$(document).ready()

window.onload 与 $(document).ready() 的区别

求教下面的javascript代码意思

window.onload 与 document.onload

window.onload 与 document.onload