《JavaScript高级语言设计》(第三版)学习笔记(4)

BOM对象和DOM对象

BOM

window对象

BOM的核心对象是window，他表示浏览器的一个实例
他即使通过js访问浏览器的一个窗口又是ESCMAScript规定的Global对象语句添加的window
全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以
使用var语句添加的window属性有一个名为[[Configurable]]的特性，这个特性值被设置为false

窗口及框架关系

如果页面中包含框架，则每个框架都有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引，从0开始，从左到右，从上到下，或者框架名称来访问相对应的window对象。每个window对象都有name属性，其中包含框架的名称
top：始终指向最外层的框架，使用它可以确保正确的访问另一个框架
parent：始终指向当前框架的直接上层框架
self:始终指向window
注意:在使用框架的情况下，浏览器会存在多个Global对象。在每个框架中定义的全局变量会自动生成为框架中window对象的属性。由于window对象都包含原生类型的构造函数，因此每个框架都会有一套自己的构造函数，这些构造函数一一对应，但并不相等

窗口位置

属性名	含义	版本支持
screenLeft	表示窗口相对于屏幕左边位置	IE、Safari、Opera 和Chrome
screeTop	表示相对于屏幕上边位置	IE、Safari、Opera 和Chrome
screeX	窗口距离屏幕左边位置	Firefox，Safri，Chrome，Opera
screeY	窗口距离屏幕上边的位置	Firefox，Safri，Chrome，Opera

注意虽然opera都实现了属性但属性并不对应

//通用代码
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

注意：无法再夸浏览器的条件下后去窗口左边和上边的精确坐标值
在IE Opera中sreenLeft和screenTop中保存的是屏幕左边和上边到window对象表示的页面可视区域的距离
在Chrome Firefox 和Safari中，screenY和screenTop中保存的是整个浏览器窗口相对于坐标的值
问题：Firefox Safari Chrome 始终返回页面中每个框架的top.screenX和top.screenY的值，即使页面发生偏移，而IE和Opera则返回精确值
使用moveTo和moveBy可能将窗口精确的移动到一个新的位置。接受两个参数moveTo接受新位置的x和y值而moveby接受移动像素数
在Opera和IE7+中禁用，此方法不使用框架只对最外层的window对象使用

窗口大小

//兼容模式下获得可窗口大小
var pageWidth = window.innerWidth,
    pageHeigt = window.innerHeight;

