《JavaScript高级程序设计》读书笔记

(二) 熟悉JavaScript运行的环境，深刻理解DOM，熟悉DOM提供给JavaScript的原生API。(8-14章)

第八章 BOM

window 对象

BOM 的核心对象是 window，表示浏览器的实例。既是范文浏览器窗口的接口，又是 ECMAScript 规定的 Global 对象。

全局作用域：全局作用域中声明的变量函数会变成 window 对象的属性和方法。

窗口关系及框架：若页面中包含框架，则每个框架都有自己的 window 对象，并且保存在 frames 集合中。

top 对象始终指向最高（最外）层的框架，也就是浏览器窗口。
parent 对象始终指向当前框架的直接上层框架。
self 对象始终指向 window。

所有这些对象都是 window 对象的属性。

窗口位置：IE、Safari、Opera、Chrome 提供 screenLeft 和 screenTop 属性，FireFox 提供 screenX 和 screenY 属性，分别用于表示窗口相对于屏幕左边和上边的位置。

窗口大小：innerWidth、innerHeight、outerWidth、outerHeight

导航和打开窗口: window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。

接受 4 个参数：要加载的URL、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

通常只须传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。

间歇调用和超时调用：JavaScript 是单线程语言，但允许通过设置超时时间和间歇时间调度代码在特定的时刻执行。

超时调用 setTimeout()：指定的时间过后执行代码。

var timeoutId=setTimeout(function(){
    console.log("Hello world!");
},1000);
//取消超时调用
clearTimeout(timeoutId);

间歇调用 setInterval()：指定的时间间隔重复执行代码。

系统对话框：alert()、confirm()、prompt()

location 对象

location 对象不仅提供与当前窗口中加载的文档有关信息，还提供了一些导航功能。
即是 window 对象的属性，也是 document 对象的属性。

除直接修改 location 对象属性外 assign()、replace()、reload() 方法也可以改变当前加载页面。

location.assign("http://www.wshunli.com");
// 等价于
window.location="htttp://www.wshunli.com";
location.href="htttp://www.wshunli.com";

location.replace="htttp://www.wshunli.com";// 无法返回前一个页面
location.reload();// 重新加载页面

navigator 对象

navigator 对象是识别客户端浏览器的事实标准，其属性通常用于检测显示网页的浏览器类型。

screen 对象

screen 对象用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息 ，如像素高度和宽度等。每个浏览器中的screen对象都包含着不同过的属性，支持也不同。

history 对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为 history 是 window 对象的属性，因此每个浏览器窗口、每个标签乃至每个框架，都有自己的history 对象与特定的 window 对象关联。

第九章 客户端检测

客户端检测主要包括：
能力检测：浏览器的特定能力；
怪癖检测：浏览器实际中存在的 bug ；
用户代理检测：通过检测用户代理字符串识别浏览器。

尽量不使用客户端检测。先设计最通用的方案，再使用特定的浏览器方法增强该方案。

第十章 DOM

节点层次

DOM 将任何HTML或XML文档描绘成一个由多层节点构成的树形结构。总共有 12 种节点，其中常用的有 4 种。

Node.ELEMENT_NODE(1) - 元素节点
Node.ATTRIBUTE_NODE(2) - 特性（属性）节点
Node.TEXT_NODE(3) - 文本节点
Node.COMMENT_NODE(8) - 注释节点

DOM 节点关系：

Document 类型：JavaScript通过Document类型表示文档；浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面，且也是window对象的一个属性，因此可以将其作为全局对象来访问。

文档属性：
document.title：取得当前页面的标题，也可以修改标题。
document.URL：页面完整的URL；
document.domain：只包含页面的域名；
document.referrer：保存着链接到当前页面的那个页面的 URL。
文档方法：
document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
特殊集合：
document.anchors：包含文档中所有带name特性的<a>元素；
document.forms：包含文档中所有<form>元素；
document.img：包含文档中所有<img>元素；
document.links：包含文档中所有带href特性的<a>元素。

Element 类型：Element 类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。

特性（属性）操作：getAttribute()、setAttribute()、removeAttribute()
创建元素：document.createElement()

Text 类型：文本节点由 Text 类型表示，包含的是可以照字面解释的纯文本内容。

创建文本节点：document.createTextNode()

规范文本节点：父元素上调用 normalize()，其实就是将元素的相邻文本节点合并成一个节点。

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Yippee!");
element.appendChild(anotherTextNode);
document.body.appendChild(element);

console.log(element.childNodes.length);  //2
element.normalize();
console.log(element.childNodes.length);  //1
console.log(element.firstChild.nodeValue);  //"Hello World!Yippee!"

分割文本节点：spiltText()

var element=document.createElement("div");
element.className="message";
var textNode=docuemnt.createTextNode("Hello World!");
element.appendChild(textNode);
document.body.appendChild(element);

var newNode=element.firstChild.spiltText(5);
console.log(element.firstChild.nodeValue); //"Hello"
console.log(newNode.nodeValue);            //" World"
console.log(element.childNodes.length);    //2

Attr 类型：元素的特性（属性）在 DOM 中以 Attr 类型来表示。
Attr对象有3个属性：name、value和specified。
其中，name是特性名称，value是特性的值，specified是一个布尔值，用以区别特性是在代码中指定的还是默认的。

Comment 类型：注释在 DOM 中是通过 Comment 类型来表示的。

其他节点类型：

Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE(6)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_FRAGMENT_NODE(11)
Node.NOTATION_NODE(12)

DOM 操作技术

利用 JavaScript 代码、CSS 样式、表格修改 DOM 元素的结构、属性、内容的技术。

动态脚本：<script>
动态样式：<link>,<style>
操作表格：<table>

