JS——Bom 和 Dom详解

快来打我* 2022-04-05 14:47 224阅读 0赞

**BOM:浏览器对象模型----- Browser Object Model 主要提供访问和操作浏览器各组件的方式**

浏览器各组件：window（浏览器窗口）、location（地址栏）、history（浏览历史）

screen（显示器屏幕）、navigator（浏览器软件）、document（网页）

**DOM:文档对象模型—Document Object Model 主要提供访问和操作html的方式**

注意：**BOM和DOM不是JS中的内容，它们是W3C制定的规范**，它们在浏览器中以对象形式实现，它们是由一组对象构成

window对象是JS中最大的对象，其他的对象都是他的子对象（包括document（包括网页中所有标签）、location、history、 navigator、screen）

访问window的子对象应该这样，window.document、window.location…但是window是最顶层的对象所以一半可以直接省略

**1.window对象：**

name：指浏览器窗口的名字或框架的名字，这个属性一般是给标签的target用的

eg：window.name=“new win”;document.write(name);

top:代表最顶层窗口

parent：代表父级窗口，主要用于框架

self：代表当前窗口，主要用于框架

innerWidth：浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏)，Firefox支持。ie使用document.documentElement.clientWidth来代替

innerHeight：浏览器窗口的内高(不含菜单栏、工具栏、地址栏、状态栏)，Firefox支持。ie使用document.documentElement.clientHeight来代替

//document.documentElement就是html标签对象

--------------------

alert(str):弹出一个警告对话框，显示str字符串内容

prompt(str\[,default\]):弹出一个输入窗口,str是输入的提示内容，default是默认的输入内容

confirm(str):弹出一个确认的对话框，str是提示内容，确认返回true，取消返回false

close():关闭窗口(关闭本网页)

print():打印整个窗口(打印本网页)

var win=open(\[url\]\[,name\]\[,options\]):打开一个新的浏览器窗口,参数可以没有，没有就按默认的打开一个新的浏览器窗口，并最大化，url：表示打开网页的地址，name：新窗口的名字，一般给 （a）标签的target属性使用， options：表示窗口的规格，包括width(新窗口的宽度)，height(高度)，left(新窗口距离屏幕左边的距离)，top(距离屏幕上边的距离)，menubar(是否显示菜单栏，值为yes，no)，toolbar(是否显示工具栏，值为yes，no)，location(是否显示地址栏，值为yes，no)，status(是否显示状态栏，值为yes，no)， scrollbars(是否显示滚动条，值为yes，no)，返回值是一个window对象的变量

onload事件:网页全部加载完成之后，指body的内容完全加载完成，才触发的事件，通过onload事件属性来调用JS函数，这个属性只有body才有

eg：function init()\{var screenW = screen.availWiidth;//屏幕的有效宽度

var screenH= screen.availHeight;//屏幕的有效高度

var w = 400;//设置新窗口的宽度

var h = 300;//设置新窗口的高度

var x = (screenw-w)/2;//左距离

var y = (screenH-h)/2;//上距离

var url1 =""; var name = “win”;

var options=“width”+w+",height"+h+",left"+x+",top"+y+“menubar=no,toolbar=no”;

var newwin=open(url1,name1,options);

newwin.document.write(“this is the new window”);

newwin.setTimeout(“window.close()”,1000);

onclick事件：当某个标签被点击之后触发的事件，所有的标签都有该属性

**var timer = window.setTimeout(code,millisec):**  
延时器方法，间隔millisec的毫秒值执行一次js代码code(注意只是会执行一次，除非使用类似递归的方法)，返回一个延时器的id变量，这个变量是给clearTimeout()用来清除 延时器的

**window.clearTimeout(timer):**  
用来停止延时器的方法，timer是延时器返回的id变量

**var timer = setInterval(code,millisec):**  
设置一个定时器，重复执行js的code。timer是返回的定时器变量，变量给clearInterval(timer)使用，用来清除定时器

**window.clearInterval(timer)**：  
清除定时器，timer是创建定时器时返回的id变量

**2.screen屏幕对象**

Width：屏幕的宽度，只读属性

Height：屏幕的高度，只读属性

availWidth：屏幕的有效宽度，不包括任务栏，只读属性

availHeight：屏幕的有效高度，不包括任务栏，只读属性

**3.navigator对象**

appName:浏览器软件名称主要用来判断客户使用的是什么核心的浏览器

ie浏览器的值：返回Microsoft Internet Explorer

Firefox：返回 Netscape