JavaScript之BOM和DOM入门

朴灿烈づ我的快乐病毒、 2022-12-20 11:22 90阅读 0赞

### **JavaScript之BOM和DOM入门** ###

JavaScript的组成包含三大部分，分别为ECMAScript、DOM和BOM。JavaScript组成，如下图所示：

![20201112074617851.png][]

ECMAScript是JavaScript语言的规范，它描述了JavaScript语言的基本语法和数据类型等，见前面的文章，本文主要要介绍DOM和BOM。

浏览器对象模型BOM(Browser Object Model)主要用于管理窗口与窗口之间的通讯。其核心对象是window；window是Javascript顶层对象，表示浏览器的一个实例。它既是JavaScript访问浏览器窗口的一个接口，又是ECMScript规定的Global对象。其他BOM对象均为window对象的子对象，被作为window对象的属性来引用。

BOM 描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持等。

文档对象模型DOM(Document Object Model)，用于表示和操作HTML文档内容的基础API;

DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

DOM 描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。

☆BOM

浏览器对象模型（Browser Object Model，简称BOM）是对浏览器窗口进行访问和操作的功能接口。例如，弹出新的浏览器窗口、获取浏览器信息等。注意，BOM是作为JavaScript的一部分而不是作为W3C组织的标准，每款浏览器都有自己的实现方式，这会导致BOM代码的兼容性不如ECMAScript和DOM代码的兼容性。

对象层次结构参见下图，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70][]

从上图可以看出：DOM是属于BOM的一部分（Document 对象是 Window 对象的一部分）：DOM的最根本的对象document是BOM的最根本window对象的子对象。

window对象是BOM的顶层(核心)对象，它表示浏览器的一个实例，对于每个打开的窗口，系统都会自动为其定义window对象。或者说，Window 对象表示浏览器中打开的窗口。其它对象都是通过它延伸出来的，也可以称为window的子对象。

window对象既是ECMAScript规范中的Global对象，也是BOM中的顶级对象；window对象是相对于web浏览器而言的，依赖于浏览器。

global对象可以说是ECMAScript中对特别的一个对象了，因为不管你从什么角度上看，这个对象都是不存在的。从某种意义上讲，它是一个终极的“兜底儿对象”，换句话说呢，就是不属于任何其他对象的属性和方法，最终都是它的属性和方法。比如isNaN()、parseInt()以及parseFloat()等，实际都是它的方法；还有就是常见的一些特殊值，如：NaN、undefined等都是它的属性，以及一些构造函数Object、Array等也都是它的方法。总之，记住一点：global对象就是“老祖宗”，所有找不到归属的就都是它的。

document对象既是BOM顶级对象的一个属性，也是DOM模型中的顶级对象。文档对象模型（Document Object Model，简称DOM）是针对HTML和XML文档的一个API（（ApplicationProgramming Interface,应用程序编程接口）），现在已经成为表现和操作页面标记的真正的跨平台、语言中立的一种标准。

document对象是window对象的一个属性，是显示于窗口内的一个文档。而window对象则是一个顶层对象，它不是另一个对象的属性。document可以理解为文档，就是你的网页，而window是你的窗口，就是你的浏览器包含的。它们俩在没有框架的情况下可以说是等同的，在有框架的情况下就要区别对待了。

location对象既是window对象的属性，同时也是document对象的属性。换句话说，window.location和document.location引用的是同一个对象。

另一种对象层次结构图示如下，注意，图中有些对象是全小写的，有些是以大写字母开头的。以大写字母开头的对象表示，引用该对象不使用下表列出的名字，而直接用对象的“名字”（Id 或 Name），或用它所属的对象数组指定。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1][]

☆DOM

文档对象模型（Document Object Model，简称DOM）是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口（API）。网页上组织页面（或文档）的对象被组织在一个树形结构中，通过DOM操作的方式可以让页面跟JavaScript进行通信或交互。DOM树展示，如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2][]

DOM用于操控HTML和CSS的标签结构（即节点）——用 DOM API可以轻松地删除、添加和替换节点，从而使开发者对文档的内容和结构具有空前的控制力。

这是很简单的情况，实际上现实使用的要复杂的多。

简单地说，BOM描述了与浏览器进行交互的方法和接口， 是为了操作浏览器出现的 API（应用程序接口），DOM 述了处理网页内容的方法和接口，是为了操作文档出现的 API（应用程序接口），DOM是属于BOM的一部分。

下面介绍BOM和DOM的使用，首先指出，这部分内容很繁杂，在本文中仅选择介绍了我认为比较重要的一部分。

**window对象的使用**

