JS BOM和DOM

已于 2022-12-26 21:54:35 修改
阅读量273 收藏 4
点赞数
分类专栏： 前端开发技术 文章标签： BOM DOM js进阶 js提升
于 2019-01-04 18:02:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39683070/article/details/85772624
版权

BOM：browser object module  浏览器对象模型

BOM 主要处理浏览器窗口和框架 。

window对象

open、close

打开（关闭）新的页面，窗口

	<script type="text/javascript">
		//window对象
		//  close方法 => 关闭当前窗口
		function close2(){
			window.close();			
		}
		//	open方法  => 打开一个新的窗口
		//参数1: 打开的url
		//参数2: 窗口名称=> name属性
		//参数3: 窗口的特征=> 长宽(其他属性未必好使)...
		//参数4: 是否将新窗口的地址加入到浏览器历史记录中
		// 返回值: 返回一个window对象. 新打开的窗口的window对象
		function open2(){
			
			window.open("../猜数字.html", "",'width=100,height=100');
			
		}
	</script>

<body>
    	<input type="button" onclick="close2();"  value="关闭当前窗口"  />
    	<input type="button" onclick="open2();"  value="打开猜数字窗口"  />
  </body>

点击关闭，关闭当前页面

定时器

通俗说就是每隔，多长时间执行一次

	<script type="text/javascript">
		//window对象
		//定时器方法
		// setInterval  设置定时器
		// clearInterval 清除定时器
		//-----------------------------------------------
		//参数1: 可以是一段string, 内容是js代码
		//参数2: 毫秒单位的时间
		//返回值: 当前开启的定时器id
		// 功能: 每个参数2毫秒,执行参数1代码.
		var id = window.setInterval("alert('abc');", 2000);
		//------------------------------------------------
		function stop(){
			window.clearInterval(id);
		}
	</script>
  </head>
  
  <body>
    	<input type="button" onclick="stop();"  value="停止"  />
  </body>

没隔两秒，弹一次 哈哈，有没有觉得很烦啊，点击停止就ok啦

延时器

当指定的时间到了之后，才执行，而且执行一次就ok啦

	//window对象
		//定时器方法
		// setTimeout  设置定时器
		// clearTimeout 清除定时器
		//-----------------------------------------------
		//参数1: 可以是一段string, 内容是js代码
		//参数2: 毫秒单位的时间
		//返回值: 当前开启的定时器id
		// 功能:参数2毫秒后,执行参数1代码(只执行一次).
		var id = window.setTimeout("alert('abc');", 2000);
		//------------------------------------------------
		function stop(){
			window.clearTimeout(id);
		}
		


	</script>
  </head>
  
  <body>
    	<input type="button" onclick="stop();"  value="停止"  />
  </body>

定时器扩展

<script type="text/javascript">
		//window对象
		
		function fun1(){
			alert("fun1!!!!");
		}
		//参数1: 也可以接受一个函数类型的对象
		// 如下两行代码,执行效果是一样的
		var id=window.setInterval(fun1, 2000)
		//window.setInterval("fun1()", 2000)
		function stop(){
			window.clearInterval(id);
		}
	</script>
  </head>
  
  <body>
    	<input type="button" onclick="stop();"  value="停止"  />
  </body>

注意，刚开始笔者没写停止函数，要疯了都，不断弹窗，而且怎么停止也关不掉，那感觉你懂得，当然不是浏览器，是编辑器，好了

前进和后退

	<script type="text/javascript">
		
	</script>
  </head>
  
  <body>
  		<a href="06-history对象02.html" >06-history对象02.html</a>
    	<input type="button" onclick="window.history.forward()"  value="前进"  />
    	<input type="button" onclick="window.history.go(1)"  value="前进"  />
  </body>

必须要有打开过，有历史记录，才可以前进和后退的，不然也没效果

这里可以先点击a链接，就可以啦

06-history对象02.html代码

	<script type="text/javascript">

	</script>
  </head>
  
  <body>
    	<input type="button" onclick="window.history.back()"  value="后退"  />
    	<input type="button" onclick="window.history.go(-1)"  value="后退"  />
  </body>

DOM：Document object module  文档对象模型

DOM 将把整个页面规划成由节点层级构成的文档

DOM个人觉得掌握 如何获取对象和基本事件，以及元素的增删改查，基本ok了

