JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】

秒速五厘米 2023-01-09 14:22 220阅读 0赞

> **学习地址：**
> 
> 1.  [谷粒学院——尚硅谷][Link 1]
> 2.  [哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)][JavaScript_140_JS]
> 
> --------------------
> 
> [JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】][JavaScript_JavaScript_140_JS]

***目   录***

P96 96.尚硅谷\_JS基础\_DOM查询 22:09

获取元素节点

获取元素节点的子节点

dom查询练习【4~6】

P97 97.尚硅谷\_JS基础\_DOM查询 21:36

获取父节点和兄弟节点

dom查询练习【7~11】

P98 98.尚硅谷\_JS基础\_全选练习（一） 12:39

Checkbox 对象

checked 属性：设置或返回 checkbox 是否应被选中。

“全选按钮”的实现

P99 99.尚硅谷\_JS基础\_全选练习（二） 19:22

“全不选按钮、反选按钮、提交按钮”的实现

P100 100.尚硅谷\_JS基础\_全选练习（三）15:56

“全选/全不选按钮”状态同步的实现

P101 101.尚硅谷\_JS基础\_dom查询的剩余方法 21:42

document.getElementsByTagName("body")\[0\];   document.body;

document.documentElement;

document.all   document.getElementsByTagName("\*")

getElementsByClassName()：根据元素的class属性值查询一组元素节点对象

document.querySelector()

document.querySelectorAll()

P102 102.尚硅谷\_JS基础\_dom增删改 33:15

DOM方法

DOM 增删改 案例

1、创建一个"广州"节点,添加到\#city下

2、将"广州"节点插入到\#bj前面

3、使用"广州"节点替换\#bj节点

4、删除\#bj节点

5、读取\#city内的HTML代码

6、设置\#bj内的HTML代码

7、创建一个"广州"节点，添加到\#city下

P103 103.尚硅谷\_JS基础\_添加删除记录-删除 21:46

取消超链接的默认跳转行为

window 对象方法

删除dom元素

--------------------

# P96 96.尚硅谷\_JS基础\_DOM查询 22:09 #

## 获取元素节点 ##

>  *  通过document对象调用
> 
> 1.  getElementById()：通过id属性获取一个元素节点对象。
> 2.  getElementsByTagName()：通过标签名获取一组元素节点对象。
> 3.  getElementsByName()：通过name属性获取一组元素节点对象。

## 获取元素节点的子节点 ##

> 通过具体的元素节点调用
> 
> 1.  getElementsByTagName()：方法，返回当前节点的指定标签名后代节点。
> 2.  childNodes：属性，表示当前节点的所有子节点。
> 3.  firstChild：属性，表示当前节点的第一个子节点。
> 4.  lastChild：属性，表示当前节点的最后一个子节点。

## dom查询练习【4~6】 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]
> 
> ![2021012116245788.png][]  childNodes：属性，表示当前节点的所有子节点。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]

# P97 97.尚硅谷\_JS基础\_DOM查询 21:36 #

## 获取父节点和兄弟节点 ##

> 通过具体的节点调用
> 
> 1.  parentNode：属性，表示当前节点的父节点
> 2.  previousSibling：属性，表示当前节点的前一个兄弟节点
> 3.  nextSibling：属性，表示当前节点的后一个兄弟节点

