bom与dom

乐之者java

于 2020-05-24 09:42:02 发布

阅读量322

点赞数

分类专栏：前端文章标签： javascript js

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/106306657

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

javascript由三大部分组成，前边我说的变量、运算符、表达式、语句、函数、对象等基本的、核心的语法都是ecmascript标准的内容，还有另外两部分叫做bom和dom，那么这两个东西又是什么呢？他们的关系又是怎么样的呢？

bom：browser object model浏览器对象模型

dom：document object model 文档对象模型

其中，document就叫做dom，也即是说dom是bom的一小部分。接下来的几篇教程我们就来看看bom和dom里面的各个对象有什么属性和方法吧。

window对象

常用属性	属性描述	应用举例
name	设置或返回窗口的名称，在open或a的target中指定	window.name
opener	在open()打开的窗口使用，代表打开者的window对象或null	window.opner,放在服务器中测试
parent	在iframe中使用，代表上一级的window对象	window.parent，放在服务器中测试
self	当前window对象	window.self
defaultStatus	设置或返回窗口状态栏的文本	window.defaultStatus
status	设置窗口状态栏的文本	window.status
常用方法	方法描述	应用举例
alert()
confirm()		var ret=confirm("确认要删除吗?")
prompt()		var str=prompt("提示输入内容","默认值")
open(url,name,set)	返回打开窗口的引用	win=open(url,'aaa',settings); myWindow.focus();//opener
focus()	让窗口获得焦点	win=open(url,'aaa',settings); myWindow.focus();//opener
setInterval(fn,time)	指定周期调用函数，返回id_of_setInterval,数字，每次不同	inte=setInterval("goTop()",100);
setTimeout(fn,time)	多长时间后调用函数,返回id_of_settimeout
clearInterval(id)	终止setInterval
clearTimeout(id)	终止setTimeout
moveTo(x,y)	把窗口左上角移动到指定位置
scrollBy(xnum,ynum)	滚动指定的像素数
scroll(xnum,ynum)	将窗口移动到指定的坐标位置	返回顶部
close()	关闭窗口

一个例子，大家可以拷贝到本地直接运行来理解理解window对象的属性和方法：

window.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>window对象</title>
<script>
  //console.log(window.name);//""
  function openPage(){
	window.open("toopen.html","detail");
	//window.open("","_self");//打开当前页面
  }
  function f1(){
	alert("我是函数f1");
  }
  function closeWin(){
	//self.close();
	//window.open("","_self").close();
	/*
	 var browserName=navigator.appName;
	 if (browserName=="Netscape"){
		   window.open('', '_self', '');
		   window.close();
	 }
	 if (browserName=="Microsoft Internet Explorer") { 
		   window.parent.opener = "whocares"; 
		   window.parent.close(); 
	 }*/
  }
  
 
 // window.defaultStatus="自己设置的状态栏2";
  // window.status="自己设置的状态栏1";
	//弹出窗形式
  function openModal(){
   var settings='width=500,height=400,top=300,left=300,location=no,menubar=yes,resizable=yes,scrollbars=yes,status=yes,title=yes';
	myWindow=open('https://www.baidu.com','aaa',settings);
	myWindow.focus();//opener
	myWindow.moveTo(200,200);

  }
</script>
</head>

<body>
	<div id="div">我是一个div</div>
	<a href="javascript:;" onclick="openPage()">打开toopen.html</a>
	<a href="toopen.html"  target="detail">再次打开，通过window.name</a>
	
	 <iframe id="tableiframe" src="window_iframe.html" frameborder="0" 
					height="100%" width="100%"></iframe>
		
<a href="javascript:;" onclick="openModal()">弹出窗形式</a>		
		<a href="javascript:;" onclick="closeWin()">关闭</a>
	<input type="button" value="查询" id="query">		
</body>
</html>

涉及到的toopen.html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我是toopen.html</title>
<script>
  
  console.log(window.name);//""
  
  var c=opener.document.getElementById("div").innerHTML;
  alert(c);
  opener.f1();
</script>
</head>

<body>
	我是toopen.html
</body>
</html>

涉及到的window_iframe.html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我是iframe.html</title>
<script>
	 var c=parent.document.getElementById("div").innerHTML;
     alert("在iframe里弹出："+c);
     parent.f1();
	 parent.document.getElementById("query").onclick=function(){
		alert("被点击了");
	 }
</script>
</head>

<body>
	我是iframe页面的内容
</body>
</html>

location对象

Location 指的是浏览器输入地址的哪一块东西，js把它封装为对象，对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问

location对象的属性和方法：

常用属性	属性描述	应用举例
host	设置或返回主机名
href	设置或返回完整的 URL
search	设置或返回从问号 (?) 开始的 URL（查询部分）
protocol	设置或返回当前 URL 的协议
常用方法	方法描述	应用举例
reload(boolean)	刷新页面	true时相当于按住ctrl+f5

