JavaScript学习笔记9

表单、控件

表单导航：
document.forms – 一个表单元素可以通过document.forms[name/index]访问到。
form.elements – 表单元素可以通过form.element[name/index]的方式访问，也可以用form[name/index]，elements属性也使用于
element.form – 元素通过form属性来引用它们所属的表单，value可以被通过input.value，textarea.value，select.value等来获取到，对于单选框和复选框来说可以使用input.checked。
对于元素，我们可以通过索引select.selectedIndex来获取它的value，也可以通过集合select.options

焦点：在元素获得或者失去焦点时，会触发focus和blur事件，它们的特点是，它们不会冒泡，但是可以改为在捕获阶段触发，或者使用focusin/focusout。大多数元素默认不支持聚焦，使用tabindex可以是任何元素变成可聚焦的。可以通过document.activeElement来获取当前所聚焦的元素。

加载文档和其他资源

页面生命周期：DOMContentLoaded，load，beforeunload，unload。

HTML页面的生命周期包含三个重要事件：
DOMContentLoaded – 浏览器已完全加载HTML，并构建了DOM树，但像和样式表之类的外部资源可能尚未加载完成。
load – 浏览器不仅加载完成了HTML，还加载完成了所有外部资源，图片、样式等。
beforeunload/unload – 当用户正在离开页面时。

每个事件都是有用的：
DOMContentLoaded事件 – DOM已经就绪，因此处理程序可以查找DOM节点，并初始化接口。
load事件 – 外部资源已加载完成，样式已被应用，图片大小也已知了。
beforeunload事件 – 用户正在离开，我们可以检查用户是否保存了更改，并询问他是否真的要离开。
unload事件 – 用户几乎已经离开，但是我们仍然可以启动一些操作，例如发送统计数据。

DOMContentLoaded和脚本：当浏览器处理一个HTML文档，并在文档中遇到

页面生命周期事件：
1、当用户想要离开页面时，window上的beforeunload事件就会被触发，如果我们取消这个事件，浏览器就会询问我们是否真的要离开。
2、当用户最终离开时，window上的unload事件就会被触发，我们只能执行不涉及延迟或询问用户的简单操作。我们可以使用navigator.sendBeacon来发送网络请求。
3、document.readyState是文档当前状态，可以在readystatechange事件中跟踪状态更改：
loading – 文档正在被加载
interactive – 文档已被解析完成，与DOMContentLoaded几乎同时发生，但是在DOMContentLoaded之前发生。
complete – 文档和资源均已加载完成，与window.onload几乎同时发生，但是在window.onload之前发生。

脚本：async，defer

脚本阻塞：当浏览器加载HTML时遇到标签，浏览器就不能继续构建DOM，它必须立刻执行此脚本，对于外部

defer特性：告诉浏览器不要等待脚本，继续处理HTML，构建DOM，脚本会在后台下载，然后等DOM构建完成后，脚本才会执行。具有defer特性的脚本不会阻塞页面，总是要等到DOM解析完毕，但在DOMContentLoaded事件之前执行。
具有defer特性的脚本保持其相对顺序，就像常规脚本一样，可以确保脚本执行的相对顺序。defer特性仅适用于外部脚本，如果

async特性：以为着脚本是完全独立的，浏览器不会因async脚本而阻塞，其他脚本不会等待async脚本加载完成，同样async脚本也不会等待其他脚本。DOMContentLoaded和异步基本不会彼此等待，如果异步脚本在页面完成后才加载完成，DOMContentLoaded可能会在异步脚本之前，如果异步脚本很短，或者从HTTP缓存中加载的，那么DOMContentLoaded会在脚本之后。

动态脚本：使用JavaScript动态的创建一个脚本，并将其附加（append）但文档（document）中。例如：
let script = document.createElement(‘script’);
script.src = ‘/article/script-async-defer/long.js’;
document.body.append(script);
当脚本被附加到文档是，脚本就会立即开始加载，默认情况下，动态脚本的行为是异步的。它们不会等待任何东西，也没有什么东西会等它们。先加载完成的脚本先执行，加载优先顺序。

加载文档和其他资源

浏览器允许我们跟踪外部资源的加载，脚本、iframe、图片等。onload事件表示成功加载，onerror事件表示出现error。
onload/onerror事件仅跟踪加载本身，在脚本处理和执行期间可能发生的error超出了这些事件跟踪的范围。也就是说，如果脚本成功加载，则即使脚本中有编程error，也会触发onload事件，如果要跟踪脚本error，可以使用window.onerror全局处理程序。

其他资源：load和error事件也适用于其他资源，基本上适用于具有外部src的任何资源。大多数资源在被添加到文档中后，便开始加载。但是是个例外，它要等到获得src后才开始加载。对于来说，iframe加载完成时会触发iframe.onload事件，无论是成功加载还是出现error。

跨源策略：首先来自一个网站的脚本无法访问其他网站的内容，一个源（域、端口、协议三者）无法获取另一个源的内容，因此即使我们有一个子域，或者仅仅是另一个端口，这都是不同的源，彼此无法相互访问。
要允许跨源访问，