JS-BOM对象与JS-DOM对象_jsbom撖寡情-程序员宅基地

技术标签: 学习总结  

js中的事件

​ 事件(Event)是 JavaScript 应用跳动的心脏 ,进行交互,使网页动起来。当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小。

​ 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。

作用:

  1. 验证用户输入的数据
  2. 增加页面的动感效果
  3. 增强用户的体验度

常用的事件

事件名 说明
onload 当页面或图像加载完成后立即触发
onclick 鼠标点击某个对象
onblur 元素失去焦点
onfocus 元素获得焦点
onchange 用户改变域的内容
onmouseover 鼠标移动到某个元素上
onmouseout 鼠标从某个元素上离开
onkeyup 某个键盘的键被松开
onkeydown 某个键盘的键被按下
<!-- 注册事件的两种方式-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 注册事件的第一种方式,直接在标签中使用事件句柄 -->
		<input type="button"  value="hello" onclick="sayhello()" />
		<!-- javaScript代码域-->
		<script type="text/javascript">
			// 任何一个事件都会对应一个事件句柄,事件句柄是在事件前添加on.
			// onxxx这个事件句柄出现在一个标签的属性位置上.(事件句柄以属性的形式存在.)
			function sayhello(){
     
				alert("hello");
			}
		</script>
		
		<!-- 第二种注册事件的方式:使用纯js代码完成事件的注册.-->
		
		<input type="button"  value="hello2" id="mybtn"/>
		<!-- javaScript代码域-->
		<script type="text/javascript">
			//第一步:先获得这个按钮对象(document是全部小写,内置对象,可以直接用,document就代表整个HTML页面)
			var btnObj=document.getElementById('mybtn');
			//第二步:给按钮对象的onclick属性赋值
			btnObj.onclick=function(){
     
				alert('hello2');
			}
		</script>
	</body>
</html>

JS-BOM对象

​ ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心。BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何的网页内容无关。多年来,缺少事实上的规范导致BOM既有意思又有问题,因为浏览器厂商会按照各自的想法随意去扩展它。于是,浏览器之间共有的对象就成为了事实上的标准。这些对象在浏览器中得以存在,很大程度上是由于他们提供了与浏览器的互操作型。W3C为了把浏览器中JavaScript最基本的部分标准化,已经将BOM的主要方面纳入了HTML5的规范当中。

在这里插入图片描述

Window对象

​ BOM的核心对象是window,它表示浏览器的一个实例。window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数,都以window作为其Global对象,因此有权访问parseInt()等方法。如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集合中,可以通过数值索引(从0开始,从左至右,从上到下)或者框架的名称来访问相应的window对象。

Window对象方法:
系统对话框:

浏览器通过(实际是window对象的方法)alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息。

  1. 消息框:alert, 常用。

    alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

  2. 输入框:prompt,返回提示框中的值。

    prompt() 方法用于显示可提示用户进行输入的对话框。

    参数(可选):

    第一个参数:要在对话框中显示的纯文本。

    第二个参数:默认的输入文本。

  3. 确认框:confirm,返回 true/false.

    confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

<!--系统对话框-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			/* alert普通弹出框 */
			alert("你好");
			window.alert("你好呀!");
			/* alert确认框 */
			var flag=window.confirm("我们来交朋友吧!");
			console.log(flag);
			/*输入框 prompt*/
			var str=window.prompt("不应当!!!");
			console.log(str);
		</script>
	</body>
</html>

打开窗口:
window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口

window.close():关闭窗口。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="funciton_open()">打开</button>
		<button type="button" onclick="funciton_close()">关闭</button>
		<script>
			/* 
				window对象是BOM提供的核心全局对象
					定义的全局变量和函数相当与window对象的属性和方法,window可以省略
					
				open() 打开某个连接
				close() 关闭
			 
			 */
			var num;
			function funciton_open(){
    
			//window.open("http://www.shsxt.com");  //默认新页面打开
			//window.open("http://www.shsxt.com","_self");
									      			      
			num=window.open("http://www.shsxt.com","_blank","width=200px,height=200px");
			
            }
			function funciton_close(){
    
				num.close();
			}
		</script>
	</body>
</html>





