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);
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*****Location对象学习*********/
function testLocation(){
//http://127.0.0.1:8020/06JS/02JS%E4%B8%ADBOM%E5%AF%B9%E8%B1%A1%E5%AD%A6%E4%B9%A0.html
var href= window.location.href;
//http://127.0.0.1
var hostname=window.location.hostname;
//8020
var port=window.location.port;
//http://127.0.0.1:8020
var host=window.location.host;
// alert(href+"----"+hostname+"----"+port+"----"+host);
//修改当前的URL地址
// window.location.href="http://www.baidu.com";
//重新加载页面
window.location.reload();
}
function testHistory(){
//返回浏览器历史列表中的 URL 数量。
var len=window.history.length;
//alert(len);
//前进操作
// window.history.forward();
//后退操作
//window.history.back();
//控制前进和后退的网页 如果是正数代表前进 如果是负数代表后退 如果是0重新加载页面
window.history.go(0);
}
function testScreen(){
//获得当前屏幕的分辨率
var he=window.screen.height;
var wi=window.screen.width;
alert(he+"----"+wi);
}
function testNavigator(){
//返回由客户机发送服务器的 user-agent 头部的值。
var us= window.navigator.userAgent;
alert(us);
}
</script>
</head>
<body>
<p>
<input type="button" name="" id="" value="Location对象" onclick="testLocation()" />
</p>
<p>
<input type="button" name="" id="" value="History对象" onclick="testHistory()" />
</p>
<p>
<input type="button" name="" id="" value="Screen对象" onclick="testScreen()" />
</p>
<p>
<input type="button" name="" id="" value="Navigator对象" onclick="testNavigator()" />
</p>
</body>
</html>
效果：
4 DOM 中的节点类型
4.1 什么是 DOM2.DOM 节点分类 node
元素节点 element node <a href="链接地址">我的链接</a>
属性节点 attribute node href="链接地址"
文本节点 text node 链接地址 我的链接
4.2 DOM 节点关系
父子关系（parent-child）：<html> 元素作为父级，
<head> 和 <body> 元素作为子级
兄弟关系（Sibling）:<a> 和 <h1> 元素就是兄弟关系;<title> 和 <h1> 元素并不是兄弟关系
5 DOM 操作的内容
1.查询元素（进行操作元素、或者元素的属性、文本）
2.操作文本
3.操作属性
4.操作CSS样式（一个特殊的属性style）
5.操作元素
