Bom和Dom

最新推荐文章于 2024-07-12 09:36:48 发布

悲催的程序猿!

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量103

点赞数 1

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/m0_57347212/article/details/118496813

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一，Bom对象

bom: browser object model 浏览器对象模型 js希望和浏览器有一定的交互能力

1.window对象

所有的浏览器都支持window对象。它表示的浏览器窗口

window对象是js中的顶层对象，所有的js函数，变量等都是window对象成员

甚至Dom的document也是window对象的属性之一

1.1 frameset标签

可以把window页面进行分割, 是一个框架标签，把页面引入或者进行割，最大的缺点就不能body一块使用

<frameset> 分割的标签

<frame> 标签引入其他页面

<frameset rows="20%,*">
		<frame src="hear.html" />
		
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame src="rigth.html" />
		</frameset>
</frameset>

1.2iframe标签

可以把window页面进行分割，是一个框架标签，可以和body一块使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<iframe src="index.html"></iframe>
		可以书写自己的东东
	</body>
</html>

1.3confrim确认框架

confrim两个值确定（true）取消(false) var con = window.confrim(消息); 返回的类型为boolean

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function demo(){
				var con  = window.confirm("我这么可爱你确定要删除我吗？？？");
				
				if(con){
					alert("算你狠！");//真正的删除了
				}else{
					alert("我知道你还是爱我的,么么哒！");//取消
				}
			}
		</script>
	</head>
	<body>
		<button onclick="demo()">删除</button>
	</body>
</html>

1.4时间周期

clearInterval()	取消由setInterval()设置的timeout
clearTimeout()	取消setTimeout()设置的timeout
setInterval()	指定时间周期
setTimeout()	在指定的毫秒数后调期函数或者计算表达式

案例1：让时间走动，设置暂停和开始按钮

		<script>
			
			//设置一个时间周期,参数1：表示是一个调用的方法，参数2：表示的时间周期
			 var interval_id = window.setInterval("_setTime()",1000);
			
			//页面一刷新，用户就可以看到时间，但是这个是静态的
			window.onload = function(){
				//获取id
				var _time = document.getElementById("_time");
				
				//获取当前时间
				var date = new Date();
				
				//把时间写入到span标签中
				_time.innerHTML = date.toLocaleString();
			}
			
			function _setTime(){
				//获取id
				var _time = document.getElementById("_time");
				
				//获取当前时间
				var date = new Date();
				
				//把时间写入到span标签中
				_time.innerHTML = date.toLocaleString();
			}
			
			//停止时间
			function _stopTime(){
				window.clearInterval(interval_id);//获取设置时间周期的id
			}
			//开始时间
			function _stratTime(){
				interval_id = window.setInterval("_setTime()",1000);
			}
			
		</script>
	</head>
	<body>
		<span style="color: red;" id="_time"></span>
		<input type="button" value="停止时间" onclick="_stopTime()"/>
		<input type="button" value="开始时间" onclick="_stratTime()"/>
	</body>

案例2：设计一个倒计时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<!-- html中有一个meta标签，可以实现页面刷新，可以看作是倒记时 -->
		<meta http-equiv="refresh" content="10;url=https://www.baidu.com">
		<title></title>
		
		<!-- 通过js配合meta标签，把这个倒记时的时间，显示给用户，效果是时间递减 -->
		<script>
			var time = 10;
			window.onload = function(){
				window.setInterval("setTime()",1000);
			}
			function setTime(){
				document.getElementById("spanid").innerHTML = time;
				time--;
			}
		</script>
		
	</head>
	<body>
		
		<center>
			<span style="font-size: 78px; color:orange; text-align: center;"  id="spanid"></span>
			 秒后跳转到<a href="https://www.baidu.com"> 百度</a>
		</center>
		<div align="center">
			<img src="img/404.jpg" />
		</div>
		
	</body>
</html>

1.5打开和关闭浏览器

close()	关闭浏览器
open()	打开浏览器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function open_Browser(){
				//打开浏览器窗口
				window.open("04-让时间动起来.html");
			}
		</script>
	</head>
	<body>
		<input type="button" value="打开浏览器" onclick="open_Browser()" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//关闭浏览器
			function close_Browser(){
				window.close();
			}
		</script>
	</head>
	<body>
	<input type="button" value="关闭浏览器" onclick="close_Browser()" />
	</body>
</html>

1.6history对象

history对象包含用户访问过的url, 注意：一定是访问过的历史url

history是window对象的一部份，可以通过window.history属性进行访问

back()	加载history列表中的前一个URL
forward()	加载hitory列表中的下一个URL
go()	加载hitory列表中的某一个具体的页面

1.7Location对象

Location对象是window对象的一部份，可以通过window.location属性来访问