下面举个例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>location</title>
<script>
	var host=location.host;
	var protocol=location.protocol;
	var search=location.search;
	var href=location.href;
	console.log(host);
	console.log(protocol);
	console.log(search);
	console.log(href);
	document.write(new Date());
	setInterval("location.reload(true)",3000);
</script>
</head>

<body>
</body>
</html>

因为host，search等属性需要放在服务器上才能看到效果，所以大家如果想要看到效果，需要把这个页面放到服务器上，放好之后输入“

http://localhost:8888/location.html?myname=zhao”访问的时候，结果如下：

服务器有很多种，比如tomcat，apache等。

navigator对象

navigator对象主要封装的是客户端浏览器的信息，在js的框架中经常用来使用作为判断兼容性的依据：

常用属性	属性描述	应用举例
appCodeName	返回浏览器的基础代码版本。
appMinorVersion	返回浏览器的次级版本。	1.52:52
appName	返回浏览器的名称。
appVersion	返回浏览器的版本信息。	1.52:1
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。
plugins	返回浏览器的插件信息
mineTypes	返回浏览器支持的mineTypes

很简单，我们写个html文件，测试一下就可以了：

<script>
	var appCodeName=navigator.appCodeName;//浏览器基础的代码版本
var appName=navigator.appName;//浏览器名称
var appMinorVersion=navigator.appMinorVersion;//1.52:52
var appVersion=navigator.appVersion;//1.52:1
var cookieEnabled=navigator.cookieEnabled;//
var mineTypes=navigator.mineTypes;//
var platform=navigator.platform;//
var plugins=navigator.plugins;//
var userAgent=navigator.userAgent;//
var userLanguage=navigator.userLanguage;//
console.log(appCodeName);console.log(appName);console.log(appMinorVersion);
console.log(appVersion);console.log(cookieEnabled);
console.log(mineTypes);console.log(platform);console.log(plugins);console.log(userAgent);console.log(userLanguage);


</script>

执行结果：

screen对象与history对象

Screen 对象包含有关客户端显示屏幕的信息。

alert(screen.availWidth);//返回显示屏幕的宽度

alert(screen.availHeight);//返回显示屏幕的高度 (除 Windows 任务栏之外)。

history对象

back():加载历史列表中的前一个 URL,相当于history.go(-1)

forward():加载历史列表中的下一个 URL,相当于history.go(1)

go(number):number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置

<!doctype html>

<html>

<head>

<title>history</title>

function goBack()

{

window.history.go(-1)

}

function goForward()

{

window.history.go(1)

}

</script>

</head>

<body>

</body>

</html>

dom api之document对象属性与方法总结

每个载入浏览器的 HTML 文档都会成为 document 对象。document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问与修改。

document对象的属性和方法总结如下表：

常用属性	属性描述
forms	返回对文档中所有 Form 对象引用。数组
images	返回对文档中所有 Image 对象引用。数组
links	返回对文档中所有 Area 和 Link 对象引用。数组
cookie	设置或返回与当前文档有关的所有 cookie,放在服务器上执行
body	提供对 <body> 元素的直接访问。
documentElement	提供对 <html> 元素的直接访问。
常用方法	方法描述
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName() element.getElementsByTagName()	返回带有指定标签名的对象集合。
write()	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
createElement(“p”)	创建元素节点
createTextNode("文本内容")	创建文本节点
createAttribute("id")	创建属性节点

document.documentElement.clientHeight：浏览器窗口可见高度

下面是一个关于document对象属性的小例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body >
	<img src="duang.png" id="img1">
	<img src="duang.png" id="img2">
	<a href="http://www.baidu.com">百度</a>
</body>
</html>

javascript代码：

<script>
	    console.log(document.images);
		 console.log(document.images[0]);
		console.log(document.images["img1"]);
	
		//document.links：当前页面的所有连接		
		var i=0;		
		while(i<document.links.length){
			alert(document.links[i].href);
			i++;
		}	
</script>

执行结果：

document.images就是对document.getElementsByTagName("img")的简写形式；

同理document.links就是对document.getElementsByTagName("a")的简写形式；

乐之者java

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bom与dom

javascript由三大部分组成，前边我说的变量、运算符、表达式、语句、函数、对象等基本的、核心的语法都是ecmascript标准的内容，还有另外两部分叫做bom和dom，那么这两个东西又是什么呢？他们的关系又是怎么样的呢？bom：browser object model浏览器对象模型dom：document object model 文档对象模型其中，document就叫做dom，也即是说dom是bom的一小部分。接下来的几篇教程我们就来看看bom和dom里面的各个对象有什么属性和...
复制链接

扫一扫