JavaScript学习笔记05【高级——DOM对象】

た入场券 2022-10-29 04:27 194阅读 0赞

>  *  **w3school 在线教程：[https://www.w3school.com.cn][https_www.w3school.com.cn]**
> 
> 1.  [JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】][JavaScript_01]【day01】
> 2.  [JavaScript学习笔记02【基础——对象（Function、Array、Date、Math、RegExp、Global）】][JavaScript_02_Function_Array_Date_Math_RegExp_Global]【day01】
> 3.  [JavaScript学习笔记03【基础——对象（RegExp、Global）】][JavaScript_03_RegExp_Global]【day01】
> 4.  [JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】][JavaScript_04_DOM_BOM]【day02】
> 5.  [JavaScript学习笔记05【高级——DOM对象】][JavaScript_05_DOM]【day02】
> 6.  [JavaScript学习笔记06【高级——JavaScript中的事件】][JavaScript_06_JavaScript]【day02】

**目录**

09 DOM对象

DOM\_概述

HTML DOM树

DOM、XML DOM、HTML DOM

DOM\_Document对象\_获取Element

XML DOM Document 对象

DOM\_Document对象\_创建DOM

DOM\_Element对象

DOM\_Node对象

XML DOM - Node 对象

案例4\_动态表格\_添加

案例4\_动态表格\_删除

HTML\_DOM\_innerHTML

案例4\_动态表格——innerHTML简写版

HTML\_DOM\_样式控制

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

# 09 DOM对象 #

## DOM\_概述 ##

> \* 概念： Document Object Model 文档对象模型  
>     \* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
> 
> \* W3C DOM 标准被分为 3 个不同的部分：
> 
>     \* 核心 DOM - 针对任何结构化文档的标准模型  
>         \* Document：文档对象  
>         \* Element：元素对象  
>         \* Attribute：属性对象  
>         \* Text：文本对象  
>         \* Comment：注释对象
> 
>         \* Node：节点对象，其他5个的父对象  
>     \* XML DOM - 针对 XML 文档的标准模型  
>     \* HTML DOM - 针对 HTML 文档的标准模型  
> \* 核心DOM模型：  
>     \* Document：文档对象  
>     \* Element：元素对象  
>     \* Node：节点对象，其他5个的父对象  
> \* HTML DOM

### HTML DOM树 ###

> ![20210208212444888.png][]

### DOM、XML DOM、HTML DOM ###

> ![2021020821181422.png][]
> 
> ![20210208211923763.png][]

## DOM\_Document对象\_获取Element ##

> Document：文档对象  
>     1. 创建(获取)：在html dom模型中可以使用window对象来获取  
>         1. window.document  
>         2. document  
>     2. 方法：  
>         1. 获取Element对象：  
>             1. getElementById()：根据id属性值获取元素对象。id属性值一般唯一。  
>             2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组。  
>             3. getElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组。  
>             4. getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组。  
>         2. 创建其他DOM对象  
>     3. 属性

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]

### XML DOM Document 对象 ###

> XML DOM、HTML DOM 是 “核心 DOM”的拓展。学习 核心DOM模型，需要查看XML DOM，因为 HTML DOM 对 “核心 DOM” 做的修改 较多。
> 
> ![20210209120901251.png][]
> 
> ![20210209120932359.png][]
> 
> ![20210209120955300.png][]
> 
> ![20210209121030436.png][]

## DOM\_Document对象\_创建DOM ##

> ![20210209122401749.png][]

## DOM\_Element对象 ##

> \* 核心DOM模型：  
>     \* Element：元素对象  
>         1. 获取/创建：通过document来获取和创建  
>         2. 方法：  
>             1. removeAttribute()：删除属性  
>             2. setAttribute()：设置属性

