JS操作BOM对象

发布时间：2023-09-06 01:22责任编辑：熊小新关键词：暂无标签

1、window对象

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>window对象</title>

	<!--
	BOM:(浏览器对象模型 Browser Object Model)
	浏览器页面的前进后退刷新页面跳转都是Bom！
	对整个浏览器窗口进行交互的对象模型！
	包含的内容（对象）：
	1.window对象
	01.history 属性
	02.location 属性
	2.document对象


	window对象
	常用的属性：
	01.history 属性
	02.location 属性
	常用的方法：
	alert() :只有一个对话框和一个确认按钮
	prompt() ：提示用户输入的对话框
	confirm（）：有一个确认按钮和取消按钮的对话框
	close(): 关闭浏览器窗口
	open()：打开一个新的浏览器窗口
	定时函数：
	01.setTimeout():在指定毫秒数之后，执行某个方法！只执行一次
	02.setInterval():每间隔指定的毫秒数，都会执行一次！

	window.open("弹出的窗口url"，"窗口的名称"，"窗口的特性")

	-->
	</head>
	<body>

	<script type="text/javascript">

	var flag= confirm("确定关闭本窗口吗？");
	if(flag){
	window.close(); //浏览器窗口关闭
	}else{
	//window.open("http://www.baidu.com","百度首页");
	window.open("http://www.baidu.com","百度首页","height=400,width=400");
	}

	</script>
	</body>
	</html>

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>history对象</title>
	<!--
	history对象常用的三个方法：
	01.back（）：后退
	02.forward（）：前进
	03.go() ：跳转至指定的url
	-->
	</head>
	<body>

	<a href="02history对象.html">当前页面</a>
	<a href="03history对象2.html">下一个页面</a>
	<a href="javascript:history.forward()">history.forward()下一个页面</a>
	<a href="javascript:history.go(2)">history.go(2)下一个页面</a>


	<script type="text/javascript">



	</script>


	</body>
	</html>

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>history对象2</title>
	</head>
	<body>
	history对象2 第二个页面

	<a href="javascript:history.back()">history.back()后退一个页面</a>
	<a href="javascript:history.go(-1)">history.go(-1)后退一个页面</a>

	</body>
	</html>

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>location对象</title>
	<!--
	location对象
	常用方法：
	reload（）:刷新页面
	replace():使用新的页面替换当前页面
	常用属性：
	host：主机名+端口号
	hostname:主机名
	href：完整的url
	hash:返回#之后的所有字符串
	search:返回?之后的所有字符串
	-->

	</head>
	<body>

	<a href="javascript:doubleC();">百度</a>

	<script type="text/javascript">
	document.write("host值为："+location.host+"<br/>");
	document.write("hostname值为："+location.hostname+"<br/>");
	document.write("href值为："+location.href+"<br/>");
	document.write("hash值为："+location.hash+"<br/>");
	document.write("search值为："+location.search+"<br/>");
	var flag= confirm("确定跳转页面吗？");
	if(flag){
	location.href="http://www.baidu.com";
	}
	//当用户点击百度超链接时触发的事件
	function doubleC(){
	location.href="http://www.jd.com";
	}

	</script>

	</body>
	</html>

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>document对象</title>
	<!--
	document对象
	常用的方法：
	write（）:在页面中书写内容
	getElementById(): 获取页面中指定id的对象！一个对象
	getElementsByName("sex"): 获取页面中所有name属性值为sex的对象！数组
	getElementsByTagName("div"): 获取页面中所有标签为div的对象！数组

	常用的属性：
	referrer:
	当浏览器向web服务器发送请求的时候，一般会带上referrer，
	告诉服务器我是从哪个页面链接过来的，服务器基此可以获得一些信息用于处理。
	url：返回当前页面的url
	-->
	</head>
	<body>

	<script type="text/javascript">
	document.write("document.referrer的值是："+document.referrer);

	</script>

	</body>
	</html>

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	body{
	line-height:30px;
	}
	input{margin:1px;
	width:90px;

	padding:0;
	}
知识推荐 js中typeof的使用 jquery判断checked的三种方法通栏导航栏的制作，综合使用CSS属性，代码不超过30行 React可以渲染html标签或React组件 websocket实现简单的通信 js笔记 HttpPost请求将json作为请求体传入的简单处理方法 Ajax 发送OPTION请求 vue.js 图书管理系统 fetch jsonp请求接口 web项目的开发 js黑魔法小星星的php jenkins上展示html报告【转载】 jsBOM对象 Ajax实现异步上传图片 phpredis Redis集群 Redis Cluster HTTP协议【详解】我的编程学习网——分享web前端后端开发技术知识。垃圾信息处理邮箱 tousu563@163.com 网站地图 icp备案号闽ICP备2023006418号-8 不良信息举报平台互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved