BOM&DOM

r囧r小猫 2024-04-21 08:03 28阅读 0赞

> #### ✨ BOM&DOM ####
> 
>  *  1.BOM
>  *   *  1.1BOM简介
>      *  1.2系统对话框
>      *  1.3打开和关闭窗口
>      *  1.4 location
>      *  1.5 history
>      *  1.6延时器和定时器
>  *  2.DOM
>  *   *  2.1文档对象模型
>      *   *  2.1.1节点类型
>          *  2.1.2节点关系
>      *  2.2元素节点
>      *   *  2.2.1元素的查找
>          *  2.2.2 内容的获得
>          *  2.2.3删除空结点
>          *  2.2.4 利用关系查询结点
>          *  2.2.5节点的增删改
>      *  2.3样式和属性
>      *   *  2.3.1样式操作
>  *  3.事件
>  *   *  3.1点击事件
>      *  3.2鼠标事件
>      *  3.3键盘事件
>      *  3.4表单事件
>  *  4.Web存储
> 
>   
> **?个人主页:[不断前进的皮卡丘][Link 1]**  
> **?博客描述:梦想也许遥不可及，但重要的是追梦的过程，用博客记录自己的成长，记录自己一步一步向上攀登的印记**  
> **?博主主要想从事后端开发，前端方面作为了解**

## 1.BOM ##

### 1.1BOM简介 ###

BOM(Browser Object Model)浏览器对象模型

*  主要是用于管理窗口和窗口之间的通讯，核心对象是window
 *  window表示浏览器的一个实例，对于每一个打开的窗口，系统都会自动为其定义window对象
 *  JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，而BOM缺乏标准
 *  ![在这里插入图片描述][c98dca189ae644edbedfeda8b2d45434.png]

### 1.2系统对话框 ###

可以在JavaScript中创建三种对话框:警告框，确认框，输入框

*  警告框  
    经常用于确保用户可以得到某些信息，当警告框出现后，用户需要点击确定按钮才能继续进行操作

/* 
    				bom: brower object model 浏览器对象模型
    				     js将浏览器所有的操作封装成不同对象的函数
    				window： 窗口，它是bom的核心，浏览器的每个窗口都对应一个window对象
    			 */	
    			//警告框
    		window.alert('aaa');
    			// 由于功能基本属于window对象的函数，写代码一般省略window
    		alert('bbb');

*  确认框  
    通常用来验证是否接受用户操作，当确认框弹出时，用户可以点击确认或者取消来确定用户操作，当你点击确认，确认框返回true，如果点击取消，确认框返回false。  
    ![在这里插入图片描述][b72a9f0c404b4c32811634b05816d794.png]  
    当我们点击确定的时候，控制台打印的是true  
    当我们点击取消的时候，控制台打印的是false
 *  输入框  
    输入框经常用来提示用户输入某个值，当提示框出现以后，用户需要输入某个值，然后点击确认或取消才可以继续操作。如果用户点击确认，那么返回值就是输入的值，类型是string，如果用户点击取消，那么返回值为null  
    ![在这里插入图片描述][1be7731fc8c84fb2ad9faecabca1f8d6.png]

### 1.3打开和关闭窗口 ###

*  打开窗口:window.open(),该方法返回所打开的窗口对象，window可以省略，每一个窗口一打开，open方法都会返回当前窗口的窗口对象
 *  关闭窗口:window.close(),只有通过JavaScript代码打开的窗口才可以由JavaScript代码关闭
 *  ![在这里插入图片描述][913dd372ca3b42959134ba9af27962e7.png]  
    ![在这里插入图片描述][b17b71cd9f1e470892b938634feb0ff5.gif]

### 1.4 location ###

window.location对象用于获得当前页面的地址(URL),并且可以把浏览器重定向到新的页面，在编写的时候可以不使用window这个前缀

*  属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>方法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hash</td> 
   <td>返回一个URL的锚部分</td> 
  </tr> 
  <tr> 
   <td>host</td> 
   <td>返回一个URL的主机名和端口</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>返回URL的主机名</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>返回完整的URL</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>返回URL的路径名</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>返回一个URL服务器使用的端口号</td> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td>返回一个URL协议</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>返回一个URL的查询部分</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][641a8f93c342477cb5f06a7e4ef82fe7.png]

