JavaScript高级程序设计-读书笔记(3)

第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()则会在字符串的末尾添加一个换行符( )。

(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的次数。

原文地址:https://www.cnblogs.com/ww03/p/5267332.html