1.BOM概念

什么是BOM？

BOM是Browser Object Model的缩写，简称浏览器对象模型。这个对象就是window

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

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C

BOM最初是Netscape浏览器标准的一部分

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

JavaScript的组成：ECMAScript、BOM、DOM，其中ECMAScript为JavaScript的核心，但是如果要在浏览器中使用JavaScript，那么BOM才是JavaScript的核心。

在什么地方就得遵循什么地方的规则。也就是说，无论ECMAScript有多权威，进了浏览器，就得遵守浏览器的规则。

2.window对象介绍，内置对象(location／history／navigator)及方法

什么是window对象，window对象是浏览器内置的一个对象，相当于BOM的一个抽象

window对象是js中全局对象的寄存地。

window对象的常见方法：

alert(要显示的文本); //弹出信息框

prompt(提示对话框信息); //弹出输入框，点击确定，返回字符串，点击取消，返回null

confirm(提示文字); //点击确定返回true，点击取消返回false

close(); //关闭浏览器(火狐不支持！)，但都支持通过别的网页打开的新的网页关闭

//不允许关闭非脚本打开的页面

open(url,name,feature,replace);

//open('http://www.baidu.com','_blank','width=300,height=300')

//谷歌会默认把系统自动打开的新网页阻止掉，但不阻止通过事件打开的网页

window对象下内置的子对象：

1.history对象：该对象包含浏览器访问过的url。

该对象的属性：

history.length;         //返回历史记录的数量

该对象的方法：

history.back(); //后退，加载前一个url。

history.forward(); //前进，需要后退一下之后，才有前进的方向

history.go(num); //参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新

2.location对象：包含当前url的相关信息，而history对象不能具体反映url的相关信息。

该对象的属性：

location.href; //设置或返回完整的url

location.search; //返回url?后面的查询部分

location.hash; //是一个可读写的字符串，是url的锚部分(从#开始的部分)哈希

该对象的方法：

location.reload(); //刷新页面的方法，一般情况下，传递一个true，不使用缓存刷新。缓存？

location.assign(url); //加载新页面，当url为空字符时，加载当前页面

3.navigator对象：浏览器信息

navigator.appName; //返回当前浏览器名

navigator.appCodeName; //返回当前浏览器的代码名

navigator.appVersion; //返回当前浏览器的版本号和平台

navigator.platform; //返回当前计算机的操作系统

以上方法已经在逐渐被抛弃，出现一个新的属性替代这些属性：

navigator.userAgent;    //返回浏览器信息

拓展：4.frames对象：包含当前页面所有的框架信息。

frames.length; //返回当前页面的框架数量

frames[0].location; //修改第一个框架的地址

5.screen对象：包含当前显示屏信息

screen.width/height //屏幕总宽高度

screen.availWidth/availHeight //屏幕的宽高(不包括任务栏)

3.定时器

延时器：

setTimeout(function(){

console.log(1); //1000毫秒后，打印1

},100)

语法：setTimeout(函数或者代码串，指定的时间(毫秒));

在指定的毫秒数后只执行一次函数或代码。

清除延迟器：clearTimeout();

定时器：

setInterval(function(){

console.log(1); //每隔1000毫秒，打印一次1

},100)

语法：setInterval(函数或者代码串，指定的时间(毫秒));

按照指定的周期(毫秒)不断的执行函数或者是代码串。

表示每隔指定的时间，执行一次函数

清除定时器：clearInterval();

注意思考：为什么要清除计时器或延时器呢？

防止计时器越跑越快，清除计时器

功能：一定时间后调用

参数：两个参数，一个函数，一个毫秒

返回值：数字，当前定时器的唯一编号，用于关闭定时器

window.onload / onscroll／onresize 事件

onload当文档加载完成后执行一些操作

window.onload = function(){

console.log("页面加载完成")

}

onscroll当页面发生滚动时执行一些操作

window.onload = function(){

console.log(1) //当页面发生滚动时，打印1

}

onresize当窗口大小发生改变时执行一些操作

window.onresize = function(){

console.log(1) //当窗口大小发生改变时，打印1

}

页面滚动条距离顶部的距离

document.documentElement.scrollTop

页面滚动条距离左边的距离

document.documentElement.scrollLeft

1.DOM的概念和作用

DOM是document Object Model的缩写，简称文档对象模型。他给文档提供了一种结构化的表示方式，可以改变文档的内容和呈现方式，我们最关心的是，DOM把网页和脚本以及其他的编程语言联系了起来

所谓的DOM是以家族的形式描述HTML。父子节点，兄弟节点

JS用来做行为的，如何产生行为，当发生改变的时候，就产生了行为

改变元素的内容(innerHTML)，属性(value)，样式(width,height,background)

改变之前，至少应该先选择到要改变的元素

DOM中的选择器

1.getElementById(id)        //获取指定元素的ID元素

2.getElementsByTagName()    //获取相同元素的节点列表，通过标签名选择元素，返回值是一个数组

3.getElementsByName()       //通过name值获取元素，返回值是数组，通常用来获取有name的input的值

4.getElementsByClassName()  //通过class名获取元素，返回值是数组n

注意：1.不是所有标签都有name值；2.在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性

ES5选择器：

document.querySelectorAll();    //强大到超乎想象，支持IE8 。ECMAScript借鉴了jQuery选择器的

//返回一个数组，哪怕只有一个元素