第十一章 DOM 扩展

DOM扩展主要包含两方面：Selector API，HTML5

选择符 API

querySelector() ：接收一个 CSS 选择符，返回匹配的第一个元素；
querySelectorAll() ：返回 NodeList 对象。

// 取得ID为"myDIV"的元素
var myDIV = document.querySelector("#myDiv");
// 取得某<div>中的所有<em>元素(类似于getElementsByTagName("em"))
var ems = document.getElementById("myDiv").querySelectorAll("em");

元素遍历

Element Traversal 规范为 DOM 元素新定义了5个属性：
childElementCount：返回子元素的个数（不包括文本节点和注释）
firstElementChild：指向第一个子元素，firstChild元素版
lastElementChild：指向最后一个子元素，lastChild元素版
previousElementSibling：指向前一个同辈元素，previousSibling元素版
nextElementSibling：指向后一个同辈元素，nextSibling元素版

HTML5

与类相关的扩展：

getElementsByClassName()：返回带有特定类的所有元素的 NodeList。
classList属性：HTML5为所有元素添加 classList属性。

焦点管理：HTML5也添加了辅助管理DOM焦点的功能。
document.activeElement 属性，始终会引用 DOM 中当前获得焦点的元素。
document.hasFocus()方法，确定文档是否获得了焦点。

var button = document.getElementById("myButton");
button.focus();
console.log(document.activeElement === button); // true
console.log(document.hasFocus()); // true

HTMLDocument 的变化：

readyState 属性：document.readyState 指示文档是否加载完成。
loading：正在加载文档；complete：已经加载完文档。

head 属性：document.head 属性可以获得<head>元素。

字符集属性：

document.charset：表示文档中实际使用的字符集。
document.defaultCharset：当前文档的默认字符集。

自定义数据属性：

HTML5规定可以为元素添加非标准的属性，以此为元素提供与渲染无关的信息。
每个自定义数据属性，都要为其添加前缀data-。可通过 dataset 属性访问自定义属性的值。

<div id="myDiv" data-appId="12345" data-myName="nicholas"></div>
// 访问上述div元素的自定义属性
var div = document.getElementById("myDiv");
// 访问自定义属性值时，属性名前不必加data-前缀
var appId = div.dataset.appId;

插入标记：

innerHTML 属性：
在读模式下，innerHTML属性返回调用元素的所有子节点HTML标记。
在写模式下，innerHTML属性会根据指定的值创建新的DOM树，然后用新DOM树替换调用元素原先的所有子节点。

outerHTML 属性：
在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。
在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。

insertAdjacentHTML() 方法：
语法：insertAdjacentHTML(插入位置，要插入的HTML文本)
插入位置必须是下列四个值之一：

• "beforebegin"，在当前元素之前插入一个紧邻的同辈元素
• "afterend"，在当前元素之后插入一个紧邻的同辈元素
• "afterbegin"，给当前元素插入第一个子元素（不管当前元素是否有无子元素）
• "beforeend"，给当前元素插入最后一个子元素（不管当前元素是否有无子元素）

scrollIntoView() 方法：所有元素均可调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。

第十二章 DOM2 和 DOM3

DOM1级主要定义的是HTML和XML文档的底层结构。DOM2 和DOM3 级则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。

第十三章 事件

事件流

事件流描述的是从页面中接收事件的顺序。

事件冒泡（event bubbling）：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
事件捕获（event capturing）:不太具体的节点应该更早接收到事件，最具体的节点应该最后接收到事件。

事件流包括三个阶段：
事件捕获阶段：首先发生，为截获事件提供了机会。
处于目标阶段：实际的目标接收到事件。
事件冒泡阶段：在此阶段可以对事件做出响应。

事件处理程序

事件是用户或浏览器自身执行的某种动作（比如click、load、mouseover等）
事件处理程序（事件侦听器）是响应某个事件的函数。
事件处理程序的名字以“on”开头，如click事件的事件处理程序是onclick。

HTML事件处理程序：

为元素添加一个与事件处理程序同名的属性，该属性的值是能够执行的JS代码或JS函数。

<script type="text/javascript">
    function showMessage() {
        console.log("Hello world");
    }
</script>
<input type="button" value="Clicke Me" onclick="showMessage()" />

DOM0级事件处理程序：

将一个函数赋值给一个事件处理程序属性。

var btn = document.getElementById("myBtn");
// 为按钮指定onclick事件处理程序
btn.onclick = function(){
    console.log("Clicked");
}
// 删除事件处理程序
btn.onclick = null;

DOM2级事件处理程序：

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()、removeEventListener() 。

var btn = document.getElementById("myBtn");
//定义事件处理程序函数
var handler = function(){
    console.log(this.id);
}
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);

true：在捕获阶段调用事件处理程序；false：在冒泡阶段调用事件处理程序。

事件对象

触发DOM上的某个事件时，会产生一个event事件对象，该对象包含着所有与事件有关的信息。

兼容DOM（DOM0级和DOM2级）的浏览器将event对象传入到事件处理程序中。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    console.log(event.type);  //"click"
};
btn.addEventListener("click", function(event){
    console.log(event.type);  //"click"
}, false);

属性/方法：

currentTarget：正在处理事件的那个元素
target：事件的目标
type：事件类型
cancelable：可以阻止特定事件的默认行为
preventDefault()：阻止特定事件的默认行为
stopPropagation()：停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡
eventPhase：事件出于事件流的阶段 捕获阶段为1 处于目标对象为2 冒泡阶段为3

事件类型

UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件、合成事件、变动事件。

第十四章 表单脚本

在HTML中，表单是由 <form> 元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。