window对象代表当前打开的浏览器窗口，其作为顶级对象。window对象的方法和属性的调用和其它对象一样，区别是window对象不需要创建即可直使用。需要注意的是window对象名称是小写，下面是其属性和方法的调用语法。

window.属性名

window.方法名(参数列表)

并且，因为window是顶级对象，可以省略window不写。

window对象事件

网页加载完毕时激发一个onload事件；

unload事件是在浏览器窗口卸载文档时所激发的事件。

得到焦点是指浏览器窗口为当前的活动窗口，得到焦点时触发窗口对象的focus事件。

使用window对象的open方法可以打开一个新的浏览器窗口，新窗口作为本窗口的子窗口。相应的本窗口作为新窗口的次窗口，并持有对新窗口的一个引用，通过该引用可以适度的操作新窗口。open方法的语法如下：

window.open(url,name,features,replace)

其中,features是描述窗口的特征, replace指明是否允许url替换窗口的内容。详细情况可参见： [https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open][https_developer.mozilla.org_zh-CN_docs_Web_API_Window_open]

例子、在新窗口打开百度，代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function op()

window.open("http://www.baidu.com","baidu","heigth=300,width=200");

</script>

http://www.baidu.com <br>

<label>

</label>

</script>

</body>

</html>

保存文件名为：打开窗口.html

你可以运行之试试。

如果获得一个window对象的引用时，通过该引用去调用其close方法就可以关掉一个与之相关的窗口。通常情况下，父窗口通过这种方式关闭子窗口。语法如下：

窗口名.close()

关闭窗口例子代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function closeWindow()

if(self.closed)

alert("窗口已经关闭")

else

self.close()

</script>

<label>

</label>

</script>

</body>

</html>

保存文件名为：关闭窗口.html

你可以运行之试试。

**屏幕对象 （screen）的使用**

屏幕对象（screen）提供了获取显示器信息的功能，检测显示器参数。显示的参数一般都包括显示面积的宽、高度和色深等，其中宽、高度是比较有意义的，直接与网布局相关，色深只是影响图形色彩的逼真程度 。

显示器分辨率是指显示器所能显示的宽度和高度，通常以像素（pixel）为单位。在实际应用中，为了使制作的网页能适应不同的浏览器环境，最好使用JavaScript程序对用户的显示器进行检测，动态调整网页的布局 。

检测显示器的参数

with (document)

write ("您的屏幕显示设定值如下：<p>");

write ("屏幕的实际高度为", screen.availHeight, "<br>");

write ("屏幕的实际宽度为", screen.availWidth, "<br>");

write ("屏幕的色盘深度为", screen.colorDepth, "<br>");

write ("屏幕区域的高度为", screen.height, "<br>");

write ("屏幕区域的宽度为", screen.width);

</Script>

检测显示器的分辨率

document.write("您的屏幕分辨率是"+screen.width+" \* "+screen.height);   // 分辨率

</script>

**DOM的使用**

下面开始介绍DOM（Document Object Model，文档对象模型）的使用。

Document对象包含当前文档的信息，例如：标题、背景、颜色、表格等。

常用方法：

（1）通过write()/writeln()方法在浏览器中显示内容。

（2）获得当前文档中的元素、属性和节点信息（例如：通过“document.formName”来获得表示页面中的表单名称为fromName的表单对象）。

（3）getElementById()和getElementByTagName()。这两个方法会忽略文档的结构，可查找整个HTML文档中的任何元素（不论它们在文档中所处的位置，例如通过getElementByTagName()可以把文档中所有的<p>元素找到）。

文档对象（document对象），为操作HTML文档提供接口，拥有大量的属性和方法，它有大量的子级对象，例如图像对象、超级接对象、表单对象等等 。不需要手工创建，在文档初时化时就已经由系统内部创建。直接调用其方法或属性即可。

DOM 定义了多种查找元素的方法： getElementById() 、getElementsByName() 和 getElementsByTagName()。

getElementById() 方法的语法：

document.getElementById(elementID)

getElementById() 方法的语法：

document.getElementById(elementID)

其中，elementID 必须，String类型的元素ID属性值。

返回指定ID的元素对象。

获取元素

document文档指整个页面的根对象（最外层对象），通过document文档获取页面中的具体HTML元素。注意document文档的类型为对象类型，即typeof document返回object值，因此，通常document文档亦称document对象。document文档页面的最外层如图所示。

document文档页面的最外层如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3][]

document对象常见属性如下：

document.doctype 用于获取或设置文档头信息

document.documentELement 用于获取或设置<html>标签

document.head 用于获取或设置<head>标签

document.body 用于获取或设置<body>标签

document.title <用于获取或设置title>标签。

可以先通过给元素添加id属性，如：

<… id="xxx" …>

