DOM、BOM:
DOM解释:
Document Object Model 文档对象模型
DOM技术:
(1) 把标记文档变成对象树,通过对这棵树中的对象进行操作(增删改查),实现对文档内容的操作。 (2) 对dom对象树进行增删改查,产生的效果就是对页面内容进行增删改查!
文档:
html页面,xml文档(文件)
DHTM:
动态html技术,它不是一门语言,而是一项综合技术: html+css+js+dom
技术边界:
html: 提供标签,对数据进行封装。—-目的是便于对该标签中的数据进行操作 css: 提供样式属性,对标签中的数据进行样式定义 dom: 把标记文档解析成对象树,并且提供一些对树中对象进行操作的 变量和函数 js: 提供程序设计语言,对页面中的对象进行逻辑操作 (if,for,…)
DOM、BOM的区别:
bom模型: browse object model 浏览器对象模型 dom模型针对的是页面内容,bom模型针对的是浏览器
dom: document对象代表的是整个文档页面 bom: window对象就是代表整个浏览器本身
DHTM对象中的window对象:
1、【window对象】:代表浏览器中一个打开的窗口。
2、【window对象中的成员有】:属性、集合、事件、方法、对象。
3、【window对象中的方法】:
window对象方法:
window对象中方法修改窗口大小位置演示:
function demo(){
window.alert(
"hello,window");
window.close();
window.confirm(
"确定要离开吗?");
window.moveBy(
100,
200);
window.moveTo(
100,
100);
window.resizeBy(
200,
100);
window.resizeTo(
700,
500);
}
window对象中方法创建定时器演示:
var idTimer;
function demo2(){
idTimer=window.setTimeout(aa,
1000);
idTimer=window.setInterval(aa,
1000);
function aa(){
window.moveBy(
10,
10);
}
}
window对象中方法清除定时器演示:
function demo3(){
window.clearTimeout(idTimer);
}
window对象中方法打开窗口演示:
function demo4(){
window.open(
"ad.html",
"_blank",
"height=200,width=400,status=no,toolbar=no,menubar=no,location=no,titlebar=no" );
}
window对象事件:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BOM模型演示
</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
alert("加载完毕");
}
window.onblur=function(){
alert("失去焦点");
}
window.onfocus=function(){
alert("获得焦点了");
}
window.onbeforeunload=function(){
alert("要退出吗?");
}
</script>
</body>
</html>