location表示是当前浏览器的地址对象。浏览器的地址中主要保存的是访问某个网站的url地址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script>
			function order(){
				location.href = "http://www.baidu.com";
			}
		</script>
	</head>
	<body>
		
		<input type="button" value="查询订单" onclick="order()"/>
		
		<a href="http://www.baidu.com">查询订单</a>
		
	</body>
</html>

二.DOM

Dom对象: Document Object Model 文档对象模型

2.1document对象

Document对象代表整个html文档，可用来访问页面中的所有元素

document.getElementById()	返回指定id对象的引用
document.getElementsByName()	返回指定带有名称的对象集合
document.getElementsTagName()	返回指定带有标签名的对象集合
document.getElementsByClassName()	根据Class属性值获取元素对象们。返回值是一个数组
document.querySelector(id选择器)	根据id选择器，获取元素
document.querySelectorAll(css选择器)	根据css选择器获取元素，返回是一个数组

getElementById()

	<script>
		function demo(){
			//方式一，获取元素id
			//var inputid = document.getElementById("inputid");
			
			//方式二，获取元素id
			var inputid = document.querySelector("#inputid");
			
			if(inputid.type == "text"){
				inputid.type ="password";
			}else if(inputid.type == "password"){
				inputid.type ="text";
			}
			
		}
		
	</script>
</head>
<body>
	<input type="text" name="pwd" id="inputid"/>
	<input type="button" onclick="demo()" value="显示/隐藏密码" />
</body>

getElementsByTagName()

	<script>
		function demo1(){
			//方式一，getElementsByTagName("img"); 返回的是数组
			// var _img = document.getElementsByTagName("img");
			
			//方式二，querySelectorAll("img") 可以根据css选择器选中
			var _img = document.querySelectorAll("img");
			_img[0].width += 30;
		}
		
		function demo2(){
			var _img = document.getElementsByTagName("img");
			_img[0].width -= 30;
		}
		
	</script>
</head>
<body>
	<img src="img/404.jpg" width="450px"/>
	
	<input type="button" onclick="demo1()" value="放大" />
	<input type="button" onclick="demo2()" value="缩小" />
</body>

getElementsByName()

	<script>
		function demo(){
			//方式一， getElementsByName("hobby");
			// var hobbys = document.getElementsByName("hobby");
			
			//方式二，querySelectorAll("input[name='hobby']") css选择器
			var hobbys = document.querySelectorAll("input[name='hobby']")
			
			for (var i = 0; i < hobbys.length; i++) {
				if(hobbys[i].checked == true){
					alert(hobbys[i].value);
				}
			}
		}
		
	</script>
</head>
<body>
	<input type="checkbox" name="hobby" value="悠悠球"/>悠悠球
	<input type="checkbox" name="hobby" value="乒乓球"/>乒乓球
	<input type="checkbox" name="hobby" value="足足球"/>足足球
	
	<input type="button" value="提交" onclick="demo()" />
	
</body>

getElementsByClassName()

		<script>
			function demo(){
				//方式一，getElementsByClassName("hobby"
				// var hobbys = document.getElementsByClassName("hobby");
				
				//方式二,querySelectorAll(".hobby") css选择器
				var hobbys = document.querySelectorAll(".hobby");
				
				for (var i = 0; i < hobbys.length; i++) {
					if(hobbys[i].checked == true){
						alert(hobbys[i].value);
					}
				}
			}
		</script>
	</head>
	<body>
		
		<input type="checkbox" name="hobby" class="hobby" value="悠悠球"/>悠悠球
		<input type="checkbox" name="hobby" class="hobby" value="乒乓球"/>乒乓球
		<input type="checkbox" name="hobby" class="hobby" value="足足球"/>足足球
		
		<input type="button" value="提交" onclick="demo()" />
		
	</body>

2.2操作内容

属性名	描述
element.innerText	获取或者修改元素的纯文本内容
element.innerHTML	获取或者修改元素的html内容
element.outerHTML	获取或者修改包含自身的html内容

innerHTML 获取标签中所有内容，包括标签；从对象的起始位置到终止位置的全部内容

innerText 获取标签中纯文本内容，不包括标签；

outerHTML 获取标签本身，修改标签本身，添加标签本身的后面

2.3常用事件

点击事件

事件	描述
onclick	单击事件
ondblclick	双击事件

焦点事件

事件	描述
onblur	失去焦点
onfocus	元素获得焦点

加载事件

事件	描述
onload	页面加载完成后立即发生

鼠标事件

事件	描述
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开

键盘事件

事件	描述
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开
onkeypress	某个键盘按键被按下并松开

改变事件

事件	描述
onchange	域的内容被改变

表单事件

事件	描述
onsubmit	提交按钮被点击

事件案例一（聚焦离焦事件）