![在这里插入图片描述][709a6b3a5de04e2ab81ac73f2cf3acee.png]  
![在这里插入图片描述][c8ee3b97ab3049aea9c1f12a6c088695.png]

*  页面跳转
    
     *  可以通过给location的href属性重新赋值，实现页面跳转
 *  方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>assign()</td> 
   <td>载入一个新的文档</td> 
  </tr> 
  <tr> 
   <td>reload()</td> 
   <td>重新载入当前文档</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>用新的文档替换当前文档</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][ec171e020cba4fcc9d2b680f43ba2d4e.png]  
![在这里插入图片描述][9a3a2500e86e42ceb55350efa62576d0.png]

### 1.5 history ###

window.history对象包含浏览器的历史记录

*  属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[length](https://www.w3cschool.cn/jsref/prop-his-length.html)</td> 
   <td>返回历史列表中的网址数</td> 
  </tr> 
 </tbody> 
</table>

*  方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>back()</td> 
   <td>加载history列表中的前一个URL</td> 
  </tr> 
  <tr> 
   <td>forward()</td> 
   <td>加载history列表中的下一个URL</td> 
  </tr> 
  <tr> 
   <td>go()</td> 
   <td>加载history列表中的某个具体页面，正数前进几个，负数后退几个</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][d1d229b78f2944638234fe7f731c2f65.png]  
![在这里插入图片描述][bbbfb3eb4061422aa6648579abf8f8a0.png]

![在这里插入图片描述][ca740a71c47047ce8f722ffc75327915.gif]

### 1.6延时器和定时器 ###

通过使用JavaScript，我们有能力做到在一个设定的时间间隔以后来执行代码，而不是在函数调用后马上执行，我们称之为计时事件。

*  延时调用
    
     *  延时调用只会调用一次
     *  setTimeout(‘js代码’,延时毫秒) 方法返回唯一的整数，可以用来清楚该定时器
     *  clearTimeout(定时器编号)
     *  案例:①延时5秒弹出警告

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script>
    			function show() {
        
    				alert('hahaha')
    			}
    			
    			let timeoutIndex
    			function start() {
        
    				// setTimeout('js代码', 延时毫秒)
    				// setTimeout('alert("hahaha")', 5000)
    				
    				// 设置延时器：延时一定事件后，触发js代码，触发1次
    				// setTimeout()返回延时器唯一的编号
    				timeoutIndex = setTimeout('show()', 5000)
    			}
    			
    			function stop() {
        
    				// 取消延时器
    				clearTimeout(timeoutIndex)
    			}		
    		</script>
    	</head>
    	<body>
    		
    		<button onclick="start()">启动</button>
    		<button onclick="stop()">取消</button>
    		
    	</body>
    </html>

*  定时器

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script>
    			
    			let count = 0
    			function show() {
        
    				count++
    				console.log(count)
    			}
    			
    			let intervalIndex
    			function start() {
        
    				intervalIndex = setInterval('show()', 1000)
    			}
    			
    			function stop() {
        
    				clearInterval(intervalIndex)
    				count = 0
    			}		
    		</script>
    	</head>
    	<body>
    		
    		<button onclick="start()">启动</button>
    		<button onclick="stop()">取消</button>
    		
    	</body>
    </html>

当我们点击启动的时候，每隔一段时间，就会开始计数，当点击取消的时候，就会停止，如果再次点击启动，就会重新计数  
![在这里插入图片描述][2e12f627cb05449ab95b2e254412ff39.png]

## 2.DOM ##

### 2.1文档对象模型 ###

DOM(Document Object Model)文档对象模型，在DOM中，所有事物都是节点。DOM把HTML文档看成是树结构，这种结构被称为是节点树，DOM提供了各种API可以添加，移除，修改页面的某一部分  
![在这里插入图片描述][4107779f67e744d1bec3995845d00113.jpeg]

#### 2.1.1节点类型 ####

