js基础运用 day 6 ——BOM--浏览器对象模型、DOM--文档对象模型
原创
©著作权归作者所有：来自51CTO博客作者wx639ab1ba8473b的原创作品，请联系作者获取转载授权，否则将追究法律责任
BOM:把浏览器窗口封装成对象模型，供js进行访问。最重要的一个对象是:window
<!DOCTYPE html>
<html>
<head>
<title>BOM--浏览器对象模型</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function resizeWindow(){
window.resizeTo(500, 300)
}
</script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<pre>
BOM:把浏览器窗口封装成对象模型，供js进行访问。最重要的一个对象是:window
</pre>
<h3>window中的属性演示</h3>
<script type="text/javascript">
function fun1(){
window.status = "湖南城市学院......"
//window.pageXOffset="200px"; //IE不支持
//window.dialogHeight="200"; //deprecated
alert("aa");
//window.resizeTo(500,400);
//window.resizeBy(-100,-100);
}
function aa(){
//alert("Aaaa");
alert(window.innerHeight);
}
</script>
<input type="button" value="window对象中的status属性演示" onclick="fun1();">
<br/>
<input type="button" onclick="aa();" value="文档窗口高度">
<br/>
<a href="aa.html">前进</a>
<hr/><input type="button" onclick="locationDemo();" value="window中的location对象属性">
<script type="text/javascript">
function locationDemo(){
//alert( window.location.href);
alert(window.location.hostname);
//通过window.location.href属性实现页面跳转
window.location.href = "http://www.baidu.com";
}
</script>
<br/>
<input type="button" onclick="navigatorDemo();" value="window中的Navigator对象属性"> <br/>
<script type="text/javascript">
function navigatorDemo(){
alert( window.navigator.appName);
alert( window.navigator.appVersion);
}
</script>
</body>
</html>
两种定时器：
一次性定时器：setTimeout(),clearTimeout()
周期性定时器；setInterval(),clearInterval()
<!DOCTYPE html>
<html>
<head>
<title>BOM--浏览器对象模型</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<h3>window中的方法演示</h3>
<script type="text/javascript">
function fun1(){
window.close();//关闭窗口
}
function fun2(){
var boo = window.confirm("是否真的要做某事?");//消息确认
if (boo) {
alert("做某事....");
}
else {
alert("不做某事....");
}
}
function fun3(){
window.moveBy(10, 10);//经测试，当前浏览器，不支持
}
</script>
<input type="button" value="window对象中的close()方法演示" onclick="fun1();">
<br/>
<input type="button" value="window对象中的confirm()方法演示" onclick="fun2();">
<br/>
<input type="button" value="window对象中的moveBy()方法演示" onclick="fun3();">
<br/>
<br/>
<br/>
<!--///以下演示定时器// -->
<!--这个定时器是一次性的，setTimeout(),clearTimeout()-->
<input type="button" value="启动定时器1" onclick="start1();">
<br/>
<input type="button" value="关闭定时器1" onclick="stop1();">
<br/>
<script type="text/javascript">
var t1;//全局变量
function start1(){
t1 = window.setTimeout("aa()", 1000);//返回值为当前闭定时器的id
}
function aa(){
alert("aaa.....");
}
function stop1(){
t1 = window.clearTimeout(t1);//指定所关闭定时器的id
}
</script>
<!--这个定时器是周期性的，setInterval(),clearInterval()-->
<input type="button" value="启动定时器2" onclick="start2();"> <br/>
<input type="button" value="关闭定时器2" onclick="stop2();"> <br/>
<script type="text/javascript">
var t2;
function start2(){
//t2=window.setInterval("bb()",2000);
t2=setInterval("bb()",2000);//返回值为当前闭定时器的id
}
function bb(){
//window.alert("bbbbbbb.....");
alert("bbbbbbb.....");
}
function stop2(){
//window.clearInterval(t2); //指定所关闭定时器的id
clearInterval(t2); //指定所关闭定时器的id
}
</script>
<hr/>
<!--打开新窗口: open() -->
<input type="button" value="新开一个窗口" onclick="demo();"> <br/>
<script type="text/javascript">
function demo(){
//window.open(URL,name,features,replace)
window.open("ad.html","ad","height=300,width=300,status=no,location=no");
}
</script>
<input type="button" onclick="disp_prompt()" value="Display a prompt box" /> <br/>
<script type="text/javascript">
function disp_prompt(){
var name=prompt("Please enter your name","")
if (name!=null && name!="")
{
document.write("Hello " + name + "!")
}
}
</script>
<input type="button" onclick="disp_scrollBy()" value="Display scrollBy" /> <br/>
<script type="text/javascript">
function disp_scrollBy(){
scrollBy(10, 10);//模拟用户点击滚动条动作
}
</script>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
</body>
</html>
小例子
<!DOCTYPE html>
<html>
<head>
<title>ad.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<h2>一条广告消息</h2>
<h2>一条广告消息</h2>
<h2>一条广告消息</h2>
<form>
Name:<input type="text" name="name">
<input type="submit" value="注册">
</form>
<script type="text/javascript">
//3秒后自动关闭窗口
setTimeout("window.close();",3000);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BOM---浏览器对象模型</title>
<script>
function resizeWindow()
{
window.resizeTo(500,300)
}
</script>
</head>
<body>
<h3>history演示中的第二个页面</h3>
<script>
function fun1(){
//"window."可以省略
//window.history.back(); //go(-1)
history.back();//go(-1)
}
</script>
<a href="#" onclick="fun1 ();">后退</a>
</body>
</html>
DOM--文档对象模型
文档对象模型(DOM: Document Object Model):
文档:标记型文档(HTML,XML)。特征:里面除了标签，就是标签封装的内容
对象:封装了属性和行为的实体，可以被直接调用。
模型:所有标记型文档都具备一些共有特征的一个体现。
DOM = BOM(浏览器对象模型) + DOM(文档对象模型)
DHTML：动态HTML，它不是一门语言，是多项技术综合体的简称。DHTML = HTML + CSS + DOM + JS
技术边界:
HTML: 负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。
CSS: 负责提供样式属性，对标签中的数据进行样式的定义。
DOM: 负责将标记型文档以及文档中的所有内容进行封装成对象，解析。在对象中定义了更多的属性和行为，便于对对象进行操作。
JS: 负责提供程序设计语言。--if, for, var , function, ...
<!DOCTYPE html>
<html>
<head>
<title>DOM--文档对象模型</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</script>
<style type="text/css">
.d {
background-color: #00ff00;
width: 200px;
height: 40px;
}
</style>
</head>
<body>
<pre>
文档对象模型(DOM: Document Object Model):
文档:标记型文档(HTML,XML)。特征:里面除了标签，就是标签封装的内容
对象:封装了属性和行为的实体，可以被直接调用。
模型:所有标记型文档都具备一些共有特征的一个体现。
DOM = BOM(浏览器对象模型) + DOM(文档对象模型)
</pre>
<pre>
DHTML：动态HTML，它不是一门语言，是多项技术综合体的简称。
DHTML = HTML + CSS + DOM + JS
技术边界:
HTML: 负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。
CSS: 负责提供样式属性，对标签中的数据进行样式的定义。
DOM: 负责将标记型文档以及文档中的所有内容进行封装成对象，解析。
在对象中定义了更多的属性和行为，便于对对象进行操作。
JS: 负责提供程序设计语言。--if, for, var , function, ...
</pre>
<div id="div1">
</div>
<input type="button" value="dhtml简单演示" onclick="aa();">
<script type="text/javascript">
function aa(){
var objDiv = document.getElementById("div1");
//设置纯文本
//objDiv.innerText=objDiv.innerText+"湖南城市学院";
//设置HTML格式串
objDiv.innerHTML = objDiv.innerHTML + "<button>aa</button>"
objDiv.className = "d";
}
</script>
</body>
</html>
