JavaScript高级程序设计-读书笔记
Posted 浅岸
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript高级程序设计-读书笔记相关的知识，希望对你有一定的参考价值。
第8章 BOM
1、window对象
（1）全局作用域
BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
（2）窗口关系及框架
如果界面中包含框架，这每个框架都拥有自己的window对象，并且保存在frames集合中，可以通过数值的索引（从0开始，从左至右，从上到下）或者框架名称来访问相应的window对象。
window对象指向的是那个框架的特定实例，而非最高层的框架。
top对象始终指向最高（最外）层的框架，也就是浏览器对象。
parent对象始终指向当前框架的直接上层框架。
self对象始终指向window；实际上，self和window对象可以互换使用，引用self对象的目的只是为了与top和parent对象对应起来。
（3）窗口位置
使用下列代码可以跨浏览器取得窗口左边和上边的位置：
var leftPos = (typeof window.screenLeft == “number”)?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == “number”)?
window.screenTop : window.screenY;
IE 、Safari、Opera、Chrome提供了screenLeft和screenTop属性，分别英语表示窗口相对于屏幕左边和上边的位置。Firefox这在screenX和screenY属性提供相同的窗口位置信息。
使用moveT()和moveBy方法有可能将窗口精确地移动到一个新的位置。这两个方法都接收两个参数，其中moveT()接收的是新位置的x和有坐标值，而moveBy()接收的是在水平和垂直方向上移动的像素数。
这两个方法，在Opera和IE7（及更高版本）中默认就是禁用的；另外，这两个方法都不适用与框架，只能对最外层的window对象使用。
（4）窗口大小
Firefox 、Safari、Opera、Chrome均为此提供了4个属性：innerWidth、innerHeight、outerWidth和outerHeigh。
IE没有提供取得当前浏览器窗口尺寸的属性；不过，它通过DOM提供了页面可见区域的相关信息。
使用resizeTo()和使用resizeBy()方法可以调整浏览器窗口的大小。某些情况下，也有可能被浏览器禁用。
（5）导航和打开窗口
使用window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。
close方法仅适用于通过window.open打开的弹出窗口的关闭；对于浏览器的主窗口，如果没有得到用户的允许是不能关闭的。
弹出窗口倒是可以调用top.close()在不经用户允许的情况下关闭自己。
准确地检测出弹出窗口是否被屏蔽，代码如下：
var blocked = false；
try {
var wroxWin == window.open(“http://www.wrox.com”,”_blank”);
if (wroxWin == null){
blocked = true;
}
} catch(ex){
blocked = true;
}
if (blocked){
alert(“The popup was blocked”);
}
(6)间歇调用和超时调用
超时调用使用window对象的setTimeout()方法，是在指定的时间过后执行代码；要取消尚未执行的超时调用计划，可以使用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。
设置间歇调用的方法是setInterval()，是每隔指定时间就执行一次代码；要取消尚未执行的间歇调用，可以使用clearInterval()方法并传入相应的间歇调用ID。
一般认为，使用超时调用来模拟间歇调用的是一种最佳模式。
（7）系统对话框
浏览器通过alert()、confirm()和prompt方法可以调用系统对话框向用户显示消息。
系统对话框与浏览器显示的网页没有关系，也不包含html。他们的外观由操作系统及（或）浏览器设置决定，而不是由CSS决定。
还有两个通过JavaScript打开的对话框，即window.print()和window.find()。
2、location地址栏对象
提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
3、navigator浏览器信息对象
4、screen对象
基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。
5、history对象
保存用户上网的历史记录，从窗口打开的那一刻算起。
使用go()方法可以在用户的历史记录中任意跳转，可以向前也可以向后。
另外还使用两个简写方法back()和forward()来代替go ();
第9章 客户端检测
1、能力检测
最常用也是最为人们广泛接受的客户端检测形式（又称特性检测），其目标是在编写代码之前先检测特定浏览器的能力。
2、怪力检测
其目标是识别浏览器的特殊行为，存在什么缺陷（“怪癖”也就是bug）。
3、用户代理检测
通过检测用户代理字符串来识别浏览器。
检测呈现引擎、平台、Windows操作系统、移动设备和游戏系统。
第10章 DOM
1、节点层次
DOM可以将任何HTML或XML文档描述成一个由多层节点构成的结构。
（1）Node类型
JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。
每个节点都有一个nodeType属性，用于表明节点的类型。
要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。
对于元素节点，nodeName中保存的始终都是元素的标签名，而nodeValue的值则始终为null。
每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类型数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。而且这个对象也有length属性，但它不是Array的实例。
每个节点都有一个parentNode属性，该属性指向文档树中的父节点。
节点关系图
hasChildNodes()方法在节点包含一或多个节点的情况下返回true。
所有的节点都有的最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点。
节点操作：
appendChild()用于向childNodes列表的末尾添加一个节点；
insertBefore()方法把节点放在childNodes列表中某个特定的位置上；、
replaceChild()替换节点；
removeChild()移除节点；
上述几种方法操作的都是某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点。
有两个方法是所有类型的节点都有的：
第一个是cloneNode(),用于创建调用这个方法的节点的一个完全相同的副本。其接受一个布尔值参数:参数为true，执行深复制，也就是复制节点及整个子节点树；参数为false，即只复制节点本身，复制后返回的节点副本属于文档所有，但并没有为它指点父节点。
另一个方法是normalize()，其作用是处理文档树中的文本节点。当在某个节点上调用这个方法时，就会在该节点的后代节点中查找。如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点。
（2）Document类型
所有的浏览器都支持document.documentElement和document.body属性。
documentElement、firstChild和childNodes[0]的值相同，都指向<html>元素。
取得元素的操作可以用document对象的几个方法：getElementById()、getElementsByTagName()、getElementsByName();
将输出流写入到网页有4个方法实现：write()、writeIn()、open()、close()。
write()会原样写入，而writeIn()则会在字符串的末尾添加一个换行符(\n)。
（3）Element类型
Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。
要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性。
每个HTML元素中都存在下列标准特性：id、title、lang（元素内容的语言代码，很少用）、dir（语言的方向，值为ltr或rtl,也很少用）、className。
每个元素都有一个或多个特性，这些特性的用途是给出相应元素或内容的附加信息。操作特性的DOM方法主要有三个，分别为getAttribute()、setAttribute()和removeAttribute()。
创建元素使用document.createElement()方法。这个方法只接受一个参数，可以是要创建元素的标签名，也可以传入完整的元素标签，也可以包含属性。
（4）Text类型
文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。
可以通过nodeValue属性或data属性访问节点中包含的文本。
可以使用document.createTextNode()创建新的文本节点，这个方法接收一个参数——要插入节点中的文本。
规范化文本节点可以使用normalize()方法。如果在一个包含两个或多个文本节点的父元素上调用该方法，则会将所有文本节点合并成一个节点，结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值。
与之作用相反，splitText方法会将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值。
2、DOM操作技术
（1）动态脚本
指的是在页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本。
创建动态脚本有两种方式：插入外部文件和直接插入JavaScript代码：
² 动态加载外部JavaScript文件，创建节点的DOM代码（整个过程使用函数封装）如下所示：
function loadScript(url) {
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.src = url;
document.body.appendChild(script);
}
通过调用这个函数来加载外部的JavaScript文件：
loadScript(”client.js”);
（2）动态样式
能够把CSS样式包含到HTML页面中的元素有两个。其中，<link>元素用于包含来自外部的文件，而<style>元素用于指定嵌入的样式。
（3）操作表格
要想创建表格，一般都必须涉及表示表格行、单元格、表头等方面的标签。
为了方便构建表格，HTML DOM还为<table>、<tbody>和<tr>元素添加了一些属性和方法。
（4）使用NodeList
从本质上说，所有NodeList对象都是在访问DOM文档时实时运行的查询。一般，应该尽量减少访问NodeList的次数。
以上是关于JavaScript高级程序设计-读书笔记的主要内容，如果未能解决你的问题，请参考以下文章