nodeType节点类型是节点的属性之一，是一个整数，常用的节点类型有document，元素节点，文本节点，属性节点等

<table> 
 <thead> 
  <tr> 
   <th>节点类型</th> 
   <th>nodeName</th> 
   <th>nodeValue</th> 
   <th>nodeType</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>元素节点</td> 
   <td>标签名</td> 
   <td>不可用</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>属性节点</td> 
   <td>属性名</td> 
   <td>属性的值</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>文本节点</td> 
   <td>#text</td> 
   <td>文本内容</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>document</td> 
   <td>#document</td> 
   <td>不可用</td> 
   <td>9</td> 
  </tr> 
 </tbody> 
</table>

#### 2.1.2节点关系 ####

节点树中的节点彼此之间拥有层级关系。父(parent)、子(child)和同胞(sibling)等术语用来描述这些关系  
![在这里插入图片描述][6a38f15ea3af48b180ff5df5b3c64d3e.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script>
    			
    			/*
    			    dom： document object model, 文档对象模型, 用来操作页面的
    				
    				节点：dom将页面所有的内容视为节点(node)
    				      所有的节点组成节点树
    					  
    				节点类型：
    				    - document 文档对象
    					- 元素节点
    					- 文本节点
    					- 属性节点
    					
    				节点关系：
    					- 父与子  parent、child
    					- 兄弟  sibling 
    			  
    			  */	
    			
    		</script>
    	</head>
    	<body>
    		
    		<div>
    			<h2 title="abc">哈哈哈</h2>
    		</div>
    		
    	</body>
    </html>

![在这里插入图片描述][7460b831cd564c2bbd3a96b933657c92.png]

### 2.2元素节点 ###

#### 2.2.1元素的查找 ####

*  getElementById()
 *  getElementByTagName()
 *  getElementByClassName()

![在这里插入图片描述][3da3595efbfb4375bb63ddd2fef74356.png]

#### 2.2.2 内容的获得 ####

*  innerHtml，获得标签之间的内容，包括
 *  innerText，获得标签之间的纯文本信息，会把标签过滤掉，如果是赋值则是设置内容。
 *  value，获得输入框的输入内容，如果是赋值则是设置内容

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script>
    			
    			function getValue() {
        
    				let value = document.getElementById('two').value
    				alert(value)
    			}
    			function setValue() {
        
    				document.getElementById('two').value = 'hahaha'
    			}
    			
    		</script>
    	</head>
    	<body>
    		
    		<div id="one"><h2>哈哈哈</h2></div>
    		
    		<input type="text" id="two"/> 
    		<button onclick="getValue()">获得输入内容</button>
    		<button onclick="setValue()">设置输入内容</button>
    		
    		<script>
    		
    			let oneEle = document.getElementById('one')
    			
    			// 获得内容，包含html
    			console.log(oneEle.innerHTML) //<h2>哈哈哈</h2>
    			// 获得纯文本内容，忽略html
    			console.log(oneEle.innerText) //哈哈哈
    			
    			oneEle.innerHTML = '<p>abc</p>'
    			oneEle.innerText = '<p>abc</p>'
    			
    			// 获得输入框输入内容
    		
    			
    			
    		</script>
    	</body>
    </html>

点击输入内容，会弹出文本框的值  
![在这里插入图片描述][6cb1ec8d0bdb4ba9b6b432ede5ed4a8c.png]  
![在这里插入图片描述][d073f3562e2b4968b4c2b71e075a82ec.png]  
点击设置内容，可以设置文本框的值

![在这里插入图片描述][b3b9c083269a433485b8018b0db657b0.png]

#### 2.2.3删除空结点 ####

common.js

//根据父节点查询子节点(去掉空节点)
    function getChildNodes(partentNode) {
        				
    	//定义空白数组
    	var newChildNodes = [];
    	var childNodes = partentNode.childNodes;
    	for(var i =0; i<childNodes.length; i++) {
        
    		var childNode = childNodes[i];
    		//如果类型是文本节点，并且文本内容至少包含1个空格
    		if(childNode.nodeType == 3 && /^\s+$/.test(childNode.nodeValue)) {
        
    			//跳过
    			continue;
    		}
    		//添加
    		newChildNodes.push(childNode);
    	}
    	return newChildNodes;
    }

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="common.js"></script>
    	</head>
    	<body>
    		
    		<div id="one"><h2>hahahah</h2></div>
    		
    		<div id="two">
    			<h2>hahahah</h2>
    		</div>
    		
    		<div id="three">
    			<h2>hahahah</h2>
    			<h2>hahahah</h2>
    		</div>
    		
    		<script>
    			
    			let childNodes1 = document.getElementById('one').childNodes
    			console.log(childNodes1.length)
    			
    			let childNodes2 = document.getElementById('two').childNodes
    			console.log(childNodes2.length)
    			
    			let childNodes3 = getChildNodes(document.getElementById('three'))
    			console.log(childNodes3.length)
    			
    		</script>
    	</body>
    </html>

![在这里插入图片描述][dde62a7e12704a88b3958156f9fb1fef.png]

我们来看看如果没有去除掉空结点的话，应该是什么样子的

<div id="one"><h2>hahahah</h2></div>
    		
    		<div id="two">
    			<h2>hahahah</h2>
    		</div>
    		
    		<div id="three">
    			<h2>hahahah</h2>
    			<h2>hahahah</h2>
    		</div>
    		
    		<script>
    			
    			let childNodes1 = document.getElementById('one').childNodes
    			console.log(childNodes1.length)
    			
    			let childNodes2 = document.getElementById('two').childNodes
    			console.log(childNodes2.length)
    			
    			let childNodes3 = document.getElementById('three').childNodes
    			console.log(childNodes3.length)
    			
    		</script>

![在这里插入图片描述][df11ec8ebd074592b75540b2ad2cffef.png]

#### 2.2.4 利用关系查询结点 ####

*  .childNodes 获取全部子节点数组(在Firefox chrome ie9中会包含文本节点)
 *  .parentNode 父节点
 *  .firstChild 第一个子节点(在Firefox chrome ie9中会包含文本节点)
 *  .nextSibling 下一个兄弟节点(在Firefox、chrome等浏览器中会包含空节点)
 *  .previousSibling 上一个兄弟节点(在Firefox、chrome等浏览器中会包含空节点)

#### 2.2.5节点的增删改 ####

*  创建节点
    
     *  createElement(“标签名”)
     *  createTextNode(“文本内容”)
 *  添加节点
    
     *  appendChild(childNode)
 *  删除节点
    
     *  removeChild(childNode)
 *  替换节点
    
     *  replaceChild(newChildNode,oldChildNode)
 *  在特定节点前插入  
    \+insertBefore(newNode,targetNode)

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<div id="one"></div>
    		
    		<button onclick="add()">添加节点</button>
    		
    		
    		<script>
    			
    			function add() {
        
    				// 创建节点  <h2>hahaha</h2>
    				// 创建文本节点
    				let txtNode = document.createTextNode('hahaha')
    				// 创建元素节点
    				let h2Node = document.createElement('h2')
    				// 父节点添加子节点
    				h2Node.appendChild(txtNode)
    				
    				// 页面的div节点添加新创建的h2节点
    				document.getElementById('one').appendChild(h2Node)
    				
    			}
    			
    		</script>
    	</body>
    </html>

![在这里插入图片描述][90314524fc514e3f84f41b1a0930ca0c.png]  
然后点击添加节点  
![在这里插入图片描述][ed17fb4bbe2448238b5d6cb41e69201e.png]

### 2.3样式和属性 ###

#### 2.3.1样式操作 ####

*  node.style.attributename设置和获得样式  
    ![在这里插入图片描述][530ae6b50cc64229a102d1098694246e.png]  
    ![在这里插入图片描述][99f08121364e4485bffcf3723b52e134.png]

## 3.事件 ##

### 3.1点击事件 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onclick</td> 
   <td>当用户点击某个对象的时候调用的事件句柄</td> 
  </tr> 
  <tr> 
   <td>ondbclick</td> 
   <td>当用户双击某个对象时调用的事件句柄</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][bdea54eb3a784f4cacf08069e9609789.png]