js定时器
<script>
	/*
	js定时器
		重复执行定时器 setInterval: 每隔多长时间执行一次
		延迟执行定时器 setTimeout: 只执行一次
		
		两个参数:
			函数体: 要执行的代码
			毫秒数: 间隔的时间|延迟的时间
			1s=1000ms
    */
</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box1">开始</div>
		<div id="box2">开始</div>
		<script>
		//5s种后显示当前时间
		var box1=document.getElementById("box1");
		var box2=document.getElementById("box2");
		var i=1;
		window.setTimeout(function(){
    
		box1.innerHTML=new Date().toLocaleString();
		},5000);
		var num;
		box2.onclick=function(){
    
		 console.log(123);
		 num=setInterval(fn,1000);
		}
			
		function fn(){
    
			console.log(456);
			box2.innerHTML=i;
			if(i==10){
    
				//return;
				window.clearInterval(num);
			}
			i++;
		}
		</script>
	</body>
</html>
history对象

​ history 对象是历史对象。包含用户(在浏览器窗口中)访问过的 URL。history 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

history对象的属性:length,返回浏览器历史列表中的 URL 数量。

history对象的方法:

方法名 说明
back() 加载history列表中的前一个URL
forward() 加载历史列表中的下一个URL.当页面第一次访问时,还没有下一个URL.
go(number|URL) URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1),到上一个页面。
location对象

​ location 对象是window对象之一,提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。也可通过 window.location 属性来访问。

location 对象的属性href:设置或返回完整的 URL

location 对象的方法

方法名 说明
reload() 重新加载当前文档.
replace() 用新的文档替换当前文档.
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="刷新" onclick="window.location.reload();" />
		
		<input type="button" name="" id="" value="shsxt官网" onclick="open_sxt();" />
		
		<script>
			function open_sxt(){
    
			  alert(window.location.href); /* 当前页面的url*/  
			  //window.location.href="http://www.taobao.com";  //存在后退
			  location.replace("http://www.tianmao.com");  //不存在后退
			}
		</script>

	</body>
</html>

document对象

​ 每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分,也可通过 window.document 属性对其进行访问。

​ document对象的body属性,提供对元素的直接访问,cookie属性,用来设置或返回与当前文档有关的所有cookie,write()方法,向文档写HTML表达式或JavaScript代码。还有其他属性和方法。在Document对象中讲解。

该对象作为BOM中的核心对象存在。

JS-DOM对象

DOM:Document Object Model 文档对象模型

​ 要实现页面的动态交互效果,bom 操作远远不够,需要操作 html 才是核心。如何操作 htm,就是 DOM。简单的说,dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节点树,运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上。

​ 每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

节点

​ 加载 HTML 页面时,Web 浏览器生成一个树型结构,用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成,组成一个节点树。对于页面中的元素,可以解析成以下几种类型的节点:

节点类型 HTML内容 比如
文档节点 文档本身 整个文档 document
元素节点 所有HTML元素 < a > ,< div >,< p >
属性节点 HTML元素内的属性 id , href , name , class
文本节点 元素内的文本 hello
注释节点 HTML中的注释

获取元素节点的方式:

1.document.getElementById("id属性值")
	获取到页面中的某一个元素节点
2.主语.getElementByClassName("Class属性值")
	通过元素class属性值获取到一个或多个元素节点
    主语:document|元素节点
3.主语.getElementByTagName("标签名")
	通过元素的标签名获取到一个或者一组元素
    主语:document|元素节点
4.document.getElementByName("name属性值")
	通过Name属性值获取一组元素
    一般在表单元素上会有name属性,name属性的作用为后台区分前台元素的唯一,如果没有name,标签元素就没有提交数据的能力
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="ul">
			<li>ul-li1</li>
			<li class="red">ul-li2</li>
			<li class="red">ul-li3</li>
			<li>ul-li4</li>
			<li>ul-li5</li>
		</ul>
		<ol>
			<li>ol-li1</li>
			<li class="red">ol-li2</li>
			<li class="red">ol-li3</li>
			<li>ol-li4</li>
			<li>ol-li5</li>
		</ol>
		<form action="">
			<input type="radio" name="gender" value='man'>
			<input type="radio" name="gender"  value='woman'>
			<input type="submit">
		</form>
		
		 <script>
			 var ul=document.getElementById("ul");
			 //Class属性值
			 //主语为document,在整个文档中去找
			 //var lis=document.getElementsByClassName("red");
			 //主语为ul节点,在ul中去找
			 var lis=ul.getElementsByClassName("red");
			 console.log(lis);
			 
			 //标签名
			// var ls=document.getElementsByTagName("li");
			var ls=ul.getElementsByTagName("li");
			console.log(ls);
			
			var names=document.getElementsByName("gender");
			console.log(names);
		 </script>
	</body>
