Bom与Dom

Bom

如何去了解Bom与Dom呢，首先得了解Javascript的构成，JavaScript的组成：ECMAScript、BOM、DOM，其中ECMAScript为JavaScript的核心，但是如果要在浏览器中使用JavaScript，那么BOM才是JavaScript的核心。
什么是Bom呢？
BOM是Browser Object Model的缩写，简称浏览器对象模型。这个对象就是window
BOM提供了独立于内容而与浏览器窗口进行交互的对象
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
BOM最初是Netscape浏览器标准的一部分

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

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

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

window对象的常见方法：

alert(要显示的文本);      //弹出信息框
prompt(提示对话框信息);   //弹出输入框，点击确定，返回字符串，点击取消，返回null
confirm(提示文字);        //点击确定返回true，点击取消返回false

close();                //关闭浏览器（火狐不支持！），但都支持通过别的网页打开的新的网页关闭
                            //不允许关闭非脚本打开的页面

open(url,name,feature,replace);
    //url，可选，要在新窗口中显示的文档的URL
    //name，可选，声明了新窗口的名称
    //feature，replace自行扩展
    //谷歌会默认把系统自动打开的新网页阻止掉，但不阻止通过事件打开的网页

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，不使用缓存刷新。缓存？

3.navigator对象：
navigator.appName; //返回当前浏览器的名称
navigator.appVersion;//返回当前浏览器的版本号
navigator.platform; //返回当前计算机的操作系统
以上方法已经在逐渐被抛弃，出现一个新的属性替代这些属性：
navigator.userAgent; //返回浏览器信息

Dom

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

DOM中的选择器

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

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

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

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

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

ES5选择器：
document.querySelectorAll(); //强大到超乎想象，支持IE8+。ECMAScript借鉴了jQuery选择器的
//返回一个数组，哪怕只有一个元素
document.querySelector();
//返回单个元素

根据父级，选择子级：
oDiv.children; //返回一个数组
根据子级，选择父级：
oSpan.parentNode; //返回一个元素