Charles's Castle

JavaScript_note_7

JavaScript_note_7

Charles Lv7

2023-02-02 15:50:20 2023-02-02 15:50:20 Created 2023-08-18 18:21:05 2023-08-18 18:21:05 Updated

web

2.1k Words 8 Mins

JavaScript_note_7

JavaScript中的window及document

课程链接：

7.1–window

7.2–document

课程内容细节：

浏览器的全局对象是window，而所有的全局变量实际上是window的成员。

window.document表示浏览器窗口中的html页面，document.write()将内容写入页面，页面中的元素就是document里的成员。

JavaScript中放在head中的是执行函数的，而放在body部分是执行动作的。

外部JavaScript文件调用：
1
<script src="util.js"></script>
文档对象模型(Document Object Model),简称DOM,document对象的成员提供了HTML文档的信息。

image对象的src可以改写以装入一幅新的图片，可以创建Image()对象来提前装载图片，onLoad事件表明图片装载完成。

完整代码：

<html>

<head>
  <meta charset="utf-8">
  <script>
    var cnt = 10;

    function update() {
      if (cnt >= 0) {
        status = cnt--;
      }
    }

    function stop() {
      w.close();
    }

    function jump() {
      location = "https://charles2530.github.io/";
    }
  </script>
</head>

<body onload="setInterval('jump()',2000);">
  <!-- onload="setInterval('update()',1000);" -->
  <!-- onload="setInterval('stop()',2000);" -->
  <img name="mama" src="mama.jpg">

  <script>
    alert(document.images);

    var value = 12;
    alert(window.value);
    for (x in document) {
      document.write(x + "<br/>");
    }

    if (confirm("还要继续吗？")) {
      alert("好，继续");
    } else {
      alert("好吧，再见");
    }
    var name = prompt("你的名字是:");
    alert(name);

    var w = open("small.html", "small", "width=400,height=300");
    w.moveTo(0, 0);
    alert(location);
  </script>
  <!-- 事件处理器 -->
  <p onmouseover="alert('hi');" onmouseout="alert('bye');">
    一个段落
  </p>
  <p onmouseover="status='网易云学习';" onmouseout="status='';">
    另一个段落
  </p>
</body>

</html>

课后补充

Window 对象

Window 对象属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。(请参阅对象 )
frames	返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
history	对 History 对象的只读引用。请参数 History 对象。
innerHeight	返回窗口的文档显示区的高度。
innerWidth	返回窗口的文档显示区的宽度。
localStorage	在浏览器中存储 key/value 对。没有过期时间。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerHeight	返回窗口的外部高度，包含工具条与滚动条。
outerWidth	返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
screen	对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft	返回相对于屏幕窗口的x坐标
screenTop	返回相对于屏幕窗口的y坐标
screenX	返回相对于屏幕窗口的x坐标
sessionStorage	在浏览器中存储 key/value 对。在关闭窗口或标签页之后将会删除这些数据。
screenY	返回相对于屏幕窗口的y坐标
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的父窗口。

Window 对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
atob()	解码一个 base-64 编码的字符串。
btoa()	创建一个 base-64 编码的字符串。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
getSelection ()	返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()	获取指定元素的 CSS 样式。
matchMedia()	该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scroll()	已废弃。该方法已经使用了 scrollTo() 方法来替代。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
stop()	停止页面载入。
postMessage()	安全地实现跨源通信。

Document 对象

Document 对象属性和方法

HTML文档中可以使用以下属性和方法:

属性 / 方法	描述
document.activeElement	返回当前获取焦点元素
document.addEventListener()	向文档添加句柄
document.adoptNode(node)	从另外一个文档返回 adapded 节点到当前文档。
document.anchors	返回对文档中所有 Anchor 对象的引用。
document.applets	返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持元素。
document.baseURI	返回文档的绝对基础 URI
document.body	返回文档的body元素
document.close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
document.cookie	设置或返回与当前文档有关的所有 cookie。
document.createAttribute()	创建一个属性节点
document.createComment()	createComment() 方法可创建注释节点。
document.createDocumentFragment()	创建空的 DocumentFragment 对象，并返回此对象。
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。
document.doctype	返回与文档相关的文档类型声明 (DTD)。
document.documentElement	返回文档的根节点
document.documentMode	返回用于通过浏览器渲染文档的模式
document.documentURI	设置或返回文档的位置
document.domain	返回当前文档的域名。
document.domConfig	已废弃。返回 normalizeDocument() 被调用时所使用的配置。
document.embeds	返回文档中所有嵌入的内容（embed）集合
document.forms	返回对文档中所有 Form 对象引用。
document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.images	返回对文档中所有 Image 对象引用。
document.implementation	返回处理该文档的 DOMImplementation 对象。
document.importNode()	把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding	返回用于文档的编码方式（在解析时）。
document.lastModified	返回文档被最后修改的日期和时间。
document.links	返回对文档中所有 Area 和 Link 对象引用。
document.normalize()	删除空文本节点，并连接相邻节点
document.normalizeDocument()	删除空文本节点，并连接相邻节点的
document.open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState	返回文档状态 (载入中……)
document.referrer	返回载入当前文档的文档的 URL。
document.removeEventListener()	移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()	重命名元素或者属性节点。
document.scripts	返回页面中所有脚本的集合。
document.strictErrorChecking	设置或返回是否强制进行错误检查。
document.title	返回当前文档的标题。
document.URL	返回文档完整的URL
document.write()	向文档写 HTML 表达式或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

Title: JavaScript_note_7
Author: Charles
Created at : 2023-02-02 15:50:20
Updated at : 2023-08-18 18:21:05
Link: https://charles2530.github.io/2023/02/02/javascript-note-7/
License: This work is licensed under CC BY-NC-SA 4.0.

#web

recommend_articles

multiobjective-programming

multiobjective-programming

JavaScript-note-8

JavaScript-note-8

OS_theory_5

recommend_articles

multiobjective-programming

multiobjective-programming

JavaScript-note-8

JavaScript-note-8

Comments

On this page

JavaScript_note_7

JavaScript_note_7
1. JavaScript中的window及document