JavaScript DOM&BOM

1.DOM含义

D: Document 文档一份文档就是一棵节点树，每个节点都是一个对象
O:Object 对象
JavaScript语言里对象可以分为三种类型：
（1）用户定义的对象(user-defined object) 有程序员自己创建的对象
（2）内建对象(native object) 内建在JavaScript语言里的对象，如Array、Math、Date等
（3）宿主对象(host object) 由浏览器提供的对象，如 window对象
M: 模型，文档的表现形式。
2.DOM操作节点方法

（1）getElementById（id）

这个方法返回一个对象，这个对象对应着document对象里一个独一无二的元素。

（2）getElementsByTagName(tag);

getElementsByTagName方法会返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。参数tag就是文档的标签，比如body、ul、ui等标签。

（3）getElementsByClassName(class);

HTML5 DOM中新增的一个方法。这个方法能够通过class属性来访问元素。该方法返回的也是数组。

如果你想输入多个className可以用空格隔开。

（5）childNodes获取节点下的所有类型的子元素，该属性返回一个数组

文档里的节点不止元素节点、文本节点，属性节点三个类型的节点。文档里几乎每一样东西都是一个节点。甚至连空格和换行都会被解释为节点，而他们也会全部包含在childNodes属性返回的数组当中。
上面我们通过getElementsByTagName(““)也可以获取某个节点下子元素, 注意getElementsByTagName(““)返回的不仅仅是直接子节点，如果子节点包含了节点，也会计算在内的。
虽然childNodes返回所有类型的节点，我们可以通过nodeType获取节点的类型，但是该属性只返回整形。

（6）nodeType 节点的类型
元素节点的nodeType属性值是1.
属性节点的nodeType属性值是2.
文本节点的nodeType属性值是3.
也就这是三个节点有使用价值。

（7）nodeValue 属性返回文本节点的值。
比如要获取<p id="xxx">我是标签p里的值</p>里面的文本的值，其实这里包含了两个节点，一个元素节点p和里面的文本节点，可以通过下面方式获取里面的文本：

document.getElementById("xxx").childNodes[0].nodeValue; //document.getElementById("xxx").firstNode.nodeValue;
nodeValue除了可以获取文本节点的值，还可以修改文本节点的值，如：
p1.firstChild.nodeValue = "通过nodeValue设置新的值"

（8）firstChild 和 lastChild 获取节点数组中首尾节点
var e = document.getElementById(“xxx”);
e.firstChild 相当于 e.childNodes[0]
e.lastChild 相当于 e.childNodes[e.childNodes.length-1]

BOM操作的常用属性和方法

open()：打开一个新的页面，格式为open(页面的url,打开的方式)，如果url为空则打开一个空白页面。如果打开方式为空，默认为新窗口方式打开。这个方法返回新窗口的window对象。

close()：关闭一个页面，但是这个方法有点兼容性问题，firefox默认无法关闭，chrome默认直接关闭，ie：询问用户。

navigator.userAgent：返回浏览器的名称和版本。

location：浏览器地址信息，本身不是字符串，是object格式。

location：就是url地址本身。

location.search：url中?后面的内容。

location.hash：url中#后面的内容。

窗口尺寸与大小
可视区的尺寸：document.documentElement.clientWidth和document.documentElement.clientHeight。

滚动条滚动的距离：document.documentElement.scrollTop和document.documentElement.scrollLeft。在chrome浏览器中要使用document.body.scrollTop和document.body.scrollLeft。

元素内容的宽高：div.scrollHeight和div.scrollWidth。

文档的宽高：document.documentElement.offsetHeight和document.documentElement.offsetWidth。也可以使用document.body.offsetHeight和document.body.offsetWidth。

事件
onscroll：当滚动条滚动的时候触发。

onresize：当浏览器尺寸改变的时候触发。

onfocus：当元素获取焦点时触发。

onblur：当元素失去焦点时触发。

focus()：给元素设置焦点。

blur()：让元素失去焦点。

select()：选择指定元素里面的文本内容。只能选择用户可以输入的内容。

onmousemove：鼠标在一个元素上移动时触发。

onkeydown：当键盘按键按下的时候触发。能够响应用户输入的元素才支持键盘事件，和焦点事件一样。如果按下不抬起来会连续触发。

onkeyup：当键盘按键抬起时触发。

oncontextmenu：当右键菜单显示出来时触发。

event事件对象：当一个事件发生时，这个对象发生的这个事件有关的一些详细的信息都会临时保存到event对象中，以便在需要时使用。