第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高级程序设计-读书笔记（3）的更多相关文章

  1. javascript高级程序设计读书笔记-事件（一）

    读书笔记,写的很乱   事件处理程序   事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别  没有DOM1 同样的事件 DOM0会顶掉html事件   因为他们都是属性  而 ...

  2. javascript高级程序设计读书笔记

    第2章  在html中使用javascript 一般都会把js引用文件放在</body>前面,而不是放在<head>里, 目的是最后读取js文件以提高网页载入速度. 引用js文 ...

  3. Javascript高级程序设计读书笔记（第六章）

    第6章  面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新 ...

  4. JavaScript高级程序设计-读书笔记(7）

    第22章 高级技巧 1.高级函数 (1)安全的类型检测 在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式的字符串. ...

  5. JavaScript高级程序设计 读书笔记

    第一章 JavaScript 简介 第二章 Html中使用JavaScript 第三章 基本概念 第四章 变量,作用域,内存 第五章 引用类型 第六章 面向对象 第七章 函数表达式 第八章 BOM 第 ...

  6. JavaScript高级程序设计 读书笔记 第一章

    JavaScript是一种专门为与网页交互而设计的脚本语言 JavaScript实现 ECMAscript---核心 DOM---文档对象模型 BOM---浏览器对象模型

  7. Javascript高级程序设计读书笔记（第二章）

    第二章  在HTML中使用Javascript 2.1<script>元素 延迟脚本(defer = "defer")表明脚本在执行时不会影响页面的构造,脚本会被延迟到 ...

  8. JavaScript高级程序设计-读书笔记（6）

    第20章 JSON JSON是一个轻量级的数据格式,可以简化表示复杂数据结构的工作量 JSON的语法可以表示一下三种类型的值 l        简单值:使用与JavaScript相同的语法,可以在JS ...

  9. JavaScript高级程序设计-读书笔记（5）

    第13章 事件 1.事件流 事件流描述的是从页面中接收事件的顺序.IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流. (1)事件冒泡,即事件开始时由最具体的元 ...

  10. JavaScript高级程序设计-读书笔记（4）

    第11章 DOM扩展 1.选择符API Selector API Level 1 的核心是两个方法:querySelector()和querySelectorAll().在兼容的浏览器中,可以通过Do ...

随机推荐

  1. UVA11426 GCD - Extreme (II)---欧拉函数的运用

    题目链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  2. Saltstack之SSH简介

    安装 yum install -y salt-ssh 官方文档  https://docs.saltstack.com/en/latest/topics/ssh/index.html 配置 vi /e ...

  3. 每人涨10%的工资，涨的前一共不超过5万，从低工资往高工资的人涨，超过5W则停止涨，问涨的钱花了多少，多少人获得了涨薪。

    ;with test(CID,money,NewAmount) as ( SELECT Row_Number() over ( order by money ) as CID ,money ,mone ...

  4. （2.1）备份与还原--sql server文件的概念及操作

    概述:sql server是以文件形式存储数据与日志 1.数据文件 sql server数据文件分为2类 (1)主数据库文件 主数据库文件包含数据库的启动信息.系统对象,并指向数据库的其他文件(从数据 ...

  5. 004-hadoop家族概述

    hadoop家族 名称 简介   Hadoop 分布式基础架构 Hadoop的框架最核心的设计就是:HDFS和MapReduce.HDFS为海量的数据提供了存储,则MapReduce为海量的数据提供了 ...

  6. vs中nodejs代码 resharper 提示 ECMAScript2015 Feature. your Current language level is ECMAScript5的解决办法

    问题如图 错误信息:ECMAScript 2015 Feature. your Current language level is: ECMAScript5 解决方法, 打开 Resharper -& ...

  7. 登录plsql 报错 the account is locked --用户被锁

    登录数据库服务器,进入oracle用户下: [root@uumsnormal-oracle admin]# su - oracle [oracle@uumsnormal-oracle ~]$ sqlp ...

  8. 项目中遇到的问题， ftp等

    1:ftp 上传文件时的权限问题,需要将上传主目录下的文件权限设置为,这样用户就具有上传,操作,删除等权限 chmod  777 2:  当访问ftp时,出现以下提示.说明需要用户名和密码,这是在ft ...

  9. Linux系统——本地定制化yum仓库部署

    1)开启yum仓库配置文件 /etc/yum.conf的keepcache功能 (开启一个新的虚拟机) 将keepcache=0改为1,修改配置文件后重新清空缓存(1默认下载的安装包不删除,才可以实现 ...

  10. 【android】使用RecyclerView和CardView,实现知乎日报精致布局

    完整代码,请参考我的博客园客户端,git地址:http://git.oschina.net/yso/CNBlogs 在写博客园客户端的时候,突然想到,弄个知乎日报风格的简单清爽多好!不需要那么多繁杂的 ...