</html>
创建节点和插入节点
创建节点:	
	document.createElement("元素名"); 创建元素节点
	document.createTextNode("文本"); 创建文本节点
	
插入节点:
	父节点.appendChild(子节点)
	子节点追加到父节点中的最后位置
	
	父节点.insertBefore(节点1,节点2)
		节点1:新节点
		节点2:参照节点
		返回插入的节点
		必须有2个参数
		第二个参数null,undefined都相当于追加,作用与appendChild相同
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="func()">点击</button>
		 <script>
			function func(){
     
				//创建节点
				var box=document.createElement("div");
				box.style.height="500px";
				box.style.background="pink";
				
				/* var p=document.createElement("p");
				console.log(box);
				console.log(p); */
				//1.p标签中添加文本节点
				/* var text=document.createTextNode("明天的你会感谢今天努力的自己");
				 p.appendChild(text); */
				 
				 //2)
				 // p.innerHTML="比你聪明的人都还在努力,你有什么资格不努力...";
				 
				 //3)
				 box.innerHTML="<p>比你聪明的人都还在努力,你努力有什么用</p>"
				 
				// box.appendChild(p);
				//追加到最后
				// document.body.appendChild(box);
				 //插入到btn之前
				 var btn=document.getElementsByTagName("button")[0];
				// console.log(document.body.insertBefore(box,btn));
				  console.log(document.body.insertBefore(box,null));
			}
		 </script>
	</body>
</html>
创建图片节点
 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="addImg();">添加图片</button>
				
			<div id="container"></div>
		
			<script type="text/javascript">
				// 添加图片
				function addImg() {
     
					// 创建img元素
					var img = document.createElement("img");
					// 设置属性第一种方式
					// 设置img元素的src属性
					// img.src = "http://www.baidu.com/img/bd_logo1.png";
						
					// 设置属性第二种方式
					// setAttribute() 方法添加指定的属性,并为其赋指定的值。
					// 设置img元素的src属性
					img.setAttribute('src', 'http://www.baidu.com/img/bd_logo1.png');
					img.style.width = '540px';
					img.style.height = '258px';
					// 获取div元素
					var container = document.getElementById("container");
					// 将img元素节点追加到div元素中
					container.appendChild(img);
				}
			</script>
	</body>
</html>

间接查找节点
方法|属性 描述
childNodes 返回元素的一个子节点的数组
firstChild 返回元素的第一个子节点
lsatChild 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<div>
				<ul class="box1">
					<li>车厘子</li>
					<li>草莓</li>
					<li>橙子</li>
					<li>凤梨</li>
					<li>提子</li>
					<li>榴莲</li>
				</ul>
				<ol>
					<li>人参果</li>
					<li>猕猴桃</li>
					<li>苹果</li>
					<li>香蕉</li>
				</ol>
			</div>
		<script>
			/* 
			childNodes	返回元素的一个子节点的数组
			firstChild	返回元素的第一个子节点
			lastChild	返回元素的最后一个子节点
			nextSibling	返回元素的下一个兄弟节点
			parentNode	返回元素的父节点
			previousSibling	返回元素的上一个兄弟节点
			 */
			var ul=document.getElementsByClassName("box1")[0];
			console.log(ul);
			console.log(ul.childNodes);
			console.log(ul.firstChild);
			console.log(ul.firstElementChild);
			console.log(ul.lastChild); 
			console.log(ul.lastElementChild);
			console.log(ul.firstElementChild.nextSibling);
			console.log(ul.firstElementChild.nextElementSibling);
			console.log(ul.firstElementChild.previousSibling);
			console.log(ul.lastElementChild.previousElementSibling);
			console.log(ul.parentNode);
			
		</script>
	</body>