### 3.2鼠标事件 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onmousedown</td> 
   <td>鼠标按钮被按下</td> 
  </tr> 
  <tr> 
   <td>onmouseenter</td> 
   <td>当鼠标指针移动到元素上的时候触发</td> 
  </tr> 
  <tr> 
   <td>onmouseleave</td> 
   <td>当鼠标指针移出元素时触发</td> 
  </tr> 
  <tr> 
   <td>onmousemove</td> 
   <td>当鼠标被移动触发</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>鼠标移动到某个元素之上</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>鼠标从某一个元素移开</td> 
  </tr> 
  <tr> 
   <td>onmouseup</td> 
   <td>鼠标按键被松开</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#test{
        
    				width: 300px;
    				height: 200px;
    				background-color: orange;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div id="test">
    			
    		</div>
    		
    		<script>
    			let testEle = document.getElementById('test')
    			
    			// 鼠标按下
    			testEle.onmousedown = function() {
        
    				console.log('鼠标按下了...')
    			}
    			// 鼠标抬起
    			testEle.onmouseup = function() {
        
    				console.log('鼠标抬起了...')
    			}
    			
    			
    			// // 鼠标进入
    			// testEle.onmouseenter = function() {
        
    			// 	console.log('鼠标移入了...')
    			// }
    			// // 鼠标离开
    			// testEle.onmouseleave = function() {
        
    			// 	console.log('鼠标离开了...')
    			// }
    			
    			
    			// 鼠标覆盖
    			// testEle.onmouseover = function() {
        
    			// 	console.log('鼠标覆盖了...')
    			// }
    			// // 鼠标移出
    			// testEle.onmouseout = function() {
        
    			// 	console.log('鼠标移出了...')
    			// }
    			
    			
    			// 鼠标移动
    			// 参数event=鼠标移动的事件
    			// testEle.onmousemove = function(e) {
        
    			// 	console.log('鼠标移动了...')
    			// 	console.log(e.screenX, e.screenY)
    			// }
    			
    		</script>
    		
    		
    	</body>
    </html>