document.querySelector();

//返回单个元素

根据父级，选择子级：

oDiv.children;        //返回一个数组

根据子级，选择父级：

oSpan.parentNode;     //返回一个元素

2.DOM属性的基本操作(增／删／改／查)

改变元素的内容(innerHTML)，属性(value)，样式(width,height,background)

也就是对DOM进行增删改查

DOM的属性操作，增删改查

什么是元素的属性？class就是元素的属性，写在元素内的所有东西都是元素的属性，比如link的href，img的src等

元素的属性是什么，分为两种，一种叫内置属性，一种叫非内置属性。

内置属性可以直接通过点"."进行操作

tagName               //返回值是当前元素的标签名

innerHTML／innerText  //返回值是当前元素的内容

id                    //返回值是当前元素的ID

title                 //获取title的标签值，这个title是从document中获取的

className             //返回值是当前元素的class

href                  //返回值是当前的href的值

以上这些属性既可以获取，也可以设置

非内置属性需要通过一些节点的方法进行操作，注意：节点的方法，前缀一定是节点

getAttribute()        //获取 元素的属性

setAttribute()        //设置／修改 元素的属性，低版本的IE不兼容;接收两个参数，属性名和属性值

removeAttribute()     //删除 元素的属性，低版本的IE不兼容

3.节点

根据DOM规定，HTML文档中的每个成分都是一个节点。

DOM是这样规定的：

整个文档是一个文档节点

每个HTML标签是一个元素节点

包含在HTML元素中的文本是文本节点

每一个HTML属性是一个属性节点

注释属于注释节点

相当于HTML文档中的所有内容都是节点，元素是节点的别称，节点包含元素，当然节点还有好多细化的种类

如何获取DOM节点：

对象.parentNode    //获得父元素节点

对象.children      //获得子元素节点的集合，不包含空白节点

//但IE7包含首个注释节点(前面没有元素节点)，IE8包含所有注释节点

对象.childNodes    //获得所有子节点的集合，包括空白节点

//IE7/8不包含空文本节点，但IE7包含首个注释节点(前面没有元素节点)，IE8包含所有注释节点

如何获取属性节点：

对象.attributes   //获得所有属性节点，返回一个数组

4.childNodes／过滤空白节点

通过 对象.childNodes 获得所有子节点的集合

节点属性 nodeType 返回值为数值

节点类型(nodeType)    　　节点名字(nodeName)    　　节点值(nodeValue)

元素节点        　　　　 1                  　　　　　　标签名                　　　　 null

文本节点        　　　　 3                  　　　　　　#text                　　　　 文本

注释节点        　　　　 8                　　　　　　 #comment             　　注释的文字

文档节点         　　　　9                 　　　　　　#document              　　　null

属性节点         　　　　2                  　　　　　　属性名               　　　　 属性值

通过遍历所有子节点，将空白节点过滤掉，得出所有的元素节点

5.高级选取firstChild／lastChild／parentNode／previousSibling／nextSibling

高级选取，(根据某一个节点位置找到它的父子，兄弟节点)

父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟)。

对象.childNodes              //获取当前元素节点的所有子节点

对象.ownerDocument           //获取该节点的文档根节点，相当与 document

对象.firstChild              //获得第一个子节点。(IE7/8非空白节点，可能是注释节点)

对象.firstElementChild       //获得第一个非空白的子节点。(IE7/8不支持)

对象.lastChild               //获得最后一个子节点(IE7最后一个元素节点，IE8最后一个非空白节点，可能是注释节点)

对象.lastElementChild        //获得最后一个非空白的子节点。(IE7/8不支持)

对象.nextSibling             //获得下一个兄弟节点。(包含空白节点和注释，IE7/8包括注释节点，不包括空白节点)

对象.nextElementSibling      //获得下个兄弟节点。(IE7/8不支持)

对象.previousSibling         //获得上一个兄弟节点。(包含空白节点和注释。IE7/8包括注释节点，不包括空白节点)

对象.prveiousElementSibling  //获得上一个兄弟节点。(IE7/8不支持)

缺点：兼容性不好

6.DOM元素的基本操作(增／删／改／查)

查询：选择器；

创建：createElement()  配合  appendChild()    将创建好的元素，插入到某个标签内的最后

删除：removeChild()  配合  parentNode

元素.remove()    直接删除当前元素

document.body.removeChild(div)；

修改: outerHTML

oh1.outerHTML = "

"   oh1.innerHTML  "

"

补充：创建文本节点createTextNode(“hello”)

使用方式同createElement()

获取非行内样式(兼容问题)

function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值

if(obj.currentStyle){ //针对ie获取非行间样式

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr]; //针对非ie

};

};

7.offsetWidth／offsetHeight／offsetLeft／offsetTop

offsetParent：获取元素的最近的具有定位属性(absolute或者relative)的父级元素。如果都没有则返回body

offsetLeft：获取元素相对具有定位属性的父级元素的左侧偏移距离

offsetTop：获取元素相对就有定位属性的父级元素的顶部偏移距离

scrollLeft/scrollTop：滚动条最顶端和窗口中可见内容的最顶端之间的距离

clientWidth/clientHeight：元素视窗宽度/高度

offsetWidth/offsetHeight：元素实际宽度/高度

有关浏览器及元素各项尺寸的图示:

来源：https://www.icode9.com/content-1-461851.html