if (typeof pageWidth != "number"){
    if(document.cpmpatMode == "CSS1Compat"){
        pageWidth = document.docuemntElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

方法名	含义
resizeTo()	调整窗口大小
resizeBy()	调整窗口大小

Opera和IE7+中禁用

导航和打开窗口

方法名	含义	版本支持
window.open()	导航到一个特定的URl,也可以打开一个新的浏览器窗口，接受参数1.要加载的URL,2.窗口目标,3.一个特性字符串(下图是可选择的字符串,可多选一’,’分隔),4.一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值.返回打开窗口的对象
窗口对象.close()	关闭窗口对象
closed属性	表示窗口是否关闭
opener属性	表示打开窗口的原始窗口

间接调用和超时调用

方法名	含义	版本支持
setTimeout(function(){},number)	function:执行的js代码,number:然后执行的毫秒数.第一个参数可为字符串,第二个参数会告诉js在过多长时间把当前任务添加到队列中,如果队列为空,添加的代码会立即执行,队列不为空,等待前面的代码执行完后执行.返回超时调用ID,表示执行计划代码的唯一标识
clearTimeout(超时ID)	取消任务
setInterval(function(){},number)	与setTimeout类似，但此表示间歇调用，循环每number毫秒执行一次function代码,返回间歇调用ID
clearInterval(间歇调用ID)	取消任务

系统对话框

方法名	含义
alert()	通常生成警告
confirm()	会生成带ok和cancel按钮的提示框，当点击ok时返回true，点击cancel返回false
prompt()	带输入文本的提示框，返回输入文本
window.print()	显示打印对话框
window.find()	显示打印对话框

location对象

提供与当前窗口中加载的文档相关的信息，还提供导航功能
即是window对象的属性也是document对象的属性

//解析URl，将查询变为对象数组
function getQueryStringArgs(){
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    args = {},
    items = qs.length ? qs.split("&") : [],
    item = null,
    name = null,
    value = null,
    i = 0,
    len = items.length;
    for(i = 0; i < len; i++){
        item = items[i].split("=");
        name = decodeURLComponent(item[0]);
        value = decodeURLComponent(item[1]);
        if(name.length){
            args[name] = value;
        }
    }
    return args;
}

方法	含义
location.assign(“URL地址”)	立即打开URl并在浏览器的历史记录中生成一条记录，如果将location.href或window.location赋值一个URL值,也会调用assign方法
location.replace(“URL地址”)	位置改变但不会生成历史记录
reload()	重新加载当前显示页面，如果上次页面请求未改变则从缓存中读取，可传入true强制从服务器取数据

navigator

识别客户端的事实标准

检测插件

//检测所有浏览器中的Flash
function hasFlash(){
    var result = hasPlugin("Flash");
    if(!result){
        result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
    }
    return result; 
}

//检测所有浏览器中的QuickTime
function hasQuickTime(){
    var result = hasPlugin("QuickTime");
    if(!result){
        result = hasIEPlugin("QuickTime.QuickTime");
    }
    return result; 
}
function hasIePlugin(name){
    try{
        new ActiveXObject(name);
        return true;
    }catch(e){
    return false;
    }
}
function hasPlugin(name){
    name = name.toLowerCase();
    for(var i = 0; i< navigator.plugins.length; i++){
        if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
            return true;
        }
    }
}

screen

用处不大

history

保存着用户上网的浏览记录
history是window的属性
|方法|含义|
|go()|history.go(-1)后退一页，history.go(1)前进一页，history.go(2)前进两页，history.go(“XXX.com”)跳转至最近的XXX.com页面|
|back()|后退|
|forward()|前进|
|length属性|保存历史记录的数量|

DOM

DOM将HTML或XML描述成一个由多层节点构成的结构，节点分为几种不同的类型，每种类型分别表示文档中不同的信息以及标记

Node类型

DOM1定义了Node接口，该接口有所有节点实现

属性或方法	含义
nodeType属性	表示节点类型

if(someNode.nodeType == 1){
alert("Node is an element.")
}|
|nodeName和nodeValue|如果节点为元素则nodeName为元素的标签名，nodeValue为null|
|childrenNodes属性|其中保存着一个NodeList对象，保存是一个类数组对象，保存一组有序的节点，该对象基于html文本变化|
|parentNode属性|指向文档树中的父节点|
|previousSibling|同级上个节点|
|nextSibling|同级下个节点|
|firstChildren|第一个子节点|
|lastChildren|最后一个子节点|
|ownerDocument|代表整个文档的文档节点|
|appendChildren()|向childrenNodes列表的末尾添加一个节点，返回新增的节点|
|insertBefore()|接受两个参数，要插入的节点和作为参照的节点|
|replaceChild()|接受两个参数，要插入的节点和要替换的节点|
|cloneNode()|创建调用这个方法的节点的一个完全相同的副本，接受一个布尔参数，表示是否执行深度复制|

Document类型

表示文档，在浏览器中document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面

属性或方法	含义
nodeType	值为9
nodeName	“#document”
nodeValue	null
parentNode	null
ownerDocument	null
documentElement	始终指向元素
childNodes	子节点列表,第一个为元素
document对象的body属性	直接指向元素
doctype	引用
title	浏览器窗口的标签栏或标签页上的标题
URL	页面完整URL,地址栏上显示,不可设置
domain	页面域名,可设置,通过设置domain值页面之间可以互相访问js对象,赋值后不可设置会原值
referrer	链接到当前页面的那个页面的URL,不可设置
getElementById()	根据元素的ID获得对应元素,IE8较低版本不区分大小写,只返回第一次出现的元素，在IE8以及较低版本中name特征与给定ID匹配的表单元素input，textarea，button，select也会返回
getElementByTagName()	根据标签名返回对应元素,返回NodeList
getNameByName()	返回给定name特性的所有元素
anchors	包含文档中所有name特性的元素
applets	包含文档中所有的元素
forms	包含文档中所有的元素
images	包含文档中所有的元素
links	包含文档中所有带href特性的元素
文档写入
write()	接受字符串,原样写入
writeln()	在字符串的尾部添加换行，字符串转义
open()
close()

Element

表现XML和HTML

属性或方法	含义
nodeType	1
nodeName，tagName	元素的标签名
nodeValue	null
parentNode	Document或Element
attributes	包含一个NamedNodeMap,getNamedItem(name):返回nodeName属性等于name的节点;removeNamedItem(name):从列表中移除nodeName属性等于name的节点;setNamedItem(node)：向列表中添加节点，已节点的nodename属性为索引；item(pos)返回位于数字pos位置处的节点

HTMLElement

继承Element添加属性

属性	含义
id	元素在文档中的唯一标识
title	元素的附加说明
lang	元素内容的代码语言
dir	语言方向
className	与class特性对应
getAttribute(“name”)	获得元素特性，返回字符串
setAttribute()	自定义元素加data-前缀，接受两个参数,1.要设置的特性名,2.值
removeAttribute()	移除特性根据名称

HTML元素都是HTMLElement的具体子类表示的

创建元素

document.createElement(“元素标签名或完整元素标签”);返回元素对象

Text

包含可以照字面解释的纯文本内容

属性或方法	含义
nodeType	3
nodeName	“#text”
nodeValue	节点所包含的文本
parentNode	一个Element
appendData(text)	将text添加到节点的末尾
deleteData(offset,count)	从offset指定位置开始删除count个字符
insertData(offset,text)	从offset指定位置插入text
replcaeData(offset,count,text)	用text替换从offset指定的位置到offset+count处的文本
splitText(offset)	从offset指定的位置将当前恩本的节点分为两个文本节点
substrigData(offset,count)	提取offset指定的位置到offset+count为止处的字符串
length属性	文本长度

document.createTextNode(“字符串”)；根据字符串创建text对象
元素对象.normalize()合并该元素下的文本节点
元素对象.splitText(number)按number为止分割文本节点

Comment

注释

属性名	含义
nodeType	8
nodeName	“#comment”
nodeValue	注释内容

与text继承相同的基类

CDATASection

只针对XMl文档表示CDATA区

属性	含义
nodeType	4
nodeName	“#cdata-section”
nodeValue	CDATA区的内容

DocumentType

包含doctype信息保存在document.doctype对象中

属性	含义
node	10
nodeName	doctype的名称
nodeValue	null
parentNode	Document
name	文档类型名称
entities	文档类型藐视的实体NamedNodeMap对象
notations	是由文档类型描述的符号的NamedNodeMap对象

DocumentFragment

DOM规定文档片段是一种轻量级的文档，可包含控制节点

属性或方法	含义
nodeType	11
nodeName	“#document-fragment”
nodeValue	null
parentNode	null

document.createDocumentFragment();
临时文档片段，可以将需添加的元素先添加到该对象中，然后将该对象添加给document，直接添加给docuemt，降低性能。

Attr

表示元素的特性

属性名	含义
nodeType	2
nodeName	特性名称
nodeValue	特性值
name	特性名称
value	特性值
specified	区别特性实在代码中指定还是默认

document.createAttribute()
element.setAttributeNode(attr)

DOM操作

动态脚本

使用DOM创建script元素添加到document中

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";
//当不引用外部文档时
script.appendChild(cocument.createTextNode("function sayHi(){alert('hi')}"));//ie中出错
script.text = "function sayHi(){alert('hi')}";
doucment.body.appendChild(script);

动态样式

var style = document.createElement("style");
style.style = "text/css";
try{
    style.appendChildren(document.createTextNode("body{background-color:red}"));
}catch(e){
    style.styleSheet.cssText = "body{background-color:red}";
}
var head = document.getElementByTagName("head")[0];
head.appednChildren(style);

操作表格

var table = document.createElement("table");
table.border = 1;
table.width = "100%";
var tbody = document.createElement("tbody");
table.appendChildren(tbody);
var row1 = document.createElement("tr");
tbody.appendChildren(row1);
var cell_1 = document.createElement("td");
cell_1.appendCHildren(document.createTextNode("Cell 1,1"));
row1.appednChildren(cell_1);

table元素属性和方法

属性或方法	含义
caption	保存对元素的指针
tBodies	是元素的HTMLCollection
tFoot	保存对元素的指针
tHead	保存对元素的指针
rows	表格所有行的HTMLCollection
createThead()	创建thread元素，将其放到表格中，返回引用
createTFoot()	创建tfoot元素，将其放入表格，返回引用
createCaption()	创建caption元素，将其放入表格返回引用
deleteTHead()	删除thead
deleteCaption()	删除caption元素
deleteTFoot()	删除tfoot
deleteRow(pos)	删除指定行
insertRow(pos)	向指定行插入一行

tbody属性和方法

属性和方法	含义
rows	保存tbody元素中的HTMLCollection
deleteRow(pos)	删除指定行
insertRow(pos)	向rows集合中的指定位置插入一行，返回插入行的引用

tr属性和方法

属性和方法	含义
cells	保存tr元素中单元格的HTMLCollection
deleteCell(pos)	删除指定单元格
insertCell(pos)	项cells集合指定位置插入单元格

//客户端检测，DOM一致性检测