### 3.3键盘事件 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onkeydown</td> 
   <td>某个键盘按键被按下</td> 
  </tr> 
  <tr> 
   <td>onkeyup</td> 
   <td>某个键盘按键被松开</td> 
  </tr> 
  <tr> 
   <td>onkeypress</td> 
   <td>某个键盘按键被按下并松开</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<input type="text" id="test-input">
    		
    		<script>
    			
    			let testEle = document.getElementById('test-input')
    			
    			// // 键盘按下了
    			// testEle.onkeydown = function() {
        
    			// 	console.log('键盘被按下了....')
    			// } 
    			
    			// // 键盘抬起了
    			// testEle.onkeyup = function() {
        
    			// 	console.log('键盘被抬起了....')
    			// } 
    			
    			// 参数e = 当前的事件对象
    			// testEle.onkeydown = function(e) {
        
    			// 	console.log('键盘被按下了....' + e.keyCode)
    			// } 
    			
    			// 键盘按下并抬起的事件
    			testEle.onkeypress = function(e) {
        
    				if(e.keyCode === 13) {
        
    					// this 指的是触发当前事件的元素
    					console.log(this)
    					console.log(testEle.value)
    					console.log(this.value)
    				}
    			}
    			
    			
    		</script>
    	</body>
    </html>

