E005Web学习笔记-JavaScript（三）：BOM

最新推荐文章于 2020-05-24 18:27:39 发布

訾博ZiBo

最新推荐文章于 2020-05-24 18:27:39 发布

阅读量213

点赞数

分类专栏： Web 文章标签： BOM

本文链接：https://blog.csdn.net/qq_29689343/article/details/100151322

版权

Web 专栏收录该内容

74 篇文章 7 订阅

订阅专栏

一、简单学习DOM

1、控制（增删改查）HTML文档的内容；

2、代码：获取页面的标签（元素）对象Element；

document.getElementById();//通过元素的ID获取元素

3、操作Element对象：

修改属性值步骤：

第一步：明确获取的对象是哪一个；

第二步：查看API文档，找其中有哪些属性可以设置；

修改标签内容：

第一步：获取元素对象；

第二部：使用innerHTML属性修改标签的内容；

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象演示</title>
	
	</head>
	<body>
		<h1 id="hehe" style="color: #FF0000;">
			呵呵呵！
		</h1>
		<script type="text/javascript">
			var hehe = document.getElementById("hehe");
			//修改属性
			hehe.style = "color: #00EEFF;";
			//修改内容
			hehe.innerHTML = "哈哈哈哈";
		</script>
	</body>
</html>

二、简单学习事件

1、功能

某些组件被执行某些操作后出发某些代码；

2、如何绑定事件

方法一：直接在HTML标签上，指定事件的属性，属性就是js代码；

//点击事件
onClick();

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件演示</title>
		<script type="text/javascript">
			function c(){
				alert("调取js方法-我被点了");
			}
		</script>
	</head>
	<body>
		<!-- 直接写进去js代码 -->
		<h1 id="lala" onclick="alert('直接写-我被点了');">
			啦啦!
		</h1>
		<!-- 调取js方法 -->
		<h1 id="lala" onclick="c()">
			啦啦!
		</h1>
	</body>
</html>

方法二：通过JS获取元素对象，指定事件属性，然后设置事件所要执行的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件演示</title>
	
	</head>
	<body>
		</h1>
		<!-- 调取js方法 -->
		<h1 id="lala">
			啦啦!
		</h1>
		<script type="text/javascript">
			function c(){
				alert("调取js方法-我被点了");
			}
			var a = document.getElementById("lala");
			a.onclick = c;//别加括号,否则会直接执行,点击无效
		</script>
	</body>
</html>

点击改变文字内容，再点击再改回来，如此循环，案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件演示</title>
	
	</head>
	<body>
		</h1>
		<!-- 调取js方法 -->
		<h1 id="lala">
			啦啦!
		</h1>
		<script type="text/javascript">
			var b = 0;
			function c(){
				if(b==0){
					a.innerHTML = "啦啦！";
					b = 1;
				}else{
					a.innerHTML = "哈哈！";
					b = 0;
				}
			}
			var a = document.getElementById("lala");
			a.onclick = c;//别加括号,否则会直接执行,点击无效
		</script>
	</body>
</html>

三、BOM

1、概述

Browser Object Model 浏览器对象模型；

2、常用的BOM对象

1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；

2、document对象，（DOM）文档对象；

3、location对象，浏览器当前URL信息；

4、navigator对象，浏览器本身信息；

5、screen对象，客户端屏幕信息；

6、history对象，浏览器访问历史信息；

3、window对象

（1）创建：

window不需要创建，可以直接使用；

（2）方法：

①与弹出框有关的方法；

alert()显示带有一段消息和一个确认按钮的警告框；
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框；
    -- 如果用户点击确定按钮，则返回ture；
    -- 如果用户点击取消按钮。则返回false；
prompt()显示可提示用户输入的对话框；
    -- 返回输入框内用户输入的内容；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window对象</title>
		<script type="text/javascript">
			alert("警告框");
			var flag = confirm("确定吗？");
			if(flag){
				document.write("您点击了确定");
			}else{
				document.write("您点击了取消");
			}
			var text = prompt("您可以在这里输入一些内容哦");
			document.write(text);
		</script>
	</head>
	<body>
	</body>