然后，通过document对象的getElementById()方法——把id值通过字符串形式放到此方法的小括号中，获取元素。除了获取元素外，也可以对元素的属性进行设置。

在前面，讲解了DOM操作HTML元素的属性，同样对HTML元素的style属性也能够获取和设置。

getElementById()方法可以获取到指定id的HTML元素。那么，如何获取一个HTML元素集合呢？例如，一组<li>标签。可以通过getElementsByTagName()方法来实现，该方法通过指定HTML标签名的方式来获取。

注意，一组标签即可以在整个document文档下获取，也可以在指定的祖先元素下获取。此方式与getElementById()方法不一样，getElementById()方法只能在document文档下获取，因为id属性具有唯一性，不存在包含关系。

获取到元素集合后，如何去操作？在JavaScript语法中不能直接去操作整体集合，必须分别操作集合的每一项元素。可以通过“\[\]+下标”的方式获取指定集合中的某一项元素，下标从0开始。例如，li\[0\]表示li集合中的第一个元素，li\[1\]表示li集合中的第二个元素。

可以通过集合对象下面的length属性获得集合内元素的个数。获取到集合的长度，再配合循环语句，就可以对一组HTML元素集合操作。

下面给出九九表一个例子

<!doctype html>

<html>

<head>

function secondFunction()\{

var div = document.getElementById("div1");

for (var i = 1; i < 10; i++) \{

for (var j = 1; j <= i; j++) \{

div.innerHTML += j + "\*" + i + "=" + (i\*j) ;

div.innerHTML += "  "

div.innerHTML += "<br>" ;

</script>

</head>

<body>

</body>

</html>

保存文件名为：九九表.html

你可以运行之试试。

From对象：  
Form对象是document下的一个子对象，表示表单对象（From对象）。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4][]

DOM的forms 集合

表单就是<form></form>之间部分，一个网页可以有多对<form></form>即可以有多个表单，JavaScript会为每个表单创建一个Form对象，形成一个forms 集合，并将这些Form对象存放在forms\[\]数组中。

forms 集合返回当前页面所有表单（form）的数组集合。

语法

document.forms\[索引值或表单名字符串\]

如document.forms\[0\] 是你网页中的第一个表单，索引(index)从0开始。

document.forms("form")表示document里名字叫form的那个表单。

文档中的<form>标记确定了文档中文档对象的顺序，这种引用对象的方法就是引用表单的一种方法，因此可以使用表单名来引用。

表单的元素有很多，这些表单元素可以让用户输入文字，如文本框、密码框等；或者让用户选择可选项，如下拉列表框、复选框等；也可以让用户提交信息或重置表单，如提交按钮、重置按钮等；甚至还可以为程序员提供开发上的便利，如隐藏框等。这些都时表单对象的子对象。

form对象中可以使用elements\[\]数组来获得代表这些表单元素的子对象。elements\[\]数组中存放的是各种类型的form对象的子对象，elements\[\]数组中的元素是由<form>标签与</form>标签之间表单元素所组成的，因此可以使用以下代码来获得代表HTML文档中的第1个Form对象中的第2个元素的对象。

表单元素访问方法

var str1=form1.elements\[0\].value;  //元素命名访问方法一

var str2=form1.text3.value; //元素命名访问方法二

var str3=document.forms\[1\].elements\[0\].value; //元素命名访问方法三

代表多行文本框的对象称为textarea对象、代表文本框的对象称为text对象、代表密码框的对象称为password对象。

HTML创建多行文本框示例语句如下：

HTML创建单行文本框示例语句如下：

HTML创建一个密码文本框示例语句如下：

附、HTML元素参考[https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element][https_developer.mozilla.org_zh-CN_docs_Web_HTML_Element]

表单（form）的例子，代码如下：

<!doctype html>  
<html>  
<head>  
<title>表单示例</title>   
<script>        //JavaScript程序  
function img()  
\{  
    for(i=0;i<document.forms\[1\].length-1;i++)  
    \{  
        document.Myform.showMsg.value +=document.forms\[1\].elements\[i\].value+"\\n";  //第i-1个<form>标签   
    \}  
    alert(Myform.showMsg.value); //用对话框的形式显示信息  
\}  
</script>       
</head>       
<body>     
<form name="Myform">       
  <p>显示个人信息</p>       
  <p>              
    <textarea name="showMsg" cols="40" rows="8" ></textarea>  
  </p>              
 </form>              
<form name="form1" method="post" action="">    
  个人信息<br>   
    姓名：<input type="text" name="Name"  >          
  <p>  
    性别：<input type="text" name="sex">             
  </p>  
  <p>  
  学号：<input type="text" name="num">          
  <label>  
  <input type="submit" name="Submit" value="提交" onClick="img()">    
  </label>  
  </p>   
</form>  
</body>  
</html>

保存文件名为：表单（form）的例子.html

你可以运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5][]

DOM中的事件

事件(event)是一些特定动作发生时所发出的信号，此信号发生时可以触发（引发）执行相应的事件处理程序，你可以为事件编写相应的事件处理程序——事件触发时 JavaScript 可以执行一些代码。HTML页（Web页）事件可以是浏览器行为，也可以是用户行为。

【事件驱动程序设计（Event-driven programming）是一种电脑程序设计模型。这种模型的程序运行流程是由用户的动作（如鼠标的按键，键盘的按键动作）或者是由其他程序的消息来决定的。】

JavaScript中使用了异步事件，也就是说：JavaScript中的事件都是异步执行的。

下面是一些常见的HTML事件的列表:

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#555555;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">事件</span></strong></p> </td> 
   <td style="border-color:#555555;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">描述</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;"> <p style="margin-left:0cm;"><span style="color:#333333;">onchange</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#333333;">HTML </span><span style="color:#333333;">元素改变</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;"> <p style="margin-left:0cm;"><span style="color:#333333;">onclick</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#333333;">用户点击</span><span style="color:#333333;"> HTML </span><span style="color:#333333;">元素</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;"> <p style="margin-left:0cm;"><span style="color:#333333;">onmouseover</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#333333;">用户在一个</span><span style="color:#333333;">HTML</span><span style="color:#333333;">元素上移动鼠标</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;"> <p style="margin-left:0cm;"><span style="color:#333333;">onmouseout</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#333333;">用户从一个</span><span style="color:#333333;">HTML</span><span style="color:#333333;">元素上移开鼠标</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;"> <p style="margin-left:0cm;"><span style="color:#333333;">onkeydown</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#333333;">用户按下键盘按键</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;"> <p style="margin-left:0cm;"><span style="color:#333333;">onload</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#333333;">浏览器已完成页面的加载</span></p> </td> 
  </tr> 
 </tbody> 
</table>

事件处理程序的名字以“on”开头。

例１、给按钮绑定点击事件（onclick）

<!DOCTYPE html>

<html>

<head>

<title>给按钮绑定单击事件</title>

function displayDate()

document.getElementById("demo").innerHTML=Date();

</script>

</head>

<body>

<h1>给按钮绑定单击事件（onclick）</h1>

<p id="demo">这是一个段落.</p>

</body>

</html>

保存文件名为：给按钮绑定单击事件.html

运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 6][]