dom对象的获取

 <script type="text/javascript">
    	// 浏览器把 dom的定点对象 Document对象的引用交给了 window对象
   //代码:window.document
   	
   	//document	
   		var doc = window.document;
   		
   		//alert(doc);
   	//element 的获得 (重点)
   		var div1 = document.getElementsByTagName("div")[0];
   		var div2 = document.getElementById("one");
   		var div3 = document.getElementsByClassName("two")[0];
   		var div4 = document.getElementsByName("three")[0];
   		alert(div3 == div4);
    </script>

事件1  

Onclick 事件点击

 <body>
  		<input type="button" value="点我" id="one" onclick="alert('heihei')" />
  </body>
    <script type="text/javascript">
    	//演示 给id为one的 按钮 添加事件的方法
    	//方式1:	
    		/* //1 获得要添加的元素对象
    		var one = document.getElementById("one");
    		//2 添加事件函数属性
    		one.onclick=function(){
    			alert("haha");
    		} */
    	//方式2:
    		// <input type="button" value="点我" id="one" onclick="alert("heihei")" />	
    </script>

事件2

onblur、onfocus 焦点得到失去事件

<script type="text/javascript">
    		var one = document.getElementById("one");
    		
    		one.onblur=function(){
    			alert("失去焦点!");
    		}
    		one.onfocus=function(){
    			alert("得到焦点!");
    		}
    </script>

事件3

onchange  值发生改变事件

 <body>
  		<input type="text" id="one"  />
  		
  		<select id="two" >
  			<option>大专</option>
  			<option>本科</option>
  		</select>
  </body>
    <script type="text/javascript">
    		var one = document.getElementById("one");
    		
    		one.onchange=function(){
    			alert("被改变了!");
    		}
    		
    		
		var two = document.getElementById("two");
    		
		two.onchange=function(){
    			alert("被改变了!");
    		}
    </script>

事件4

onkeydown、up 、press

按键事件

<script type="text/javascript">
   /*  onkeydown 某个键盘按键被按下。 3 1 No Yes 
    onkeypress 某个键盘按键被按下并松开。 3 1 9 Yes 
    onkeyup 某个键盘按键被松开。 3 1 9 Yes  */
	
    //event =>　封装了事件发生的详情
    	//keyCode属性 => 按下按键的unicode码
    
    		var one = document.getElementById("one");
    		
    		one.onkeydown=function(event){
    			//1 获得摁下的按键
    			var key = event.keyCode;
    			//2 判断按键按下的是否是回车
    			if(key==13){
    					//是=>表单提交
					alert("表单被提交了");    				
    			}
    		}
    		
    </script>

事件5

onload

页面加载事件

  </head>
    <script type="text/javascript">
    	//onload 当页面加载完成时触发
    	
    </script>
  
  <body onload="alert('haha');" >
  		<input type="text" id="one"  />
  </body>

事件6

onmousedown、out、over、move

鼠标按下、松开、从某元素移开、移到某一元素

 <style type="text/css">
 	div{
 		border:1px red solid;
 		width:300px;
 		height: 300px;
 	}
 </style>
  </head>
   
  
  <body  >
  		<div id="one">
  			
  		</div>
  </body>
  
   <script type="text/javascript">
   /*  onmousedown 鼠标按钮被按下。 4 1 9 Yes 
       onmouseup 鼠标按键被松开。
	   
	    onmouseout 鼠标从某元素移开。 4 1 9 Yes 
	    onmouseover 鼠标移到某元素之上。 3 1 9 Yes 
	    
	    onmousemove 鼠标被移动。 3 1 9 Yes 
	      */
	var one = document.getElementById("one");
   
/* 	one.onmousedown =function(event){
			alert(event.button);
		}
	one.onmouseout =function(event){
		alert("onmouseout");
	}
	one.onmouseover =function(event){
		alert("onmouseover");
	} */
	one.onmousemove =function(event){
		alert(event.clientX+"==>"+event.clientY);
	}
	</script>

事件7

onsubmit、event.preventdefault