</html>

②与打开关闭有关的方法

open()打开一个新的浏览器窗口或查找一个已命名的窗口；
close()关闭浏览器窗口；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window对象</title>
	</head>
	<body>
		<input id="btn" type="button" value="打开百度" /><br />
		<input id="btn_close" type="button" value="关闭窗口" />
		<script type="text/javascript">
			function f(){
				open("http://www.baidu.com/");
			}
			function f1(){
				close();
			}
			var a = document.getElementById("btn");
			a.onclick = f;
			var b = document.getElementById("btn_close");
			b.onclick = f1;
		</script>
	</body>
</html>

③与定时器有关的方法

setTimeout()在指定的毫秒数后调用函数或计算表达式；
clearTimeout()取消由 setTimeout() 方法设置的 timeout；
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式；
clearInterval()取消由 setInterval() 设置的 timeout；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window对象</title>
	</head>
	<body>
		<h1 id="a1">
			3秒后改变字体颜色……
		</h1>
		<h1 id="a2">
			0
		</h1>
		<script type="text/javascript">
			//一次性定时器
			var h1 = document.getElementById("a1");
			function f1(){
				h1.style = "color:#ff0000;";
			}
			var t = setTimeout(f1,3000);
			//取消一次性定时器
			function f2(){
				clearTimeout(t)
			}
			h1.onclick = f2;
			//循环计时器
			var num = 0;
			var h2 = document.getElementById("a2");
			function f3(){
				num++;
				h2.innerHTML = num;
				if(num==10){
					//取消循环计时器
					clearInterval(i);
				}
			}
			var i = setInterval(f3,1000);
			
		</script>
	</body>
</html>

（3）属性：

获取其他BOM对象：

history
location
navigator
screen

获取DOM对象：

document

（4）特点：

①window不需要创建，可以直接使用，window.方法名()；

②可以省略window，即直接使用方法名()；

4、Location对象

（1）创建

无需创建，可直接获取，location；

（2）方法

reload()重新载入当前文档；

（3）属性

href	返回完整的URL

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Location对象</title>
	</head>
	<body>
		<input id="btn" type="button" value="去百度"/>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				//location.reload();//刷新
				//alert(location.href);//获取地址
				//设置地址
				location.href = "http://www.baidu.com/";
			}
		</script>
	</body>
</html>

5、History对象

（1）创建：

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

（2）方法

back()加载 history 列表中的前一个 URL；
forward()加载 history 列表中的下一个 URL；
go(参数)加载 history 列表中的某个具体页面；
-- 参数：
    正数：前进几个历史记录；
    负数：后退几个历史记录；

（3）属性

length返回当前窗口历史列表中的网址数；

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Location对象</title>
	</head>
	<body>
		<input id="btn" type="button" value="去百度"/>
		<input id="btn_forward" type="button" value="前进"/>
		<input id="btn_back" type="button" value="后退"/>
		<input id="btn_go" type="button" value="走"/>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				location.href = "http://www.baidu.com/";
			}
			var btn_forward = document.getElementById("btn_forward");
			var btn_back = document.getElementById("btn_back");
			var btn_go = document.getElementById("btn_go");
			btn_forward.onclick = function(){
				history.forward();
			}
			btn_back.onclick = function(){
				history.back();
			}
			btn_go.onclick = function(){
				history.go(1);
			}
		</script>
	</body>
</html>

訾博ZiBo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
E005Web学习笔记-JavaScript（三）：BOM

一、简单学习DOM1、控制（增删改查）HTML文档的内容；2、代码：获取页面的标签（元素）对象Element；document.getElementById();//通过元素的ID获取元素3、操作Element对象：修改属性值步骤：第一步：明确获取的对象是哪一个；第二步：查看API文档，找其中有哪些属性可以设置；修改标签内容：第一步：获取元素对象；...
复制链接

扫一扫