## dom查询练习【7~11】 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Untitled Document</title>
    		
    		<style type="text/css">
    			@CHARSET "UTF-8";
    
    			body {
    				width: 800px;
    				margin-left: auto;
    				margin-right: auto;
    			}
    
    			button {
    				width: 300px;
    				margin-bottom: 10px;
    			}
    
    			#btnList {
    				float: left;
    			}
    
    			#total {
    				width: 450px;
    				float: left;
    			}
    
    			ul {
    				list-style-type: none;
    				margin: 0px;
    				padding: 0px;
    			}
    
    			.inner li {
    				border-style: solid;
    				border-width: 1px;
    				padding: 5px;
    				margin: 5px;
    				background-color: #99ff99;
    				float: left;
    			}
    
    			.inner {
    				width: 400px;
    				border-style: solid;
    				border-width: 1px;
    				margin-bottom: 10px;
    				padding: 10px;
    				float: left;
    			}
    		</style>
    		<script type="text/javascript">
    
    			/*
    			 * 定义一个函数，专门用来为指定元素绑定单击响应函数
    			 * 	参数：
    			 * 		idStr：要绑定单击响应函数的对象的id属性值
    			 * 		fun：事件的回调函数，当单击元素时，该函数将会被触发
    			 */
    			function myClick(idStr, fun) {
    				var btn = document.getElementById(idStr);
    				btn.onclick = fun; // 函数也是对象，可以作为实参
    			}
    
    			window.onload = function() {
    				//为id为btn01的按钮绑定一个单击响应函数
    				var btn01 = document.getElementById("btn01");
    				btn01.onclick = function() {
    					//查找#bj节点
    					var bj = document.getElementById("bj");
    					//打印bj
    					//innerHTML 通过这个属性可以获取到元素内部的html代码
    					alert(bj.innerHTML);
    				};
    
    
    				//为id为btn02的按钮绑定一个单击响应函数
    				var btn02 = document.getElementById("btn02");
    				btn02.onclick = function() {
    					//查找所有li节点
    					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
    					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
    					//即使查询到的元素只有一个，也会封装到数组中返回
    					var lis = document.getElementsByTagName("li");
    					//打印lis
    					//alert(lis.length);
    					//变量lis
    					for (var i = 0; i < lis.length; i++) {
    						alert(lis[i].innerHTML);
    					}
    				};
    
    
    				//为id为btn03的按钮绑定一个单击响应函数
    				var btn03 = document.getElementById("btn03");
    				btn03.onclick = function() {
    					//查找name=gender的所有节点
    					var inputs = document.getElementsByName("gender");
    					//alert(inputs.length);
    					for (var i = 0; i < inputs.length; i++) {
    						/*
    						 * innerHTML用于获取元素内部的HTML代码的
    						 * 	对于自结束标签，这个属性没有意义
    						 */
    						//alert(inputs[i].innerHTML);
    						/*
    						 * 如果需要读取元素节点属性，
    						 * 	直接使用 元素.属性名
    						 * 		例子：元素.id 元素.name 元素.value
    						 * 		注意：class属性不能采用这种方式，
    						 * 			读取class属性时需要使用 元素.className
    						 */
    						alert(inputs[i].className);
    					}
    				};
    
    				//为id为btn04的按钮绑定一个单击响应函数
    				var btn04 = document.getElementById("btn04");
    				btn04.onclick = function() {
    					//获取id为city的元素
    					var city = document.getElementById("city");
    					//查找#city下所有li节点
    					var lis = city.getElementsByTagName("li");
    					for (var i = 0; i < lis.length; i++) {
    						alert(lis[i].innerHTML);
    					}
    				};
    
    				//为id为btn05的按钮绑定一个单击响应函数
    				var btn05 = document.getElementById("btn05");
    				btn05.onclick = function() {
    					//获取id为city的节点
    					var city = document.getElementById("city");
    					//返回#city的所有子节点
    					/*
    					 * childNodes属性会获取包括文本节点在内的所有节点
    					 * 根据DOM标签标签间空白也会当成文本节点
    					 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
    					 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
    					 */
    					var cns = city.childNodes;
    					//alert(cns.length);
    					// for (var i = 0; i < cns.length; i++) {
    					// 	alert(cns[i]);
    					// }
    					/*
    					 * children属性可以获取当前元素的所有子元素
    					 */
    					var cns2 = city.children;
    					alert(cns2.length);
    				};
    
    				//为id为btn06的按钮绑定一个单击响应函数
    				var btn06 = document.getElementById("btn06");
    				btn06.onclick = function() {
    					//获取id为phone的元素
    					var phone = document.getElementById("phone");
    					//返回#phone的第一个子节点
    					//phone.childNodes[0];
    					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
    					var fir = phone.firstChild;
    					//firstElementChild获取当前元素的第一个子元素
    					/*
    					 * firstElementChild不支持IE8及以下的浏览器，
    					 * 	如果需要兼容他们尽量不要使用
    					 */
    					//fir = phone.firstElementChild;
    					alert(fir);
    				};
    
    				//为id为btn07的按钮绑定一个单击响应函数
    				myClick("btn07", function() {
    					//获取id为bj的节点
    					var bj = document.getElementById("bj");
    					//返回#bj的父节点
    					var pn = bj.parentNode;
    					alert(pn.innerHTML);
    					/*
    					 * innerText
    					 * 	- 该属性可以获取到元素内部的文本内容
    					 * 	- 它和innerHTML类似，不同的是它会自动将html去除
    					 */
    					//alert(pn.innerText);
    				});
    
    
    				//为id为btn08的按钮绑定一个单击响应函数
    				myClick("btn08", function() {
    					//获取id为android的元素
    					var and = document.getElementById("android");
    					//返回#android的前一个兄弟节点（也可能获取到空白的文本）
    					var ps = and.previousSibling;
    					//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
    					//var pe = and.previousElementSibling;
    					alert(ps);
    				});
    
    				//读取#username的value属性值
    				myClick("btn09", function() {
    					//获取id为username的元素
    					var um = document.getElementById("username");
    					//读取um的value属性值
    					//文本框的value属性值，就是文本框中填写的内容
    					alert(um.value);
    				});
    
    
    				//设置#username的value属性值
    				myClick("btn10", function() {
    					//获取id为username的元素
    					var um = document.getElementById("username");
    					um.value = "今天天气真不错~~~";
    				});
    
    
    				//返回#bj的文本值
    				myClick("btn11", function() {
    					//获取id为bj的元素
    					var bj = document.getElementById("bj");
    					//alert(bj.innerHTML);
    					//alert(bj.innerText);
    					//获取bj中的文本节点
    					/*var fc = bj.firstChild;
    					alert(fc.nodeValue);*/
    					alert(bj.firstChild.nodeValue);
    				});
    			};
    		</script>
    	</head>
    	<body>
    		<div id="total">
    			<div class="inner">
    				<p>
    					你喜欢哪个城市?
    				</p>
    
    				<ul id="city">
    					<li id="bj">北京</li>
    					<li>上海</li>
    					<li>东京</li>
    					<li>首尔</li>
    				</ul>
    
    				<br>
    				<br>
    
    				<p>
    					你喜欢哪款单机游戏?
    				</p>
    
    				<ul id="game">
    					<li id="rl">红警</li>
    					<li>实况</li>
    					<li>极品飞车</li>
    					<li>魔兽</li>
    				</ul>
    
    				<br />
    				<br />
    
    				<p>
    					你手机的操作系统是?
    				</p>
    
    				<ul id="phone">
    					<li>IOS</li>
    					<li id="android">Android</li>
    					<li>Windows Phone</li>
    				</ul>
    			</div>
    
    			<div class="inner">
    				gender:
    				<input class="hello" type="radio" name="gender" value="male" />
    				Male
    				<input class="hello" type="radio" name="gender" value="female" />
    				Female
    				<br>
    				<br>
    				name:
    				<input type="text" name="name" id="username" value="abcde" />
    			</div>
    		</div>
    		<div id="btnList">
    			<div><button id="btn01">查找#bj节点</button></div>
    			<div><button id="btn02">查找所有li节点</button></div>
    			<div><button id="btn03">查找name=gender的所有节点</button></div>
    			<div><button id="btn04">查找#city下所有li节点</button></div>
    			<div><button id="btn05">返回#city的所有子节点</button></div>
    			<div><button id="btn06">返回#phone的第一个子节点</button></div>
    			<div><button id="btn07">返回#bj的父节点</button></div>
    			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
    			<div><button id="btn09">返回#username的value属性值</button></div>
    			<div><button id="btn10">设置#username的value属性值</button></div>
    			<div><button id="btn11">返回#bj的文本值</button></div>
    		</div>
    	</body>
    </html>