<script>
			
			function demo(){
				//获取用户输入信息
				var name =  document.querySelector("#uid").value;
				//正则
				var regExp = new RegExp("^1[3456789]\\d{9}$");
				//判断是否满足正则
				if(regExp.test(name)){
					document.getElementById("spanid").innerText = "合法";
					//提交到后台，后台到db，查询有没有这个手机号，如果有，手机号已存在！！
				}else{
					document.getElementById("spanid").innerText = "不合法";
				}
			}
			
			function demo2(){
				alert("我是聚焦事件")
			}
			
		</script>
	</head>
	<body>
		
		手机号：<input type="text" name="username" id="uid" onblur="demo()" /><span id="spanid"></span><br>
		密码：<input type="text" name="pwd" id="pid" onfocus="demo2()" /><span id="spanid"></span>
		
	</body>

事件案例二（鼠标悬浮离开事件）

<script>
			
			window.onload = function(){
				//获取初始的图片
				var _img = document.getElementById("img");
				
            	//绑定鼠标悬浮事件	
				_img.onmouseover = function(){
					_img.src = "img/p4.jpg";
				}
            	//绑定鼠标离开事件
				_img.onmouseout = function(){
					_img.src = "img/p3.jpg";
				}
			}
		</script>
	</head>
	<body>
		
		<img src="img/p3.jpg" id="img" width="450px"/>
		
	</body>

事件案例三（键盘按下松开）

	<script>
			window.onload = function(){
            	 //获取input框
				var _input = document.getElementById("iid");
				
            	//绑定键盘按下事件
				_input.onkeydown = function(){
					_input.style.background = "yellow";
				}
            	//绑定键盘松开事件
				_input.onkeyup = function(){
					_input.style.background = "red";
				}
				
			}
		</script>
	</head>
	<body>
		
		<input type="text" id="iid" />
		
	</body>

2.4操作节点

createElement(标签名称)	创建标签
appendChild	为某一个标签，去添加子标签
removeChild	为某一个标签，删除孩子标签
setAttribute	为某一个标签添属性
removeAttribute	删除某一个标签中的属性

appendChild添加子标签

<script>
		function addElement(){
			//创建标签
			var _li = document.createElement("li");//<li></li>
			
			//创建文本
			var textNode = document.createTextNode("一燕");//一燕
				
			//添加文本到li标签中
			_li.appendChild(textNode);//<li>一燕</li>
			
			//添加到父标签中
			document.getElementById("myul").appendChild(_li);
		}
	</script>
</head>
<body>
	
	<ul id="myul">
		<li>jack</li>
		<li>rose</li>
	</ul>
	
	<input type="button" onclick="addElement()"  value="添加子标签" />
</body>

removeChild删除子标签(parentNode.removechild())

指定删除

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function demo(){
				//指定删除子标签
				var node = document.getElementById("x1");
				//删除子标签
				node.parentNode.removeChild(node);
			}
		</script>
	</head>
	<body>
		
		<ul id="myul">
			<li>jack</li>
			<li id="x1">rose</li>
			<li>tom</li>
			<li>mary</li>
		</ul>
		
		<input type="button" onclick="demo()" id="inputid" value="删除子标签" />
	</body>
	
</html>

setAttribute添加属性

<body>
	<input type="text" name="username"  autocomplete="off">
	<input type="text" name="username">
	<input type="text" name="username">
	<input type="text" name="username">
	<input type="text" name="username">
</body>
<script>
	window.onload = function(){
		//给所有input添加 autocomplete="off"
		var tagName = document.getElementsByTagName("input");
		for (var i = 0; i < tagName.length; i++) {
			tagName[i].setAttribute("autocomplete","off");
		}
	}
</script>

removeAttribute删除属性

<body>
	<input type="text" name="username"  autocomplete="off">
	<input type="text" name="username">
	<input type="text" name="username">
	<input type="text" name="username">
	<input type="text" name="username">
</body>
<script>
	window.onload = function(){
		//给所有input添加 autocomplete="off"
		var tagName = document.getElementsByTagName("input");
		//遍历
		for (var i = 0; i < tagName.length; i++) {
			//移除input框中所有name属性
			tagName[i].removeAttribute("name");
		}
	}
</script>

2.5操作样式

通过js动态修改元素的样式。

语法

设置一个css样式

js对象.style.样式名='样式值'

批量设置css样式-了解

js对象.style.cssText='属性名：属性值;...'

通过class设置样式【重点】

js对象.className='样式名称1; 样式名称2;...'

悲催的程序猿!

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bom和Dom

一，Bom对象bom: browser object model 浏览器对象模型 js希望和浏览器有一定的交互能力1.window对象所有的浏览器都支持window对象。它表示的浏览器窗口window对象是js中的顶层对象，所有的js函数，变量等都是window对象成员甚至Dom的document也是window对象的属性之一1.1 frameset标签可以把window页面进行分割, 是一个框架标签，把页面引入或者进行割，最大的缺点就不能body一块使用<fram
复制链接

扫一扫