> ![20210209123443671.png][]  ![20210209123451269.png][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Element对象</title>
    	</head>
    	<body>
    		<a>点我试一试</a>
    		<input type="button" id="btn_set" value="设置属性">
    		<input type="button" id="btn_remove" value="删除属性">
    		<script>
    			//获取btn
    			var btn_set = document.getElementById("btn_set");
    			btn_set.onclick = function() {
    				//1.获取a标签
    				var element_a = document.getElementsByTagName("a")[0];
    				element_a.setAttribute("href", "https://www.baidu.com");
    			}
    
    			//获取btn
    			var btn_remove = document.getElementById("btn_remove");
    			btn_remove.onclick = function() {
    				//1.获取a标签
    				var element_a = document.getElementsByTagName("a")[0];
    				element_a.removeAttribute("href");
    			}
    		</script>
    	</body>
    </html>

## DOM\_Node对象 ##

> \* 核心DOM模型：  
>     \* Node：节点对象，其他5个的父对象。  
>         \* 特点：所有dom对象都可以被认为是一个节点。  
>         \* 方法：  
>             \* CRUD dom树：  
>                 \* appendChild()：向节点的子节点列表的结尾添加新的子节点。  
>                 \* removeChild()：删除（并返回）当前节点的指定子节点。  
>                 \* replaceChild()：用新节点替换一个子节点。  
>         \* 属性：  
>             \* parentNode：返回节点的父节点。

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][] ![2021020912540382.png][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Node对象</title>
    		<style>
    			div {
    				border: 1px solid red;
    			}
    			#div1 {
    				width: 200px;
    				height: 200px;
    			}
    			#div2 {
    				width: 100px;
    				height: 100px;
    			}
    			#div3 {
    				width: 100px;
    				height: 100px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="div1">
    			<div id="div2">div2</div>
    			div1
    		</div>
    		<a href="javascript:void(0);" id="del">删除子节点</a>
    		<a href="javascript:void(0);" id="add">添加子节点</a>
    		
    		<script>
    			//1.获取超链接
    			var element_a = document.getElementById("del");
    			//2.绑定单击事件
    			element_a.onclick = function() {
    				var div1 = document.getElementById("div1");
    				var div2 = document.getElementById("div2");
    				div1.removeChild(div2);
    			}
    
    			//1.获取超链接
    			var element_add = document.getElementById("add");
    			//2.绑定单击事件
    			element_add.onclick = function() {
    				var div1 = document.getElementById("div1");
    				//给div1添加子节点
    				//创建div节点
    				var div3 = document.createElement("div");
    				div3.setAttribute("id", "div3");
    
    				div1.appendChild(div3);
    			}
    			/*
    			    超链接功能：
    			        1.可以被点击：样式
    			        2.点击后跳转到href指定的url
    			    需求：保留1功能，去掉2功能
    			    实现：href="javascript:void(0);"
    			 */
    			var div2 = document.getElementById("div2");
    			var div1 = div2.parentNode;
    			alert(div1); // [object HTMLDivElement]
    		</script>
    	</body>
    </html>

### XML DOM - Node 对象 ###

> ![2021020912364365.png][]
> 
> ![20210209123753873.png][]
> 
> ![20210209123853959.png][]

## 案例4\_动态表格\_添加 ##

> 分析：  
>     1.添加：  
>         1. 给添加按钮绑定单击事件  
>         2. 获取文本框的内容  
>         3. 创建td，设置td的文本为文本框的内容。  
>         4. 创建tr  
>         5. 将td添加到tr中  
>         6. 获取table，将tr添加到table中