# P98 98.尚硅谷\_JS基础\_全选练习（一） 12:39 #

## Checkbox 对象 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9][]

### checked 属性：设置或返回 checkbox 是否应被选中。 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10][]

## “全选按钮”的实现 ##

> ![20210121181644110.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12][]

# P99 99.尚硅谷\_JS基础\_全选练习（二） 19:22 #

## “全不选按钮、反选按钮、提交按钮”的实现 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15][]

# P100 100.尚硅谷\_JS基础\_全选练习（三）15:56 #

## “全选/全不选按钮”状态同步的实现 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 16][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 17][]
> 
> ![20210121181622245.png][]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>全选练习</title>
    		<script type="text/javascript">
    			window.onload = function() {
    
    				//获取四个多选框items
    				var items = document.getElementsByName("items");
    
    				//获取全选/全不选的多选框
    				var checkedAllBox = document.getElementById("checkedAllBox");
    
    
    				/*
    				 * 全选按钮
    				 * 	- 点击按钮以后，四个多选框全都被选中
    				 */
    				//1.#checkedAllBtn
    				//为id为checkedAllBtn的按钮绑定一个单击响应函数
    				var checkedAllBtn = document.getElementById("checkedAllBtn");
    				checkedAllBtn.onclick = function() {
    					//遍历items
    					for (var i = 0; i < items.length; i++) {
    						//通过多选框的checked属性可以来获取或设置多选框的选中状态
    						//alert(items[i].checked);
    						items[i].checked = true; //设置四个多选框变成选中状态
    					}
    					checkedAllBox.checked = true; //将全选/全不选设置为选中
    				};
    
    
    				/*
    				 * 全不选按钮
    				 * 	- 点击按钮以后，四个多选框都变成没选中的状态
    				 */
    				//2.#checkedNoBtn
    				//为id为checkedNoBtn的按钮绑定一个单击响应函数
    				var checkedNoBtn = document.getElementById("checkedNoBtn");
    				checkedNoBtn.onclick = function() {
    					for (var i = 0; i < items.length; i++) {
    						items[i].checked = false; //将四个多选框设置为没选中的状态
    					}
    					checkedAllBox.checked = false; //将全选/全不选设置为不选中
    				};
    
    
    				/*
    				 * 反选按钮
    				 * 	- 点击按钮以后，选中的变成没选中，没选中的变成选中
    				 */
    				//3.#checkedRevBtn
    				var checkedRevBtn = document.getElementById("checkedRevBtn");
    				checkedRevBtn.onclick = function() {
    					//将checkedAllBox设置为选中状态
    					checkedAllBox.checked = true;
    					for (var i = 0; i < items.length; i++) {
    						//判断多选框状态
    						/*if(items[i].checked){
    							//证明多选框已选中，则设置为没选中状态
    							items[i].checked = false;
    						}else{
    							//证明多选框没选中，则设置为选中状态
    							items[i].checked = true;
    						}*/
    						items[i].checked = !items[i].checked;
    						//判断四个多选框是否全选
    						//只要有一个没选中则就不是全选
    						if (!items[i].checked) {
    							//一旦进入判断，则证明不是全选状态
    							//将checkedAllBox设置为没选中状态
    							checkedAllBox.checked = false;
    						}
    					}
    					//在反选时也需要判断四个多选框是否全都选中
    				};
    
    
    				/*
    				 * 提交按钮：
    				 * 	- 点击按钮以后，将所有选中的多选框的value属性值弹出
    				 */
    				//4.#sendBtn
    				//为sendBtn绑定单击响应函数
    				var sendBtn = document.getElementById("sendBtn");
    				sendBtn.onclick = function() {
    					//遍历items
    					for (var i = 0; i < items.length; i++) {
    						//判断多选框是否选中
    						if (items[i].checked) {
    							alert(items[i].value);
    						}
    					}
    				};
    
    
    				//5.#checkedAllBox
    				/*
    				 * 全选/全不选 多选框
    				 * 	- 当它选中时，其余的也选中；当它取消时 其余的也取消
    				 * 
    				 * 在事件的响应函数中，响应函数是给谁绑定的this就是谁
    				 */
    				//为checkedAllBox绑定单击响应函数
    				checkedAllBox.onclick = function() {
    					// alert(this === checkedAllBox); // true
    					//设置多选框的选中状态
    					for (var i = 0; i < items.length; i++) {
    						items[i].checked = this.checked;
    					}
    				};
    
    
    				//6.items
    				/*
    				 * 如果四个多选框全都选中，则checkedAllBox也应该选中
    				 * 如果四个多选框没都选中，则checkedAllBox也不应该选中
    				 */
    				//为四个多选框分别绑定点击响应函数
    				for (var i = 0; i < items.length; i++) {
    					items[i].onclick = function() {
    						//将checkedAllBox设置为选中状态
    						checkedAllBox.checked = true;
    						for (var j = 0; j < items.length; j++) {
    							//判断四个多选框是否全选
    							//只要有一个没选中则就不是全选
    							if (!items[j].checked) {
    								//一旦进入判断，则证明不是全选状态
    								//将checkedAllBox设置为没选中状态
    								checkedAllBox.checked = false;
    								//一旦进入判断，则已经得出结果，不用再继续执行循环
    								break;
    							}
    						}
    					};
    				}
    
    			};
    		</script>
    	</head>
    	<body>
    		<form method="post" action="">
    			你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
    			<br />
    			<input type="checkbox" name="items" value="足球" />足球
    			<input type="checkbox" name="items" value="篮球" />篮球
    			<input type="checkbox" name="items" value="羽毛球" />羽毛球
    			<input type="checkbox" name="items" value="乒乓球" />乒乓球
    			<br />
    			<input type="button" id="checkedAllBtn" value="全　选" />
    			<input type="button" id="checkedNoBtn" value="全不选" />
    			<input type="button" id="checkedRevBtn" value="反　选" />
    			<input type="button" id="sendBtn" value="提　交" />
    		</form>
    	</body>
    </html>

