JS学习笔记Day9

一、BOM

　　（一）概念：是 Browser object model 的缩写，简称浏览器对象模型。

　　　　BOM 提供了独立于内容而与浏览器窗口进行交互的对象

　　　　由于 BOM 主要用于管理窗口与窗口之间的通讯，因此其核心对象是 window

　　（二）Window窗口对象

　　

　　　　1.Window 对象是 BOM 的顶层（核心）对象，所有对象都是通过它延伸出来的，也可以称为 window 的子对象，由于window 是顶层对象，因此调用它的子对象时可以不显示的指明 window 对象。

　　（三）Window 内置对象（location/history/navigator）及方法

　　　　1. Location 对象

　　　　　　1）Location 对象包含有关当前 URL (统一资源定位器)的信息，是 window 对象的一个部分，可通过 window.location 属性来访问

　　　　　　2）href 属性：是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL，因此，我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容

　　　　　　语法：location.href = URL；

　　　　　　　　　Demo:location.href = http://www.baidu.com;

　　　　　　3）Reload()用于重新加载当前文档（刷新）

　　　　　　语法：location.reload();

　　　　　　　　　Location.reload(true):刷新页面，不使用缓存

　　　　2.History 对象

　　　　　　1）History.back():载入历史列表中前一个网址，相当于按下“后退”按钮

　　　　　　2）History.forward():载入历史列表中后一个网址（如果有的话），相当于按下“前进”按钮

　　　　　　3）History.go():打开历史列表中一个网址

　　　　　　　　注：要使用这个方法，必须在括号内指定一个正数或负数

　　　　3.Navigator 对象

　　　　　　1）appName:浏览器名称

　　　　　　2）appVersion:浏览器版本

　　　　　　3）platform:操作系统注：最新的浏览器已经全面放弃以上这些属性

　　　　　　4）userAgent:用户代理信息，通过该属性可以获取浏览器及操作系统信息

　　　　4.Window下的方法

　　　　　　1）alert（）；警告框

　　　　　　2）confirm（）；选择框

　　　　　　3）prompt（）；提示输入框

　　　　　　4）open（）；打开新窗口

　　　　　　5）close（）；关闭当前窗口

二、onload 事件

三、定时器

　　(一) SetInterval():(间歇式)计时器：按照指定的周期（以毫秒计）来调用函数或计算表达式

　　(二) clearInterval():可取消由 setInterval()设置计时

　　(三) setTimeout()(超时)定时器：用于在指定的毫秒数后调用函数或计算表达式

　　(四) clearTimeout():可取消由 setTimeout()方法设置的定时

　　(五) demo:1. 页面换背景

四、Window.onscroll 事件

　　(一) Document.documentElement.scrollTop 代表垂直的滚动条，向下滚动的距离

　　(二) Document.body.scrollTop//chrome 代表垂直的滚动条，向下滚动的距离

　　(三) Document.documentElement.scrollLeft

　　(四) Document.body.scrollLeft

　　(五) 兼容写法：

　　　　1. document.documentElement.scrollTop || document.body.scrollTop

　　　　2. document.documentElement.scrollLeft || document.body.scrollLeft

四、DOM

　　（一） 概念：DOM 即（Document Object Model）文档对象模型

　　（二） 作用：通过 JavaScript 操作 DOM，可以重构整个 HTML 文档、添加、移除、改变或重排页面上的项目

　　（三）DOM 的基本操作（查询、修改、创建、删除）

　　　　查询

　　　　1. getElementById():获取特定 ID 元素的节点。如果找到相应的元素则返回该元素的节点对象，如果不存在，则返回 null

　　　　2. getElementsByTagName():获取相同元素的节点列表（对象伪数组）

　　　　3. getElementsByName():获取相同名称的节点列表

　　　　4. getElementsByClassName():获取相同 class 属性的节点列表(IE9 以下不兼容)

　　　　　　function byClassName(obj,className){

　　　　　　　　if(obj.getElementsByClassName){

　　　　　　　　　　return obj.getElementsByClassName(className);

　　　　　　　　}else{

　　　　　　　　　　var arr = [];

　　　　　　　　　　var eles = obj.getElementsByTagName('*');

　　　　　　　　　　for(var i = 0,len = eles.length;i < len;i ++){

　　　　　　　　　　　　if(eles[i].className === className){

　　　　　　　　　　　　　　arr.push(eles[i]);

　　　　　　　　　　　　}

　　　　　　　　　　}

　　　　　　　　　　return arr;

　　　　　　　　}

　　　　　　}

　　　　5. document.documentElement:获取 html 的方法

　　　　6. document.body:获取 body 的方法

　　　　7. querySelector : 通过选择器获取一个元素（IE7 及以下不兼容）,返回一个对象

　　　　8. querySelectorAll : 通过选择器获取一组元素（IE7 及以下不兼容），返回一个集合

　　　　创建

　　　　1. createElement():创建一个元素节点

　　　　2. createTextNode():创建一个文本节点

　　　　3. 扩展：document.createDocumentFragment()创建文档碎片

　　　　修改

　　　　1. 父节点.replaceChild(newNode, oldNode) 方法用新节点替换某个子节点

　　　　 删除

　　　　1. 父节点.removeChild(nodeChild):删除节点

　　　　2.指定的节点.remove（node）

　　　　扩展：追加节点

　　　　1. appendChild():向指定节点的子节点列表末尾追加新的节点

　　（四）DOM 元素类型（元素和文本）

　　　　1.node 节点属性

　　　　节点可以分为元素（标签）节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为:nodeName、nodeType 和 nodeValue.

　　　　2.节点类型：元素 1 属性 2 文本 3

               

　　　　扩展：克隆节点

　　　　document.body.appendChild(oDiv.cloneNode(true));

　　　　如果不加参数只克隆 父节点，不克隆子节点；如果加true参数，则克隆整个节点包含子节点

　　　　扩展：获取属性节点