> ![20210209130524548.png][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>动态表格</title>
    	<style>
    		table {
    			border: 1px solid;
    			margin: auto;
    			width: 500px;
    		}
    		td, th {
    			text-align: center;
    			border: 1px solid;
    		}
    		div {
    			text-align: center;
    			margin: 50px;
    		}
    	</style>
    </head>
    <body>
    	<div>
    		<input type="text" id="id" placeholder="请输入编号">
    		<input type="text" id="name" placeholder="请输入姓名">
    		<input type="text" id="gender" placeholder="请输入性别">
    		<input type="button" value="添加" id="btn_add">
    	</div>
    	<table>
    		<caption>学生信息表</caption>
    		<tr>
    			<th>编号</th>
    			<th>姓名</th>
    			<th>性别</th>
    			<th>操作</th>
    		</tr>
    		<tr>
    			<td>1</td>
    			<td>令狐冲</td>
    			<td>男</td>
    			<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    		</tr>
    		<tr>
    			<td>2</td>
    			<td>任我行</td>
    			<td>男</td>
    			<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    		</tr>
    		<tr>
    			<td>3</td>
    			<td>岳不群</td>
    			<td>?</td>
    			<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    		</tr>
    	</table>
    	<script>
    		//1.获取按钮
    		document.getElementById("btn_add").onclick = function () {
    			//2.获取文本框的内容
    			var id = document.getElementById("id").value;
    			var name = document.getElementById("name").value;
    			var gender = document.getElementById("gender").value;
    
    			//3.创建td，赋值td的标签体
    			//id 的 td
    			var td_id = document.createElement("td");
    			var text_id = document.createTextNode(id);
    			td_id.appendChild(text_id);
    			//name 的 td
    			var td_name = document.createElement("td");
    			var text_name = document.createTextNode(name);
    			td_name.appendChild(text_name);
    			//gender 的 td
    			var td_gender = document.createElement("td");
    			var text_gender = document.createTextNode(gender);
    			td_gender.appendChild(text_gender);
    			//a标签的td
    			var td_a = document.createElement("td");
    			var ele_a = document.createElement("a");
    			ele_a.setAttribute("href", "javascript:void(0);");
    			ele_a.setAttribute("onclick", "delTr(this);");
    			var text_a = document.createTextNode("删除");
    			ele_a.appendChild(text_a);
    			td_a.appendChild(ele_a);
    
    			//4.创建tr
    			var tr = document.createElement("tr");
    			//5.添加td到tr中
    			tr.appendChild(td_id);
    			tr.appendChild(td_name);
    			tr.appendChild(td_gender);
    			tr.appendChild(td_a);
    			//6.获取table
    			var table = document.getElementsByTagName("table")[0];
    			table.appendChild(tr);
    		}
    	</script>
    </body>
    </html>

## 案例4\_动态表格\_删除 ##

> 分析：  
>     1.添加：  
>         1. 给添加按钮绑定单击事件  
>         2. 获取文本框的内容  
>         3. 创建td，设置td的文本为文本框的内容。  
>         4. 创建tr  
>         5. 将td添加到tr中  
>         6. 获取table，将tr添加到table中  
>     2.删除：  
>         1.确定点击的是哪一个超链接  
>             <a href="javascript:void(0);" οnclick="delTr(this);" >删除</a>  
>         2.怎么删除？  
>             removeChild()：通过父节点删除子节点

> ![20210209131531668.png][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]
> 
> ![20210209131859661.png][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>动态表格</title>
    		<style>
    			table {
    			border: 1px solid;
    			margin: auto;
    			width: 500px;
    		}
    		td, th {
    			text-align: center;
    			border: 1px solid;
    		}
    		div {
    			text-align: center;
    			margin: 50px;
    		}
    	</style>
    	</head>
    	<body>
    		<div>
    			<input type="text" id="id" placeholder="请输入编号">
    			<input type="text" id="name" placeholder="请输入姓名">
    			<input type="text" id="gender" placeholder="请输入性别">
    			<input type="button" value="添加" id="btn_add">
    		</div>
    		<table>
    			<caption>学生信息表</caption>
    			<tr>
    				<th>编号</th>
    				<th>姓名</th>
    				<th>性别</th>
    				<th>操作</th>
    			</tr>
    			<tr>
    				<td>1</td>
    				<td>令狐冲</td>
    				<td>男</td>
    				<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    			</tr>
    			<tr>
    				<td>2</td>
    				<td>任我行</td>
    				<td>男</td>
    				<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    			</tr>
    			<tr>
    				<td>3</td>
    				<td>岳不群</td>
    				<td>?</td>
    				<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    			</tr>
    		</table>
    		<script>
    			//1.获取按钮
    			document.getElementById("btn_add").onclick = function() {
    				//2.获取文本框的内容
    				var id = document.getElementById("id").value;
    				var name = document.getElementById("name").value;
    				var gender = document.getElementById("gender").value;
    
    				//3.创建td，赋值td的标签体
    				//id 的 td
    				var td_id = document.createElement("td");
    				var text_id = document.createTextNode(id);
    				td_id.appendChild(text_id);
    				//name 的 td
    				var td_name = document.createElement("td");
    				var text_name = document.createTextNode(name);
    				td_name.appendChild(text_name);
    				//gender 的 td
    				var td_gender = document.createElement("td");
    				var text_gender = document.createTextNode(gender);
    				td_gender.appendChild(text_gender);
    				//a标签的td
    				var td_a = document.createElement("td");
    				var ele_a = document.createElement("a");
    				ele_a.setAttribute("href", "javascript:void(0);");
    				ele_a.setAttribute("onclick", "delTr(this);");
    				var text_a = document.createTextNode("删除");
    				ele_a.appendChild(text_a);
    				td_a.appendChild(ele_a);
    
    				//4.创建tr
    				var tr = document.createElement("tr");
    
    				//5.添加td到tr中
    				tr.appendChild(td_id);
    				tr.appendChild(td_name);
    				tr.appendChild(td_gender);
    				tr.appendChild(td_a);
    
    				//6.获取table
    				var table = document.getElementsByTagName("table")[0];
    				table.appendChild(tr);
    			}
    
    			//删除方法
    			function delTr(obj) {
    				//this代表当前超链接对象
    				//obj.parentNode：td；
    				var tr = obj.parentNode.parentNode;
    				var table = obj.parentNode.parentNode.parentNode;
    				table.removeChild(tr);
    			}
    		</script>
    	</body>
    </html>

## HTML\_DOM\_innerHTML ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

### 案例4\_动态表格——innerHTML简写版 ###

> \* HTML DOM  
>     1. 标签体的设置和获取：innerHTML  
>     2. 使用html元素对象的属性  
>     3. 控制元素样式

> ![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>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>动态表格</title>
    		<style>
    			table {
    			border: 1px solid;
    			margin: auto;
    			width: 500px;
    		}
    		td, th {
    			text-align: center;
    			border: 1px solid;
    		}
    		div {
    			text-align: center;
    			margin: 50px;
    		}
    	</style>
    	</head>
    	<body>
    		<div>
    			<input type="text" id="id" placeholder="请输入编号">
    			<input type="text" id="name" placeholder="请输入姓名">
    			<input type="text" id="gender" placeholder="请输入性别">
    			<input type="button" value="添加" id="btn_add">
    		</div>
    		<table>
    			<caption>学生信息表</caption>
    			<tr>
    				<th>编号</th>
    				<th>姓名</th>
    				<th>性别</th>
    				<th>操作</th>
    			</tr>
    			<tr>
    				<td>1</td>
    				<td>令狐冲</td>
    				<td>男</td>
    				<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    			</tr>
    			<tr>
    				<td>2</td>
    				<td>任我行</td>
    				<td>男</td>
    				<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    			</tr>
    			<tr>
    				<td>3</td>
    				<td>岳不群</td>
    				<td>?</td>
    				<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    			</tr>
    		</table>
    		<script>
    			//使用innerHTML添加
    			document.getElementById("btn_add").onclick = function() {
    				//获取文本框的内容
    				var id = document.getElementById("id").value;
    				var name = document.getElementById("name").value;
    				var gender = document.getElementById("gender").value;
    				//获取table
    				var table = document.getElementsByTagName("table")[0];
    				//追加一行
    				table.innerHTML += "<tr>\n" +
    					"        <td>" + id + "</td>\n" +
    					"        <td>" + name + "</td>\n" +
    					"        <td>" + gender + "</td>\n" +
    					"        <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" +
    					"    </tr>";
    			}
    
    			//删除方法
    			function delTr(obj) {
    				//this代表当前超链接对象
    				//obj.parentNode：td；
    				var tr = obj.parentNode.parentNode;
    				var table = obj.parentNode.parentNode.parentNode;
    				table.removeChild(tr);
    			}
    		</script>
    	</body>
    </html>

## HTML\_DOM\_样式控制 ##

> \* HTML DOM  
>     1. 标签体的设置和获取：innerHTML  
>     2. 使用html元素对象的属性  
>     3. 控制元素样式  
>         1. 使用元素的style属性来设置  
>             如：  
>                 //修改样式方式1  
>                 div1.style.border = "1px solid red";  
>                 div1.style.width = "200px";  
>                 //font-size--> fontSize  
>                 div1.style.fontSize = "20px";  
>         2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

> ![202102091349194.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>控制样式</title>
    		<style>
    			.d1 {
    				border: 1px solid red;
    				width: 100px;
    				height: 100px;
    			}
    			.d2 {
    				border: 1px solid blue;
    				width: 200px;
    				height: 200px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="div1">
    			div1
    		</div>
    		<div id="div2">
    			div2
    		</div>
    		<script>
    			var div1 = document.getElementById("div1");
    			div1.onclick = function() {
    				//修改样式方式1
    				div1.style.border = "1px solid red";
    				div1.style.width = "200px";
    				//font-size --> fontSize
    				div1.style.fontSize = "20px";
    			}
    			var div2 = document.getElementById("div2");
    			div2.onclick = function() {
    				div2.className = "d1";
    			}
    		</script>
    	</body>
    </html>

> 加油~

[https_www.w3school.com.cn]: https://www.w3school.com.cn/
[JavaScript_01]: https://blog.csdn.net/weixin_44949135/article/details/113743848
[JavaScript_02_Function_Array_Date_Math_RegExp_Global]: https://blog.csdn.net/weixin_44949135/article/details/113743896
[JavaScript_03_RegExp_Global]: https://blog.csdn.net/weixin_44949135/article/details/113759141
[JavaScript_04_DOM_BOM]: https://blog.csdn.net/weixin_44949135/article/details/113760098
[JavaScript_05_DOM]: https://blog.csdn.net/weixin_44949135/article/details/113755835
[JavaScript_06_JavaScript]: https://blog.csdn.net/weixin_44949135/article/details/113769752
[20210208212444888.png]: /images/20221024/1b6e2e0895c146e981e115e0ae9366a9.png
[2021020821181422.png]: /images/20221024/be4ac04d7c684bbcaf08e7bf06c4b453.png
[20210208211923763.png]: /images/20221024/94692e4f781b431096a96a22efcad699.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221024/c92c7cb02faa4944a27d5664340532c5.png
[20210209120901251.png]: /images/20221024/4e955229a70e4527ac812f49e41c5ef2.png
[20210209120932359.png]: /images/20221024/5de3603d88a74ba39d89bd01ec2bd094.png
[20210209120955300.png]: /images/20221024/cc266a9a24b0475b9f677ef0c0e60c9d.png
[20210209121030436.png]: /images/20221024/0c55eb337aed430e97843bc9e0f144c1.png
[20210209122401749.png]: /images/20221024/76ec3c83804641889f132b45e1b7223f.png
[20210209123443671.png]: https://img-blog.csdnimg.cn/20210209123443671.png
[20210209123451269.png]: /images/20221024/42fc508884f04e2b823decbcab9108a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210209124843263.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[2021020912540382.png]: /images/20221024/9eb9e2ecd3cb4e4ab1bf7aad212325a4.png
[2021020912364365.png]: /images/20221024/54f2b7f954224fbeafee6e163f6deb25.png
[20210209123753873.png]: /images/20221024/cb8064ab4be34f12997a981fce3daadf.png
[20210209123853959.png]: /images/20221024/6a0f9331f3654c96b58be0d87ad24db3.png
[20210209130524548.png]: https://img-blog.csdnimg.cn/20210209130524548.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/2bfa1f63ab51443883dcc0187a00894a.png
[20210209131531668.png]: /images/20221024/5ab74df076ec449aaa8275ab639aff99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/4b3fe0d2518b48b58cd512ad0a7c534d.png
[20210209131859661.png]: /images/20221024/21480a94300e4f3bad634ba252b7adca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/364da51a8da14f539a29adca8b6eec62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/f762e984fae1465391d130c490bbe767.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/6ed89cd775a4482d921a7a035b12ebf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/b8b0f224e89648668416f057656c671e.png
[202102091349194.png]: /images/20221024/658604ca49284834a62d04fa72a77ed2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/5325c406558d4f5ba44943fb1a3ff09d.png