# P101 101.尚硅谷\_JS基础\_dom查询的剩余方法 21:42 #

## document.getElementsByTagName("body")\[0\];   document.body; ##

## document.documentElement; ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 18][]

## document.all   document.getElementsByTagName("\*") ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 19][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 20][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 21][]

## getElementsByClassName()：根据元素的class属性值查询一组元素节点对象 ##

> 根据元素的class属性值查询一组元素节点对象，getElementsByClassName()可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8及以下的浏览器。
> 
> ![20210121195939472.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 22][]

## document.querySelector() ##

> **document.querySelector()**
> 
> 1.  需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象。
> 2.  虽然IE8中没有getElementsByClassName()，但是可以使用querySelector()代替。
> 3.  使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 23][]

## document.querySelectorAll() ##

> **document.querySelectorAll()**
> 
> 1.  该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回。
> 2.  即使符合条件的元素只有一个，它也会返回数组。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 24][]

# P102 102.尚硅谷\_JS基础\_dom增删改 33:15 #

## DOM方法 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 25][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 26][]

## DOM 增删改 案例 ##

### 1、创建一个"广州"节点,添加到\#city下 ###

> **document.createElement()**
> 
> 1.  可以用于创建一个元素节点对象，
> 2.  它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
> 3.  并将创建好的对象作为返回值返回。
> 
> **document.createTextNode()**
> 
> 1.  可以用来创建一个文本节点对象，
> 2.  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回。
> 
> **appendChild()**
> 
> 1.  向一个父节点中添加一个新的子节点
> 2.  用法：父节点.appendChild(子节点);