下面简要介绍JS事件触发操作步骤：

[https://www.cnblogs.com/zwjun/p/12628502.html][https_www.cnblogs.com_zwjun_p_12628502.html]

createEvent:创建事件

initEvent：初始化事件

dispatchEvent：调度、发出事件

如：

var e = document.createEvent("HtmlEvents");

e.initEvents("事件名",true,true);

元素对象.dispatchEvent(e);

下面给出完整的例子

例２、JS事件触发示例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</select>

<hr>

var sel = document.getElementById("sel");

var div = document.getElementById("div");

// 设置change事件后处理函数

sel.onchange = function()\{

div.innerHTML = sel.options\[sel.selectedIndex\].text; //拿到选中的option的文本填充到div里

// 触发change事件的函数

function dispatchChange()\{

var changeEvent = document.createEvent("HtmlEvents");

changeEvent.initEvent("change",true,true);

sel.dispatchEvent(changeEvent);

dispatchChange();

</script>

</body>

</html>

保存文件名为：事件触发示例.html

你可以运行测试之。

**附录**、

一、JavaScript之BOM和DOM操作详细总结 [https://blog.csdn.net/weixin\_44170221/article/details/106148480][https_blog.csdn.net_weixin_44170221_article_details_106148480]

二、Window对象基本操作思维导图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 7][]

三、DOM基本操作思维导图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 8][]

[20201112074617851.png]: /images/20221120/a58d4289877d4c63aedf1a59a1e02672.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70]: /images/20221120/955604b3a52247e5820707cb739c7aa8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1]: /images/20221120/61e2071f5e0e4be089e437df7b56653c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201112074617899.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[https_developer.mozilla.org_zh-CN_docs_Web_API_Window_open]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201112074654361.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201124081419826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[https_developer.mozilla.org_zh-CN_docs_Web_HTML_Element]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201123161535495.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2020112014421826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[https_www.cnblogs.com_zwjun_p_12628502.html]: https://www.cnblogs.com/zwjun/p/12628502.html
[https_blog.csdn.net_weixin_44170221_article_details_106148480]: https://blog.csdn.net/weixin_44170221/article/details/106148480
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201125101607898.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201125101445932.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70