JS之BOM、客户端检测和DOM

　　　这是第八章到第十二章的内容，粗略浏览过一遍.

一、BOM

　　浏览器对象模型。包括了window、location、navigator、screen和history对象。

　　　　window:核心对象

1、JS访问浏览器窗口的一个借口

2、全局作用域Global对象，所有在全局作用域中生命的变量，函数都会变成window对象的属性和方法。（全局变量不能通过delete删除，而window对象），如果页面中包含框架，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架名称来访问响应的window对象。

框架页面中通过top.frames[i]访问window对象。

　　窗口位置：

var topPos=(typeof window.screenTop==’number’)?window.screenTop:windw.screenY;

var leftPos=(typeof window.screenTop==’number’)?window.screenTop:windw.screenY;

　　打开窗口：

window.open()4个参数：需要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器

　　移动窗口：

moveTo(x,y)窗口移动到新的（x，y）坐标值，moveBy(x,y)在水平和垂直方向上移动的像素数

　　

间歇调用和超时调用

　　超时调用：var id=setTimeout(function(){},1000);

clearTimeout(id)超时调用函数返回一个数值id,可以通过它来取消超时调用计划

　　间歇调用：setInterval()

　　系统对话框：

　　alert（）

　　confirm（’Are u sure?’）

　　prompt()比confirm增加一个文本输入域，第二个参数可表示默认值，单击ok返回文本域的值，其他返回null

　　　　　　location对象 

保存着当前文档的信息，将URL解析为独立的片段（hash.host,href…）

　　1查询字符串参数

　　2位置操作：location.href=”http”//...”可以修改hash,search,hostname,pathname和port属性设置为新值来改变URL，这种方法会在浏览器历史记录中生成一条新记录，因此用户可以点击后退按钮导航到前一个页面，而replace（）方法无法返回

　　Location.reload（）重新加载,有可能从缓存中加载

　　Location.reload(true); 重新加载，从服务器

 　　　　Navigator对象

用于检测显示网页的浏览器类型，Plugins属性，安装插件信息的数组

　　　　Hittory对象

客户端检测　　

　　先设计最通用的方法然后再使用特定于浏览器的技术，增强该方案。

　 能力检测—>识别浏览器的能力à保证代码最优化

　　怪癖检测：识别浏览器的特殊行为

　　用户代理检测

DOM:

　　文件对象模型，针对HTML XML

　　1、节点层次

　　　　DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型。每种类型分别表示文档中不同的信息及标记。每个节点都有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点中间的关系构成了层次，而所有页面标记则标为一个以特定节点为根节点的树形结构。

　　节点关系：每个节点都有个childNodes属性，其中保存着一个NodeList对象。

　　

Node类型

操作节点 appendChild（）向chiedNodes列表末尾添加一个节点

　insertBefore()插入节点

　　　　replaceChild(a,b)a要替换成为a,b被替换的子节点

　　　　removeChild 移除子节点

　　　　复制: cloneNode(true)深复制false只复制本身

Document.anchors(所有带name的a元素

<a></a>)/forms(<forms></>)/images/links所有带href的a元素

文档写入

将输出流写入到玩各种 write() writeln() open() close()

DOM拓展

QuerySelector()返回第一个 querySelectorAll()所有

HTML5

1　　　getElementsByClassName()

　　add(value),

　　contains(val),

　　remove(val),

　　toggle(val)如果列表中已经存在给定的值删除它，如果无，添加它

自定义数据属性 <div id=’’,data-appid=’1234’></div> 添加data-前缀

标记属性：innerHTML/outerHTML

　　　　　　InsertAdjacentHTML() 两个参数，第一个是插入位置，第二个插入html文本

　　　　Para1 ：beforebegin 在当前元素之前插入一个紧邻的同辈元素

　　　　　afterbegin 在当前元素之下插入一个新的子元素或则在第一个子元素之前再插入一个新的子元素

　　　　　 beforeend 在当前元素之下插入一个新的子元素或在最后一个子元素之后插入新的子元素

　　　　　afterend在当前元素之后插入一个紧邻的同辈元素

scroolIntoView()通过滚动浏览器窗口或者某个容器元素，调用元素就可以出现在视口中

文档模式<meta>

       插入文本 innerText  div.innerText=’sdsd’;