Java学习（BOM（浏览器对象模型），DOM（文档对象模型），事件）

XXX-17

于 2022-03-09 17:05:21 发布

阅读量1.1k

点赞数

文章标签： java 学习 javascript

本文链接：https://blog.csdn.net/XXX_17/article/details/123318604

版权

2022/3/7
1.DOM简单学习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM简单学习</title>
		<!--
		DOM简单学习：
			1.功能：控制html文档的内容
			2.代码：获取页面标签（元素）对象 Element
				document.getElementById("id值"):通过元素的id获取元素对象
			
			3.操作Element对象：
				1.修改属性值：
					1.1明确获取的对象是哪一个？
					1.2查看API文档，赵其中有哪些属性可以设置
				2.修改标签体内容：
					属性：innerHTML
		-->
	</head>
	<body>
		<img id = "light" src="imag/1.jpg">
		<h1 id="title">你好啊</h1>
		
	<script>
		/* //通过id获取元素对象
		var light = document.getElementById("light");
		alert("我要换图片了");
		light.src = "imag/2.jpg"; */
		
		//获取h1标签对象
		var title = document.getElementById("title");
		alert("我要换内容了");
		//修改内容
		title.innerHTML = "世界啊";
	</script>
	</body>
</html>

2.事件简单学习
功能:某些组件被执行了某些操作后，触发某些代码的执行
如何绑定事件：
1.直接在html标签上，指定事件的属性（操作），属性值就是js代码
事件：onclink--- 单击事件
2.通过js获取元素队形，指定事件属性，设置一个函数
案例：开关灯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM简单学习</title>
		<!--
		分析：
			1.获取图片对象
			2.绑定单击事件
			3.每次点击切换图片
				规则：
					如果灯是开的 on，切换图片为off
					如果灯是关的 off,切换图片为on
				使用标记flag来完成
		-->
	</head>
	<body>
		<img id="light" src = "imag/off.jpg"/>
		
	<script>
		//获取图片对象
		var light = document.getElementById("light");
		var flag = false; //代表灯是灭的。off图片
		//绑定单击事件
		light.onclick = function(){
			if(flag){
				//判断如果等是开的，则灭掉
				light.src = "imag/off.jpg";
				flag = false;
			}else{
				//判断如果等是关的，则打开
				light.src = "imag/on.jpg";
				flag = true;
			}
		}
	</script>
	</body>
</html>

BOM
1.概念：浏览器对象模型
将浏览器的各个组成部分封装成对象。
2.组成：
window：窗口对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Window</title>
		<!--
		Window:窗口对象
			1.创建
			2.方法
				1.与弹出框有关的方法：
					alert（）：显示带有一段消息和一个确认按钮的警告框
					confirm（）：显示带有一段消息以及确认按钮和取消按钮的对话框
						如果用户点击确定按钮，则方法返回true
						如果用户点击取消按钮，则方法返回false
					prompt（）：显示可提示用户输入的对话框
						返回值：获取用户输入的值
				2.与打开关闭有关的方法：
					close（）：关闭浏览器窗口
						谁调用我，我关谁
					open（）：打开一个新的浏览器窗口
						返回新的Window对象
				3.与定时器有关的方法
					setTimeout（）：一次性定时器
						参数：
							1.js代码或者方法对象
							2.毫秒值
						返回值：唯一标识，用于取消定时器
					clearTimeout（）；取消由setTimeout（）方法设置的timeout
					setInterval（）：循环计时器
					clearInterval（）：取消由setInterval（）设置的timeout
			3.属性
                1.获取其他BOM对象
                    history
                    location
                    Navigator
                    Screen
                2.获取DOM对象
                    document
			4.特点
				1.Window对象不需要创建可以直接使用window使用。window.方法名（）
				2.window引用可以省略。 方法名（）
		-->
		
	</head>
	<body>
		<input id = "openBtn" type = "button" value="打开窗口" />
		<input id = "closeBtn" type = "button" valu

最低0.47元/天解锁文章

XXX-17

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Java学习（BOM（浏览器对象模型），DOM（文档对象模型），事件）

2022/3/71.DOM简单学习<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>DOM简单学习</title> <!-- DOM简单学习： 1.功能：控制html文档的内容 2.代码：获取页面标签（元素）对象 Element document.getElementById("id值"):通过元素的id获取元素对象
复制链接

扫一扫