### 3.4表单事件 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onblur</td> 
   <td>元素失去焦点时触发</td> 
  </tr> 
  <tr> 
   <td>onfocus</td> 
   <td>元素获取焦点时触发</td> 
  </tr> 
  <tr> 
   <td>onchange</td> 
   <td>该事件在表单元素的内容改变而且失去焦点的时候触发</td> 
  </tr> 
  <tr> 
   <td>onreset</td> 
   <td>表单重置的时候触发</td> 
  </tr> 
  <tr> 
   <td>onsubmit</td> 
   <td>表单提交的时候触发</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<form action="test" id="login-form">
    			
    			账号： <input type="text" id="username-input"  /> <br><br>
    			密码： <input type="password" id="password-input"  /> <br><br>
    			
    			<input type="submit" value="提交">
    			<input type="reset" value="重置">
    			
    		</form>
    		
    		<script>
    			
    			// // 获得焦点
    			// document.getElementById('username-input').onfocus = function() {
        
    			// 	console.log('获得焦点了...')
    			// }
    			// // 失去焦点
    			// document.getElementById('username-input').onblur = function() {
        
    			// 	console.log('失去焦点了...')
    			// }
    			
    			
    			// 内容改变并且失去焦点
    			// document.getElementById('username-input').onchange = function() {
        
    			// 	console.log('change...')
    			// 	console.log(this.value)
    			// }
    			
    			
    			// form 表单的提交事件
    			// 默认无返回的，拦截后继续执行提交事件
    			// document.getElementById('login-form').onsubmit = function() {
        
    			// 	console.log('表单被提交了...')
    			// }
    			// document.getElementById('login-form').onsubmit = function() {
        
    			// 	console.log('表单被提交了...')
    				
    			// 	// 拦截，不会提交内容
    			// 	return false;
    				
    			// 	// 放行
    			// 	// return true;
    			// }
    			
    			
    			// form 表单的重置事件
    			document.getElementById('login-form').onreset = function() {
        
    				console.log('表单被重置了...')
    			}
    			
    		</script>
    	</body>
    </html>

## 4.Web存储 ##

*  Web存储API提供了sessionStorage(会话存储)和localStorage(本地存储)两个存储对象对网页的数据进行添加、删除、修改、查询等操作。
 *  localStorage用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除
 *  sessionStorage用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页以后就会删除这些数据

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>getItem(keyname)</td> 
   <td>返回指定键的值</td> 
  </tr> 
  <tr> 
   <td>setItem(keyname,value)</td> 
   <td>添加键和值，如果对应的值存在，则更新该键对应的值</td> 
  </tr> 
  <tr> 
   <td>removeItem(keyname)</td> 
   <td>移除键</td> 
  </tr> 
  <tr> 
   <td>clear()</td> 
   <td>清除存储对象中所有的键</td> 
  </tr> 
 </tbody> 
</table>

localStorage

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<form action="">
    			账号： <input type="text" id="username-input" /> <br><br>
    			密码： <input type="password" id="password-input" /> <br><br>
    		</form>
    			
    		<button onclick="save()">保存数据</button>	
    		<button onclick="read()">读取数据</button>	
    		<button onclick="remove()">移除数据</button>
    		<button onclick="clearData()">清空数据</button>	
    			
    		<script>
    			
    			/* 
    			     local: 本地
    				 localStorage： 本地存储，以小文本的形式，数据持久化保存
    				 
    			 */
    			
    			function save() {
        
    				let username = document.getElementById('username-input').value
    				let password = document.getElementById('password-input').value
    				
    				localStorage.setItem(username, password)
    			}
    			
    			function read() {
        
    				let value  = localStorage.getItem('abc')
    				console.log(value)
    			}
    			
    			function remove() {
        
    				localStorage.removeItem('abc')
    			}
    			function clearData() {
        
    				console.log('aaaaa')
    				localStorage.clear()
    			}
    			
    			
    		</script>
    	</body>
    </html>

sessionStorage

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<form action="">
    			账号： <input type="text" id="username-input" /> <br><br>
    			密码： <input type="password" id="password-input" /> <br><br>
    		</form>
    			
    		<button onclick="save()">保存数据</button>	
    		<button onclick="read()">读取数据</button>	
    		<button onclick="remove()">移除数据</button>
    		<button onclick="clearData()">清空数据</button>	
    			
    		<script>
    			
    			/* 
    			     sesssion: 会话，每个窗口一开一关，称为一次对话
    				 sessionstorage： 会话存储，数据临时保持的，当窗口关闭后数据就不在了
    				 
    			 */
    			
    			function save() {
        
    				let username = document.getElementById('username-input').value
    				let password = document.getElementById('password-input').value
    				
    				// 会话级别保存
    				sessionStorage.setItem(username, password)
    			}
    			
    			function read() {
        
    				let value  = sessionStorage.getItem('abc')
    				console.log(value)
    			}
    			
    			function remove() {
        
    				sessionStorage.removeItem('abc')
    			}
    			function clearData() {
        
    				console.log('aaaaa')
    				sessionStorage.clear()
    			}
    			
    			
    		</script>
    	</body>
    </html>