> ![20210121204632755.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 27][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 28][]

### 2、将"广州"节点插入到\#bj前面 ###

> **insertBefore()**
> 
> 1.  可以在指定的子节点前插入新的子节点
> 2.  语法：父节点.insertBefore(新节点,旧节点);

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 29][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 30][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 31][]

### 3、使用"广州"节点替换\#bj节点 ###

> **replaceChild()**
> 
> 1.  可以使用指定的子节点替换已有的子节点
> 2.  语法：父节点.replaceChild(新节点,旧节点);

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 32][]

### 4、删除\#bj节点 ###

> **removeChild()**
> 
> 1.  可以删除一个子节点
> 2.  语法：父节点.removeChild(子节点);
> 3.  子节点.parentNode.removeChild(子节点); // 更方便

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 33][]

### 5、读取\#city内的HTML代码 ###

> ![20210121210357736.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 34][]

### 6、设置\#bj内的HTML代码 ###

> ![20210121210657309.png][]

### 7、创建一个"广州"节点，添加到\#city下 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 35][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 36][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 37][]

# P103 103.尚硅谷\_JS基础\_添加删除记录-删除 21:46 #

## 取消超链接的默认跳转行为 ##

> 两种方式都可以！
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 38][]
> 
> ![2021012206125045.png][]

