JS中的BOM和DOM的介绍与使用

1 BOM 和 DOM 对象

1.1 什么是BOM

BOM是Browser Object Model的简写，即浏览器对象模型。

BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法

BOM没有统一的标准(每种客户端都可以自定标准)。

BOM的顶层是window对象

1.2 什么是DOM

DOM是Document Object Model的简写，即文档对象模型。

DOM用于XHTML、XML文档的应用程序接口(API)。

DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。

DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。

DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。

DOM的顶层是document对象蓝色框内是归DOM管的，红色框内归BOM管的；也可以说DOM也是归BOM管的

BOM 是为了操作浏览器出现的 API，window 是其根对象。

DOM 是为了操作文档出现的 API，document 是其根对象。

2 BOM 对象-window

2.1 三种弹框的方式：

//只含有确定的按钮

window.alert("今天星期一， 马上周五了， 我好开心呢");

//含有确定按钮和取消按钮的弹框

var flag= window.confirm("确实很开心");

//如果返回的是true代表点击的是确定 ， 如果返回是false代表点击的取消

//含有输入内容的弹框 前部分代表的是提示的信息， 后面是输入内容的默认值

var val= window.prompt("请输入昵称：","例如：李白");

//取消 返回 null

2.2 定时器的应用

//2S后调用方法 执行一次

var time1=window.setTimeout("test04()",2000);

//每间隔2s就会执行方法 执行了多次

window.setInterval("test04()",2000);

2.3 清除计时器的操作

//清除计时器的操作 其中的名称就是清除计时器的名称

window.clearInterval(time);

window.clearTimeout(time1);

2.4 关闭和打开浏览器

//打开指定的页面

window.open("http://www.baidu.com");

//关闭浏览器窗口。

window.close();

3 Window 中对象学习

3.1 Location：对象

var href= window.location.href;

//获得端口号 8020

var port=window.location.port;

//主机名称

var hostname=window.location.hostname;

//主机加端口号

var host=window.location.host;

//修改当前的URL地址

window.location.href="http://www.taobao.com";

//刷新网页

window.location.reload();

3.2 History 对象：

/返回历史记录的数量

var len= window.history.length;

//后退按钮

window.history.back();

//前进按钮window.history.forward();

//如果是正数标识前进指定的页面如果是负数标识后退指定的页面

window.history.go(-1);

3.3 Screen：对象：

//获得当前屏幕的分辨率

var he = window.screen.height;

var wi = window.screen.width;

3.4 Navigator 对象：

//返回由客户机发送服务器的 user-agent 头部的值。

console.log(window.navigator.userAgent);

代码：

效果：

4 DOM 中的节点类型

4.1 什么是 DOM2.DOM 节点分类 node

元素节点 element node <a href="链接地址">我的链接a>

属性节点 attribute node href="链接地址"

文本节点 text node 链接地址 我的链接

4.2 DOM 节点关系

父子关系（parent-child）： 元素作为父级，

和 元素作为子级

兄弟关系（Sibling）: 和

元素就是兄弟关系;