[Link 1]: https://blog.csdn.net/qq_52797170?spm=1010.2135.3001.5343
[c98dca189ae644edbedfeda8b2d45434.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/955f1f1c0982461c975cc2d3f04d5a03.png
[b72a9f0c404b4c32811634b05816d794.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/5d6e5e85b4ab4bb0877656a93b034b39.png
[1be7731fc8c84fb2ad9faecabca1f8d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/a2bf8884933646b8b262125a692fdadc.png
[913dd372ca3b42959134ba9af27962e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/07a9607756dc4f43ada9d72810cf7676.png
[b17b71cd9f1e470892b938634feb0ff5.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/89263602f62d4464823b7480c7c97d11.gif
[641a8f93c342477cb5f06a7e4ef82fe7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/d254b407c9a54eea8c894deb1350186b.png
[709a6b3a5de04e2ab81ac73f2cf3acee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/e8079d6fea744695ba163d5b82b8cf7e.png
[c8ee3b97ab3049aea9c1f12a6c088695.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/979f4d4557cc45058c48a8b4d425c05a.png
[ec171e020cba4fcc9d2b680f43ba2d4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/731f289f50a14abc918250bf330fa1ac.png
[9a3a2500e86e42ceb55350efa62576d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/fe1208b7ed794da49199f63e7d325320.png
[d1d229b78f2944638234fe7f731c2f65.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/5dc6dee77aa440eb81cbda6cc84eb98a.png
[bbbfb3eb4061422aa6648579abf8f8a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/6d6ebb29b3a74813bd50c5cd25c23884.png
[ca740a71c47047ce8f722ffc75327915.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/f5ac97e276c24b9582f563677176fc77.gif
[2e12f627cb05449ab95b2e254412ff39.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/2c753d723e8d4667a88d36193cf0068c.png
[4107779f67e744d1bec3995845d00113.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/ea136b810b4f4048ba96956f4bebb6fd.jpeg
[6a38f15ea3af48b180ff5df5b3c64d3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/f445bdae4e2e4754abb8be246ed55264.png
[7460b831cd564c2bbd3a96b933657c92.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/ce8b654bf3b74c79863ca4318fbc254e.png
[3da3595efbfb4375bb63ddd2fef74356.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/0254d8e0fe8e4a5a8ffc418c4bfeeb79.png
[6cb1ec8d0bdb4ba9b6b432ede5ed4a8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/62c236476d7f44028f1bc40ce91439a8.png
[d073f3562e2b4968b4c2b71e075a82ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/952d728205a4430d8484eed5209ecf69.png
[b3b9c083269a433485b8018b0db657b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/95ac7b77f6ee4f65864a8ee601626778.png
[dde62a7e12704a88b3958156f9fb1fef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/e09d8ed838604da5b5a7f3f8e0ff2256.png
[df11ec8ebd074592b75540b2ad2cffef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/ec23278b84e2410b81f61a02f0c27ec1.png
[90314524fc514e3f84f41b1a0930ca0c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/e54a2766fe8a4338af43b6165c9c1666.png
[ed17fb4bbe2448238b5d6cb41e69201e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/f1c3cbb20b5c4ab9b934969bbfd0a4e9.png
[530ae6b50cc64229a102d1098694246e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/599fc86299144458bdf96c4948ca17f3.png
[99f08121364e4485bffcf3723b52e134.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/375a3b4ce723418ba61c64545a9eff1a.png
[bdea54eb3a784f4cacf08069e9609789.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/256b8d7569474d2bb4a920813517fd8f.png

BOM&DOM

发表评论取消回复

还没有评论，来说两句吧...

相关阅读