## window 对象方法 ##

> ![20210122061758946.png][]

## 删除dom元素 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 39][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 40][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 41][]

> 2021年1月22日，5：14就醒了，5：55起床~

[Link 1]: http://www.gulixueyuan.com/my/course/58
[JavaScript_140_JS]: https://www.bilibili.com/video/BV1YW411T7GX
[JavaScript_JavaScript_140_JS]: https://blog.csdn.net/weixin_44949135/article/details/108621932
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210121163501889.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221119/003903444e1348669e3c7b378b2df388.png
[2021012116245788.png]: /images/20221119/f006bb4eb9c24713ac2614e0d98ff9b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210121163558872.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221119/83624438e1cd477594c33d6b2f212e89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221119/51ff990550594f458b8783fa53a6df0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210121165926879.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210121165640734.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210121165758337.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210121170829960.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210121170839541.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/2021012117103792.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210121181644110.png]: https://img-blog.csdnimg.cn/20210121181644110.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210121171650234.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20210121171903833.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20210121175728828.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20210121175744904.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20210121175949332.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20210121181521533.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20210121181413495.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210121181622245.png]: https://img-blog.csdnimg.cn/20210121181622245.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20210121194658651.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20210121195209130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/20210121195359144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20210121195626205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210121195939472.png]: https://img-blog.csdnimg.cn/20210121195939472.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/2021012120030940.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 23]: https://img-blog.csdnimg.cn/2021012120120575.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 24]: https://img-blog.csdnimg.cn/20210121201614213.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 25]: https://img-blog.csdnimg.cn/20210121203330823.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 26]: https://img-blog.csdnimg.cn/2021012120342368.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210121204632755.png]: https://img-blog.csdnimg.cn/20210121204632755.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 27]: https://img-blog.csdnimg.cn/20210121205124799.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 28]: https://img-blog.csdnimg.cn/20210121204741471.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 29]: https://img-blog.csdnimg.cn/20210121205036969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 30]: https://img-blog.csdnimg.cn/20210121205301207.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 31]: https://img-blog.csdnimg.cn/20210121205317880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 32]: https://img-blog.csdnimg.cn/20210121205527368.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 33]: https://img-blog.csdnimg.cn/20210121210126126.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210121210357736.png]: https://img-blog.csdnimg.cn/20210121210357736.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 34]: https://img-blog.csdnimg.cn/20210121210428483.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210121210657309.png]: https://img-blog.csdnimg.cn/20210121210657309.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 35]: https://img-blog.csdnimg.cn/20210121211711616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 36]: https://img-blog.csdnimg.cn/20210121211408581.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 37]: https://img-blog.csdnimg.cn/20210121211600887.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 38]: https://img-blog.csdnimg.cn/2021012206122430.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[2021012206125045.png]: https://img-blog.csdnimg.cn/2021012206125045.png
[20210122061758946.png]: https://img-blog.csdnimg.cn/20210122061758946.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 39]: https://img-blog.csdnimg.cn/2021012206314371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 40]: https://img-blog.csdnimg.cn/20210122063201240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 41]: https://img-blog.csdnimg.cn/20210122062353376.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70