【BOM】Window对象、事件、方法及DOM与BOM的区别联系

xiaoxiao2021-02-28  86

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();//---360不支持IE支持 window.confirm("确定要离开吗?"); window.moveBy(100,200);//将窗口的位置移动指定 x 和 y 偏移值。---360不支持IE支持 window.moveTo(100,100);//将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。---360不支持IE支持 window.resizeBy(200,100);//更改窗口的当前位置缩放指定的 x 和 y 偏移量。---360不支持IE支持 window.resizeTo(700,500);//将窗口的大小更改为指定的宽度和高度值。---360不支持IE支持 }

window对象中方法创建定时器演示:

var idTimer; function demo2(){ //创建定时器 idTimer=window.setTimeout(aa,1000);//经过指定毫秒值后计算一个表达式。---360不支持IE支持 idTimer=window.setInterval(aa,1000);//每经过指定毫秒值后计算一个表达式。---360不支持IE支持 function aa(){ window.moveBy(10,10); } }

window对象中方法清除定时器演示:

function demo3(){ //清除定时器 window.clearTimeout(idTimer); }

window对象中方法打开窗口演示:

function demo4(){ //打开文件open 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>
转载请注明原文地址: https://www.6miu.com/read-56529.html

最新回复(0)