</html>

代码运行结果见下图:

在这里插入图片描述

小练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<ul class="bo">
				<li><span>苹果</span></li>
				<li><span>香蕉</span></li>
				<li><span>橘子</span></li>
				<li><span>橙子</span></li>
				<li><span>猕猴桃</span></li>
			</ul>
		</div>
		<script type="text/javascript">
			/*
				练习: 
					ul列表,列表中有5个子元素li,每一个li中定义span,span中定义内容
					点击span,把父元素li隐藏
			 
			 */
				var span=document.getElementsByTagName('span');
            //遍历span数组,给每一个span添加点击事件
				for(var i=0;i<=span.length-1;i++){
     
					span[i].onclick=function(){
     
                     //当前对象->被点击的span节点,可变的
					//console.log(this.parentNode.parentNode);
						this.parentNode.style.display='none';
					}
				}
		</script>
	</body>
</html>

删除节点
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="del_dv">
		<span id="programmer">程序猿</span>
		<a href="javascript:void(0)" onclick="delNode();">删除</a>
		</div>

	<script type="text/javascript">
		function delNode() {
     
			// 第一种方式:获取父节点,然后删除子节点
			var dv = document.getElementById('del_dv');
			var programmer = document.getElementById("programmer");
			dv.removeChild(programmer);
				
			// 第二种方式:通过旧节点定位到父节点,然后删除子节点
			// var programmer = document.getElementById("programmer");
			// programmer.parentNode.removeChild(programmer);
		}
	</script>
	</body>
</html>

删除前:

在这里插入图片描述
删除后:
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45768979/article/details/103624412

智能推荐

一加5t Android 第三方系统上BL锁_一加怎么上bl锁-程序员宅基地

文章浏览阅读6.1k次。方法来自XDA大神,感谢大神发现这神奇的操作视频链接:https://www.youtube.com/watch?v=Bzfd-dKgpesXDA论坛中相关讨论:https://forum.xda-developers.com/t/remove-unlocked-bootloader-warning-message-at-the-start.3841712/方法和工具:https://forum.xda-developers.com/t/signing-boot-images-for-android-_一加怎么上bl锁

python3爬虫学习之实战无限下载百度图片_"re_dbs='\"thumburl\":\"(.*?)"-程序员宅基地

文章浏览阅读3k次。由于做项目需要大量图片,应我同学的要求,帮他爬取大量百度图片当做练习,这里写出来记录一下我们首先分析一下百度图片的页面和获取规则随便输入一个关键字,我们下滑图片页面,同时检查,就可以发现,它是通过Ajax请求一直获取图片之前正好也做了爬取微博的例子,想来是差不多,于是我们分析一下Ajax请求链接我们看到请求URL,多分析几条就能发现,它几乎是不变的,而变化的几条分别是,pn..._"re_dbs='\"thumburl\":\"(.*?)"

windows上如何安装jq_windows jq-程序员宅基地

文章浏览阅读3.6k次。jq介绍- jq是一款非常强大的用来将复杂的数据解析成json格式的工具。具体作用及用法官网有详细介绍。- 官网地址:https://stedolan.github.io/jq/Windows上安装jq- 如果要在Windows上顺利的使用jq,需要先安装chocolatey。- 以管理员身份待开cmd窗口,输入@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None _windows jq

钉钉官方接口调用过程_钉钉企业内部应用回调怎么弄-程序员宅基地

文章浏览阅读6.5k次,点赞5次,收藏24次。文章目录钉钉官方接口调用过程获取企业内部应用的访问凭证accessToken根据员工的企业UserId获取钉钉官方的unionId唯一性idUserId的获取方法appKey和appSecret的获取方法易错点钉钉官方接口调用过程获取企业内部应用的访问凭证accessToken首先需要引入依赖,如下图:钉钉开发者调用钉钉官方的接口的时候,一定要先要进行认证,什么意思呢?就是必须要告诉钉钉我是一个企业开发者,我有权限调用你的接口,那具体怎么认证呢?企业开发者通常可以在钉钉里面创建应用,我们需要把我们_钉钉企业内部应用回调怎么弄