表单提交、阻止默认事件的发生

  <body  >
  	<form action="#" id="one"  >
  		用户名:<input type="text" /><br>
  		<input type="submit" value="提交" />
  	</form>
  </body>
   <script type="text/javascript">
   //onsubmit 当表单提交时触发
   //作用: 表单验证
   //onsubmit="return fun();"
   
   	 	var one = document.getElementById("one");
   		one.onsubmit = function (event){
			//校验
			//校验通过
			alert("校验不通过!");
			//校验不通过 => 拦截表单提交
			//return false;
			// 阻止默认事件的发生
			event.preventDefault();
   		} 
	</script>

事件8

event.stopPropagation

阻止事件继续传播

 <style type="text/css">
 	div{
 		border:1px red solid;
 		
 	}
 	#one{
 		width:300px;
 		height: 300px;
 	}
 	#two{
 		width:100px;
 		height: 100px;
 	}
 </style>
  </head>
   
  
  <body  >
  		<div id="one">
  			<div id="two">
  			
  			</div>
  		</div>
  </body>
  
   <script type="text/javascript">
   //event.stopPropagation();
   //阻止事件的继续传播
   
   		document.getElementById("two").onclick=function (event){
   			alert("two");
   			event.stopPropagation();
   		}
   		document.getElementById("one").onclick=function (){
   			alert("one");
   		}
	</script>

CRUD：元素的增删改查

<!--加入样式表-->
<style type="text/css">
div {
	border:#0099FF 1px solid;
	height:60px;
	width:120px;
	margin:20px 0px 20px 20px;
	padding:10px 0px 0px 20px;
}
#div_1{ background-color:#00FFFF; }
#div_2{ background-color:#FF3399; }
#div_3{ background-color:#0000FF; }
#div_4{ background-color:#FFFF66; }

</style>

</head>

<body>
    <div id="div_1"></div>
    
    <div id="div_2">
    div区域2
    </div>
    
    <div id="div_3">
   	 div区域3
    </div>

    <div id="div_4">
    div区域4
    </div>

    <hr />
    <input type="button" value="创建并添加节点" onclick="addNode()" />
    <input type="button" value="删除节点" onclick="deleteNode()" />
    <input type="button" value="替换节点" onclick="updateNode()" />
    <input type="button" value="克隆节点" onclick="copyNode()" />

</body>
<script type="text/javascript">
		//创建并添加节点
		function addNode(){
				// 1 创建A标签对象   <a></a>
				var a = document.createElement("a");
				// 2 为创建的a标签增加属性
				a.setAttribute("href", "http://www.itcast.cn");
				// 3 为a标签添加标签体
				a.innerHTML = "点我";
				// 4 找到div标签
				var div_1 = document.getElementById("div_1");
				// 5 添加
				div_1.appendChild(a);
				
		}
		//删除节点
		function deleteNode(){
			//1 获得要删除的div
			var div_2 = document.getElementById("div_2");
			//2 获得div的父元素
			var parent = div_2.parentNode;
			//3 通过爹删除孩子
			parent.removeChild(div_2);
		}
		//替换节点
		function updateNode(){
			//1 获得被替换的div
			var div_3 = document.getElementById("div_3");
			//2 创建img元素对象<img />
			var img = document.createElement("img");
			//3 为img添加属性
			img.setAttribute("src", "mn.jpg");
			img.setAttribute("width", "300");
			//4 找到爹
			var parent = div_3.parentNode;
			//5 替换
			parent.replaceChild(img, div_3);
		}
		//克隆节点
		function copyNode(){
			// 1.获得div4
			var div_4 = document.getElementById("div_4");
			// 2.调用克隆方法克隆
			var div_copy = div_4.cloneNode(true);
			// 3.获得父亲\
			var parent = div_4.parentNode;
			// 4.添加到最后一个div之前
			//parent.appendChild(div_copy);
			parent.insertBefore(div_copy, div_4);
		}
</script>

周先森开发
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript判断子窗口是否被关闭
hellomy的专栏
03-15 2378
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb
最全的DOM和BOM的解释分析
忆水思寒的博客
08-04 9983
        今天咱们就来看看DOM和BOM。什么是DOM和BOM？DOM（document object model）：文档对象模型，提供操作页面元素的方法和属性BOM（browser object model）；浏览器对象模型，提供一些属性和方法可以操作浏览器我想很多的人都看过这样的官方的解释，那具体的如何我们一起来分析下。一  什么是BOM和DOM？       Javascript 由三部分构成，ECMASc
Web之BOM基础
weixin_44931166的博客
03-04 850
深入了解BOM 一.BOM常用对象介绍 BOM是运行在浏览器中的,所以提供了一系列对象用于和浏览器窗口进行交互，这些对象包括，window、document、location、navigator和screen。 window(整个JavaScript脚本运行的顶层对象)对象属性如下： 属性 意义 document 返回该窗口内装载的HTML文档 location 返回该窗口...
BOM DOM详解
白及
03-13 455
我们知道，一个完整的JavaScript的实现，需要由三部分组成：ECMAScript(核心),BOM(浏览器对象模型)，DOM(文档对象模型)。 今天主要学习BOM和DOM。 BOM: BOM提供了很多对象，用来访问浏览器的功能，这些功能于网页内容无关（这些是DOM的事），目前，BOM已经被W3C搬入了HTML5规范中。 window对象： BOM的core，表示浏览器的一个实例，它既
Web前端-BOM
个人博客
01-27 322
BOM一、简介二、对象三、window对象 一、简介 所谓 BOM 指的就是浏览器对象模型 Browser Object Model，它的核心就是浏览器。它使JavaScript可以和浏览器进行交互。 二、对象 BOM的核心对象是window对象，它表示浏览器的一个实例。它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，因此网页中所有全局作用域中声明的变量、函数都会变成window对象的属性和方法。 三、window对象 window对象下面包含几个重要
javascript bom是什么及bom和dom的区别
10-23
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧
DOM和BOM的使用
01-08
BOM 提供了一些浏览器相关的功能，例如窗口、导航、历史记录等，而 DOM 则是文档对象模型，它允许开发者通过 JavaScript 操作文档的内容和结构。 DOM 概述 DOM 是一个文档对象模型，它将 HTML 文档抽象为一个树形...
Javascript之BOM与DOM讲解
最新发布
02-09
配套博客:https://liuyandeng.blog.csdn.net/article/details/51395830
javascript学习笔记（三）BOM和DOM详解
10-25
本文应用了很多实例，来解读JavaScript中BOM和DOM，DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的...
Javascript操作BOM和DOM
12-30
在JavaScript的世界里，BOM（浏览器对象模型）和DOM（文档对象模型）是两个至关重要的概念，它们允许开发者与用户的浏览器进行深入交互。 **BOM（浏览器对象模型）**: BOM是浏览器提供的一系列接口，它允许...
JavaScript之彻底搞懂DOM与BOM及其区别与用法
热门推荐
跳探戈的小龙虾的博客
03-19 1万+
ECMAScript 是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。 DOM（DocumentObjectModel ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。 BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。
DOM和BOM
p13132312312的博客
09-28 243
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。它把一系列浏览器对象内置到js的api中，使得我们能够操控浏览器的行为，比如控制浏览器的前进或者后退，控制浏览器的屏幕，获取浏览器的跳转历史等。 DOM （Document Object Model）是指文档对象模型，他实际上指的是一种标准，就是把一些杂乱无章的东西按照一...
BOM与DOM基础知识
Victor20190424的博客
05-03 405
BOM与DOM基础知识
WEB-BOM
weixin_47775987的博客
03-05 214
BOM window 窗体对象 1.innerHeight返回窗口的文档显示区的高度。(可见区域宽高) 2.innerWidth返回窗口的文档显示区的宽度。 3.outerheight返回窗口的外部高度。(不带菜单栏和控制台的) 4.ou...
BOM和DOM的区别和联系
qq_42931285的博客
10-07 1257
DOM和BOM的区别和联系
【什么是DOM和BOM】
weixin_46163346的博客
03-08 3437
什么是DOM和BOM？ DOM(Document)，简称文档对象模型。通过创建树来表示文档，描述了处理网页内容的方法和接口。用DOM API可以轻松地删除、添加和替换节点。 BOM (Browser object model)，简称浏览器对象模型。描述了与浏览器进行交互的方法和接口 BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性和方法存在. ..
JS-Web-API：BOM
路漫漫其修远兮，吾将上下而求索。
03-06 228
知识点 navigator (浏览器的信息) screen （屏幕的信息） location （url地址的信息） history （前进后退的信息） 题目 如何识别浏览器的类型 分析拆解 url 各个部分 ...
Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
唯恋殊雨的博客
09-24 2502
Web API Web API介绍 API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console.log()) We...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值