Ubuntu 8.04嵌入式交叉编译环境arm-linux-gcc搭建过程图解-程序员宅基地

文章浏览阅读136次。Linux版本:Ubuntu8.04内核版本:Linux 2.6.24交叉编译器版本:arm-linux-gcc-3.4.1交叉编译器下载链接:https://share.weiyun.com/5oxlS6X(密码:36R7)前言1、搭建交叉编译环境安装、配置交叉编译工具链。在该环境下编译出嵌入式Linux系统所需的操作系统、应用程序等,然后再上传到目标机上。2、交..._arm-linux-gcc 8

vm虚拟机镜像转换成KVM虚拟机_vm exsi的虚拟机转换成kvm-程序员宅基地

文章浏览阅读1.2k次。众所周知,VMware workstations是一个收费的虚拟机软件,虽然对于个人使用,网上有许多盗版的license可以使用,但是对于一个大的公司来说,在商业环境下,一定不能使用盗版的license,而KVM虚拟机软件是一个免费的软件,在商业应用环境下,完全可以作为一个不错的可以替代VMware workstations的解决方案。但是对于很多已经运行在了VMware workstation的虚拟机镜像来说,要是想避免收费,可以把VMware workstation的虚拟机vmdk的格式转换成qcow_vm exsi的虚拟机转换成kvm

随便推点

css绝对定位、相对定位和文档流的那些事_绝对定位文件流-程序员宅基地

文章浏览阅读1.9k次。文档流,就是普通流,就像你以前用表格布局基本只涉及到文档流,如绝对定位的元素不占文档流,它会忽略文档流的存在而浮在已有东西的上面。如相对定位它占文档流 ,所以定位不好它会覆盖已有的东西。浮动的东西也不占的,只是文档流会围绕浮动的东西。————————————————————————下面是转载部分—————————————————————————前言 接触html、和css_绝对定位文件流

MODIS数据行列号图_landsat行列号怎么算-程序员宅基地

文章浏览阅读1.7w次,点赞12次,收藏34次。_landsat行列号怎么算

【计算机三级数据库技术】第8章 数据库后台编程技术--附思维导图_数据库第八章数据库编程思维导图-程序员宅基地

文章浏览阅读685次,点赞2次,收藏8次。目录1 存储过程1.1 创建1.2 执行1.3 删除2 用户定义函数2.1 创建和调用标量函数2.2 创建和调用内联表值函数2.3 创建和调用多语句表值函数2.4 删除用自定义函数3 触发器3.1 基本概念3.2 创建触发器删除触发器4 游标4.1 游标的组成4.2 特点4.3 使用游标4.4 示例1 存储过程1.1 创建(1)传参的存储过程Create PROC [shema_name] proc_name@变量名1 as varchar(20)@变量名2 int AS select .._数据库第八章数据库编程思维导图

蚍蜉叹-程序员宅基地

文章浏览阅读523次。人情世故人之下, 墨染青峰墨紫砂。 红情踏遍痴情在, 我花竟败百花开。 蚍蜉一叹狂心咒, 月瘦孤光撞铁楼。 昨日雨中爬万里, 迈豪横指向天际。_蚍蜉叹

Qt调用FFmpeg命令录屏_linux qt 录屏 github-程序员宅基地

文章浏览阅读3.1k次,点赞3次,收藏28次。//列出音视频设备ffmpeg -list_devices true -f dshow -i dummy//录屏命令ffmpeg -f gdigrab -i desktop -f dshow -i audio="麦克风 (High Definition Audio 设备)" -pix_fmt yuv420p -vcodec libx264 -acodec aac -s 1440x900 ..._linux qt 录屏 github

将java swing写的用程序打包exe可执行程序_java swing能生成exe吗-程序员宅基地

文章浏览阅读1.5k次。将java swing写的用程序打包exe可执行程序原文地址:https://www.cnblogs.com/ssh2/p/3463199.html下面的文章是介绍如何将自己编写的swing应用程序打包为.exe的可执行程序,进而编译为.exe的安装程序。相信有这样经历的朋友肯定可以理解我为什么还要将已经编译好的.exe程序更进一步的编译为安装程序,因为一般而言本机打包的是基本不会出现什么..._java swing能生成exe吗