JS基础 DOM

ゞ浴缸里的玫瑰 2023-10-06 21:44 7阅读 0赞

#### 阅读目录 ####

*  基础知识
 *   *  文档渲染
     *   *  标签修复
         *  表格处理
         *  标签移动
     *  操作时机
     *  节点对象
     *  原型链
     *  对象特征
 *  常用节点
 *   *  DOCUMENT
     *   *  使用title获取和设置文档标题
         *  获取当前URL
         *  获取域名
         *  获取来源地址
     *  ID 获取元素
     *  links下面展示的是获取所有a标签
     *  anchors 获取锚点集合
     *  images 获取所有图片节点
 *  节点属性
 *   *  nodeType 指以数值返回节点类型
     *  Prototype 使用对象的原型进行检测
     *  nodeName 指定节点的名称
     *  tagName 获取标签节点的名称
     *  nodeValue 获取节点值
     *  树状节点
 *  节点集合
 *   *  length 记录了节点元素的数量
     *  item 根据索引获取元素
     *  namedItem 按 name 或 id 属性来获取元素
 *  动态与静态
 *   *  动态特性
     *  使用静态
 *  遍历节点
 *   *  forOf 遍历迭代对象
     *  forEach 按顺序为数组中的每个元素调用一次函数
     *  call/apply
     *  Array.from 将类数组转换为数组
     *  展开语法，使用点语法转换节点为数组
 *  节点关系
 *   *  基础知识
     *  父节点集合
     *  后代节点集合
 *  标签关系
 *   *  基础知识
     *  按类名获取标签
 *  标签获取
 *   *  getElementById 根据元素的 id 属性获取一个元素节点对象
     *  getElementsByName 返回带有指定名称的对象的集合
     *  getElementsByTagName 用于按标签名获取元素
     *  getElementsByClassName 按class样式属性值获取元素集合
 *  样式选择器
 *   *  querySelectorAll 找出所有匹配的节点后，返回对应的元素节点数组
     *  querySelector 找到一个后立刻返回找到的第一个节点对象，如果没有则返回null
     *  matches 用于检测元素是否是指定的样式选择器匹配
     *  closest
     *  HTMLCollection 与 NodeList 的区别
     *  DOM HTMLCollection
 *  标准属性
 *   *  属性别名
     *  操作属性
     *  多类型
 *  元素特征
 *   *  attributes
     *  自定义特征
     *  属性同步
 *  创建节点
 *   *  append 添加元素
     *  createTextNode 创建文本对象并添加到元素中
     *  createElement 创建标签节点对象
     *  cloneNode 和 document.importNode 用于复制节点对象操作
 *  节点内容
 *   *  innerHTML 向标签中添加 html 内容
     *  outerHTML与innerHTML的区别是包含父标签
     *  textContent与innerText是访问或添加文本内容到元素中
     *  outerText 设置(包括标签 || 不包括标签)对象的文本
     *  insertAdjacentText 将文本插入到元素指定位置
 *  节点管理
 *   *  推荐方法
     *   *  append 在标签内容后面添加新内容
         *  replaceWith 将标签替换为新内容
         *  添加新元素h1到目标元素 \`div\#app\` 里面
         *  将h2移动到h1之前
         *  使用 remove方法可以删除节点
     *  insertAdjacentHTML 将html文本插入到元素指定位置
     *   *  在 \`div\#app\` 前添加HTML文本
     *  insertAdjacentElement() 方法将指定元素插入到元素的指定位置，包括以下位置
     *   *  在 \`div\#app\` 前插入span标签
     *  古老方法
     *  DocumentFragment
     *   *  解决以上问题可以使用以下几种方式
         *  DocumentFragment 特点
 *  表单控制
 *   *  表单查找
 *  样式管理
 *   *  批量设置
     *  classList 对类单独进行控制
     *   *  在元素的原有class上添加新class
         *  移除class列表中的部分class
         *  使用 \`toggle\` 切换类
         *  使用contains检查class是否存在
     *  设置行样式
     *   *  样式属性设置
         *  批量设置行样式
     *  获取样式
     *   *  style 可以使用DOM对象的style属性读取行样式
         *  getComputedStyle 获取所有应用在元素上的样式属性

## 基础知识 ##

操作文档 HTML 的 JS 处理方式为 DOM 即 Document Object Model 文档对象模型。如果对HTML 很了解使用 DOM 并不复杂。

浏览器在加载页面是会生成 DOM 对象，以供我们使用 JS 控制页面元素。

### 文档渲染 ###

浏览器会将HTML文本内容进行渲染，并生成相应的JS对象，同时会对不符规则的标签进行处理。

*  浏览器会将标签规范后渲染页面
 *  目的一让页面可以正确呈现
 *  目的二可以生成统一的JS可操作对象

#### 标签修复 ####

在html中只有内容 wgchen.blog.csdn.net 而没有任何标签时，通过浏览器的 检查 `>` 元素 标签查看会自动修复成以下格式的内容。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_15_color_FFFFFF_t_70_g_se_x_16]  
下面 `H1` 标签结束错误并且属性也没有引号，浏览器在渲染中会进行修复

处理后的结果  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

#### 表格处理 ####

表格 tabel 中不允许有内容，浏览器在渲染过程中会进行处理

<table>
      wgchen.blog.csdn.net
      <tr>
        <td>csdn</td>
      </tr>
    </table>

渲染后会添加t body 标签并将 table 中的字符移出  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

#### 标签移动 ####

所有内容要写在BODY标签中，下面的SCRIPT标签写在了BODY后面，浏览器渲染后也会进行处理。

<body></body>
    <script>
      console.dir('wgchen.blog.csdn.net')
    </script>

渲染后处理的结果  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

### 操作时机 ###

需要保证浏览器已经渲染了内容才可以读取的节点对象，下例将无法读取到节点对象。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
不过我们可以将脚本通过事件放在页面渲染完执行

![在这里插入图片描述][b16cdda91d794597a980e7d41e5ce049.png]  
或使用定时器将脚本设置为异步执行

![在这里插入图片描述][2fd054772ae247ecb814dd4db91dcd76.png]  
也可以放在文档加载后的事件处理函数中

![在这里插入图片描述][239fc2bdd155496b91a0f959722570c5.png]  
或将脚本设置在外部文件并使用 `defer` 属性加载，defer即会等到DOM解析后迟延执行

### 节点对象 ###

JS中操作DOM的内容称为节点对象（node)，即然是对象就包括操作NODE的属性和方法

*  包括12种类型的节点对象
 *  常用节点为document、标签元素节点、文本节点、注释节点
 *  节点均继承自Node类型，所以拥有相同的属性或方法
 *  document是DOM操作的起始节点

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>wgchen</title>
      <link rel="shortcut icon" href="#" />
      <meta name="keywords" content="wgchen.blog.csdn.net">
    </head>
    <body id="wgchen">
      
    </body>
    <script>
    	// document节点 noteType为9
      console.log(document.nodeType)
      
      // 第一个子节点为<!DOCTYPE html>，且nodetype为10
      console.log(document.childNodes.item(0).nodeType)
      
      // body 是标签节点 nodeType为1
      console.log(document.body.nodeType) 
      
      // body的属性节点 nodeType 为2
      console.log(document.body.attributes[0].nodeType)
      
    	// body的第一个节点为文本节点，nodeType为3
      console.log(document.body.childNodes.item(0).nodeType)
      
      // body的第二个节点为注释，nodeType类型为8
      console.log(document.body.childNodes[1].nodeType)
    </script>
    </html>

### 原型链 ###

在浏览器渲染过程中会将文档内容生成为不同的对象，我们来对下例中的 `h1` 标签进行讨论，其他节点情况相似。

*  不同类型节点由专有的构造函数创建对象
 *  使用 `console.dir` 可以打印出DOM节点对象结构
 *  节点也是对象所以也具有JS对象的特征

<h1 id="wgchen">wgchen.blog.csdn.net</h1>
    <script>
      function prototype(el) {
        
        console.dir(el.__proto__)
        el.__proto__ ? prototype(el.__proto__) : ''
      }
      const node = document.getElementById('wgchen')
      prototype(node)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
最终得到的节点的原型链为

<table> 
 <thead> 
  <tr> 
   <th> 原型 </th> 
   <th> 说明 </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> Object </td> 
   <td> 根对象，提供hasOwnProperty等基本对象操作支持 </td> 
  </tr> 
  <tr> 
   <td> EventTarget </td> 
   <td> 提供addEventListener、removeEventListener等事件支持方法 </td> 
  </tr> 
  <tr> 
   <td> Node </td> 
   <td> 提供firstChild、parentNode等节点操作方法 </td> 
  </tr> 
  <tr> 
   <td> Element </td> 
   <td> 提供getElementsByTagName、querySelector等方法 </td> 
  </tr> 
  <tr> 
   <td> HTMLElement </td> 
   <td> 所有元素的基础类，提供childNodes、nodeType、nodeName、className、nodeName等方法 </td> 
  </tr> 
  <tr> 
   <td> HTMLHeadingElement </td> 
   <td> Head标题元素类 </td> 
  </tr> 
 </tbody> 
</table>

我们将上面的方法优化一下，实现提取节点原型链的数组

<h2 id="h2 value">wgchen.blog.csdn.net</h2>
    <input type="text" id="inputId" value="wgchen" />
    <script>
        function prototype(el) {
        
            const prototypes = []
            prototypes.push(el.__proto__)
            prototypes.push(...(el.__proto__ ? prototype(el.__proto__) : []))
            return prototypes
        }
        const h2 = document.querySelector('h2')
        const input = document.querySelector('input')
    
        console.log(prototype(input))
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
下面为标题元素增加两个原型方法，改变颜色与隐藏元素

<h2 onclick="this.color('red')">wgchen.blog.csdn.net</h2>
    <script>
      const h2 = document.querySelector('h2')
      HTMLHeadingElement.prototype = Object.assign(HTMLHeadingElement.prototype, {
        
        color(color) {
        
          this.style.color = color
        },
        hide() {
        
          this.style.display = 'none'
        },
      })
    </script>

![在这里插入图片描述][2aa7c44b3ce04755a7133c5e4f127f22.gif_pic_center]

### 对象特征 ###

即然DOM与我们其他JS创建的对象特征相仿，所以也可以为DOM对象添加属性或方法。

对于系统应用的属性，应该明确含义不应该随意使用，比如 `ID` 是用于标识元素唯一属性，不能用于其他目地。

*  后面会讲到其他解决方案，来自定义属性，ID属性可以直接修改但是不建议这么做

<h2 id="hd">wgchen.blog.csdn.net</h2>
    <script>
    let hd = document.getElementById('hd')
    hd.id = 'wgchen'
    console.log(hd)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 8]  
title 用于显示提示文档也不应该用于其他目地

<div id="hd">wgchen.blog.csdn.net</div>
    <script>
      let hd = document.getElementById('hd')
      hd.title = 'wgchen'
      console.log(hd)
    </script>

![在这里插入图片描述][559d15f979254fc5a67d5fce7bec129e.gif_pic_center]  
下面是为对象合并属性的示例

<div id="hd">wgchen.blog.csdn.net</div>
    <script>
    
    let hd = document.getElementById('hd')
    
    Object.assign(hd, {
        
      //设置标签内容
      innerHTML: 'wgchen',
      color: 'red',
      change() {
        
        this.innerHTML = 'willem'
        this.style.color = this.color
      },
      onclick() {
        
        this.change()
      },
    })
    
    </script>

![在这里插入图片描述][53d74293fa844450a1b505d5757261ca.gif_pic_center]  
使用对象特性更改样式属性

<div id="hd">wgchen.blog.csdn.net</div>
    <script>
      let hd = document.getElementById('hd')
      Object.assign(hd.style, {
        
        color: 'white',
        backgroundColor: 'red',
      })
    </script>

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

## 常用节点 ##

JS 提供了访问常用节点的 api

<table> 
 <thead> 
  <tr> 
   <th> 方法 </th> 
   <th> 说明 </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> document </td> 
   <td> document是DOM操作的起始节点 </td> 
  </tr> 
  <tr> 
   <td> document.documentElement </td> 
   <td> 文档节点即html标签节点 </td> 
  </tr> 
  <tr> 
   <td> document.body </td> 
   <td> body标签节点 </td> 
  </tr> 
  <tr> 
   <td> document.head </td> 
   <td> head标签节点 </td> 
  </tr> 
  <tr> 
   <td> document.links </td> 
   <td> 超链接集合 </td> 
  </tr> 
  <tr> 
   <td> document.anchors </td> 
   <td> 所有锚点集合 </td> 
  </tr> 
  <tr> 
   <td> document.forms </td> 
   <td> form表单集合 </td> 
  </tr> 
  <tr> 
   <td> document.images </td> 
   <td> 图片集合 </td> 
  </tr> 
 </tbody> 
</table>

### DOCUMENT ###

document 是 window 对象的属性，是由 HTMLDocument 类实现的实例。

> document 包含 DocumentType（唯一）或 html元素（唯一）或 comment 等元素

原型链中也包含 Node，所以可以使用有关节点操作的方法如 `nodeType/NodeName`等

console.dir(document.nodeType)
    console.dir(document.nodeName)

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

#### 使用title获取和设置文档标题 ####

//获取文档标题
    console.log(document.title)
    
    //设置文档标签
    document.title = 'wgchen-wgchen.blog.csdn.net'

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 9]

#### 获取当前URL ####

console.log(document.URL)

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 10]

#### 获取域名 ####

console.log(document.domain) // tt.cc

#### 获取来源地址 ####

console.log(document.referrer)

系统针对特定标签提供了快速选择的方式

### ID 获取元素 ###

下面是直接使用 ID 获取元素（这是非标准操作，对浏览器有挑剔）

<div id="app">wgchen</div>
    <script>
      // 直接通过 ID 获取元素（非标准操作）
      console.dir(app)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 1]

### links下面展示的是获取所有a标签 ###

<div name="app">
      <a href="">wgchen.blog.csdn.net</a>
      <a href="">blog</a>
    </div>
    <script>
      const nodes = document.links
      console.dir(nodes)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 11]

### anchors 获取锚点集合 ###

下例是获取锚点集合后能过 锚点 name 属性获取元素

<div>
      <a href="" name="n1">wgchen.blog.csdn.net</a>
      <a href="" name="n2">blog</a>
    </div>
    <script>
      // 通过锚点获取元素
      console.dir(document.anchors.n2)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 12]

### images 获取所有图片节点 ###

下面是获取所有图片节点

<img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <script>
      // 获取所有图片节点
      console.dir(document.images)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 13]

## 节点属性 ##

不同类型的节点拥有不同属性，下面是节点属性的说明与示例

### nodeType 指以数值返回节点类型 ###

<table> 
 <thead> 
  <tr> 
   <th>nodeType</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td>元素节点</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>属性节点</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>文本节点</td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td>注释节点</td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td>document对象</td> 
  </tr> 
 </tbody> 
</table>

下面是节点 nodeType 的示例

<div id="app">
      <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">blog</div>
      <div class="ycc"></div>
    </div>
    <script>
      const node = document.querySelector(`#app`)
      console.log(node.nodeType) //1
      console.log(node.firstChild.nodeType) //3
      console.log(node.attributes.id.nodeType) //2
    
      const xj = document.querySelector('.ycc')
      console.log(xj.childNodes[0].nodeType) //8
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 14]  
下面是根据指定的 nodeType 递归获取节点元素的示例

*  可获取文本、注释、标签等节点元素

博客 wgchen.blog.csdn.net
    <div id="app">
      <ul>
        <li>
          <span></span>
          <span>
            
          </span>
        </li>
        <li><span></span><span></span></li>
        <li><span></span><span></span></li>
      </ul>
    </div>
    
    <script>
      function all(el, nodeType = 1) {
        
        const nodes = []
    
        Array.from(el.childNodes).map(node => {
        
          if (node.nodeType == nodeType) nodes.push(node)
    
          if (node.nodeType == 1) nodes.push(...all(node, nodeType))
        })
        return nodes
      }
      console.log(all(document.body))
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 15]

### Prototype 使用对象的原型进行检测 ###

section 、main、aslide 标签的原型对象为 HTMLElement。

其他非系统标签的原型对象为 HTMLUnknownElement

<h1>wgchen</h1>
    <p>blog</p>
    
    <script>
    
    let h1 = document.querySelector('h1')
    let p = document.querySelector('p')
    console.log(h1 instanceof HTMLHeadingElement) //true
    console.log(p instanceof HTMLHeadingElement) //false
    console.log(p instanceof Element) //true

下例是通过构建函数获取节点的示例

博客 wgchen.blog.csdn.net
    <div id="app">
      <ul>
        <li>
          <span></span>
          <span>
            
          </span>
        </li>
        <li><span></span><span></span></li>
        <li><span></span><span></span></li>
      </ul>
    </div>
    
    <script>
    
    function all(el, prototype) {
        
        const nodes = []
    
        Array.from(el.childNodes).map(node => {
        
          if (node instanceof prototype) nodes.push(node)
          if (node.nodeType == 1) nodes.push(...all(node, prototype))
        })
        return nodes
      }
    
      console.log(all(document.body, HTMLSpanElement))
    
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 16]

### nodeName 指定节点的名称 ###

获取值为大写形式

<table> 
 <thead> 
  <tr> 
   <th>nodeType</th> 
   <th>nodeName</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td>元素名称如DIV</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>属性名称</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>#text</td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td>#comment</td> 
  </tr> 
 </tbody> 
</table>

下面来操作 nodeName

<div id="app">
      <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">blog</div>
      <div class="ycc"></div>
      <span> 博客</span>
    </div>
    <script>
      const div = document.querySelector(`#app`)
      const span = document.querySelector('span')
    
      // 标签节点为大写的标签名DIV
      console.log(div.nodeName)
      console.log(span.nodeName)
    
      // 文本节点为 #text
      console.log(div.firstChild.nodeName)
    
      //属性节点为属性名
      console.log(div.attributes.id.nodeName)
    
      // 注释节点为#comment
      const xj = document.querySelector('.ycc')
      console.log(xj.childNodes[0].nodeName)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 17]

### tagName 获取标签节点的名称 ###

nodeName 可以获取不限于元素的节点名，tagName 仅能用于获取标签节点的名称

*  tagName存在于Element类的原型中
 *  文本、注释节点值为 undefined
 *  获取的值为大写的标签名

<div id="app">
      <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">blog</div>
      <div class="ycc"></div>
      <span> 博客</span>
    </div>
    <script>
      const div = document.querySelector(`#app`)
      const span = document.querySelector('span')
    
      // 标签节点为大写的标签名 如DIV、SPAN
      console.log(div.tagName)
      console.log(span.tagName)
    
      // 文本节点为undefined
      console.log(div.firstChild.tagName)
    
      //属性节点为undefined
      console.log(div.attributes.id.tagName)
    
      // 注释节点为 undefined
      const xj = document.querySelector('.ycc')
      console.log(xj.childNodes[0].tagName)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 18]

### nodeValue 获取节点值 ###

使用 nodeValue 或 data 函数获取节点值，也可以使用节点的 data 属性获取节点内容。

<table> 
 <thead> 
  <tr> 
   <th>nodeType</th> 
   <th>nodeValue</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>属性值</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>文本内容</td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td>注释内容</td> 
  </tr> 
 </tbody> 
</table>

下面来看nodeValue的示例

<div id="app">
      <div class="wgchen">wgchen.blog.csdn.net</div>
      <div class="willem">博客</div>
      <div class="ycc"></div>
    </div>
    
    <script>
    const node = document.querySelector(`#app`)
    
    //标签的 nodeValue 值为 null
    console.log(node.nodeValue)
    
    //属性的 nodeVale 值为属性值
    console.log(node.attributes.id.nodeValue)
    
    //文本的 nodeValue 值为文本内容
    const willem = document.querySelector('.willem')
    console.log(willem.firstChild.nodeValue)
    
    //注释的 nodeValue 值为注释内容
    const xj = document.querySelector('.ycc')
    console.log(xj.childNodes[0].nodeValue)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 19]  
使用 data 属性可以获取文本与注释内容

<div id="app">
      wgchen.blog.csdn.net
      
    </div>
    
    <script>
      const app = document.querySelector('#app')
      console.log(app.childNodes[0].data)
      console.log(app.childNodes[1].data)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 20]

### 树状节点 ###

下面获取标签树状结构即多级标签结构，来加深一下节点的使用

<div id="app">
      <ul>
        <li><span></span><span></span></li>
        <li><span></span><span></span></li>
        <li><span></span><span></span></li>
      </ul>
    </div>
    
    <script>
    function tree(el) {
        
      return Array.from(el.childNodes)
        .filter(node =>node.tagName)
        .map(node => ({
        
          name: node.nodeName,
          children: tree(node),
        }))
    }
    console.log(tree(document.getElementById('app')))
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 21]

## 节点集合 ##

Nodelist 与 HTMLCollection 都是包含多个节点标签的集合，大部分功能也是相同的。

*  getElementsBy… 等方法返回的是 HTMLCollection
 *  querySelectorAll 返回的是 NodeList
 *  NodeList 节点列表是动态的，即内容添加后会动态更新

<div></div>
    <div></div>
    <script>
      //结果为NodeList
      console.log(document.querySelectorAll('div'))
    
      //结果为HTMLCollection
      console.log(document.getElementsByTagName('div'))
    </script>

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

### length 记录了节点元素的数量 ###

Nodelist 与 HTMLCollection 包含 length属性，记录了节点元素的数量。

<div name="app">
      <div id="wgchen">wgchen.com</div>
      <div name="willem">willem.com</div>
    </div>
    <script>
      const nodes = document.getElementsByTagName('div')
      for (let i = 0; i < nodes.length; i++) {
        
        console.log(nodes[i])
      }
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 22]

### item 根据索引获取元素 ###

Nodelist 与 HTMLCollection 提供了 item() 方法来根据索引获取元素

<div name="app">
      <div id="wgchen">wgchen.com</div>
      <div name="willem">willem.com</div>
    </div>
    
    <script>
      const nodes = document.getElementsByTagName('div')
      console.dir(nodes.item(0))
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 23]  
使用数组索引获取更方便

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 24]

### namedItem 按 name 或 id 属性来获取元素 ###

HTMLCollection 具有 namedItem 方法可以按 name 或 id 属性来获取元素。

<div name="app">
      <div id="wgchen">wgchen.com</div>
      <div name="willem">willem.com</div>
    </div>
    
    <script>
    const nodes = document.getElementsByTagName('div')
    
    console.dir(nodes.namedItem('wgchen'))
    console.dir(nodes.namedItem('willem'))
    </script>

也可以使用数组或属性方式获取

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 25]  
数字索引时使用 item 方法，字符串索引时使用 namedItem 或 items 方法。

<h1 id="hd">wgchen.blog.csdn.net</h1>
    <h1 name="xj">博客</h1>
    <script>
      let items = document.getElementsByTagName('h1')
      console.log(items[0])
      console.log(items['xj'])
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 26]

## 动态与静态 ##

通过 getElementsByTagname 等 getElementsBy… 函数获取的 Nodelist 与 HTMLCollection集合是动态的，即有元素添加或移动操作将实时反映最新状态。

*  使用 getElement… 返回的都是动态的集合
 *  使用 querySelectorAll 返回的是静态集合

### 动态特性 ###

下例中通过按钮动态添加元素后，获取的元素集合是动态的，而不是上次获取的固定快照。

<h1>wgchen.blog.csdn.net</h1>
    <h1>blog</h1>
    
    <button id="add">添加元素</button>
    
    <script>
      let elements = document.getElementsByTagName('h1')
      console.log(elements)
      let button = document.querySelector('#add')
      
      button.addEventListener('click', () => {
        
        document.querySelector('body').insertAdjacentHTML('beforeend', '<h1>技术文章</h1>')
        console.log(elements)
      })
    </script>

![在这里插入图片描述][51626497f36b41ce9985eefb83dfca0a.gif_pic_center]  
`document.querySelectorAll` 获取的集合是静态的

<h1>wgchen.blog.csdn.net</h1>
    <h1>blog</h1>
    
    <button id="add">添加元素</button>
    
    <script>
      let elements = document.querySelectorAll('h1')
      console.log(elements.length)
    
      let button = document.querySelector('#add')
    
      button.addEventListener('click', () => {
        
        document.querySelector('body').insertAdjacentHTML('beforeend', '<h1>博客</h1>')
        console.log(elements.length)
      })
    </script>

![在这里插入图片描述][1cccf6b19b0d47b2be1014ecbde86cb7.gif_pic_center]

### 使用静态 ###

如果需要保存静态集合，则需要对集合进行复制。

<div id="wgchen">wgchen.blog.csdn.net</div>
    <div name="willem">博客</div>
    <script>
      const nodes = document.getElementsByTagName('div')
      const clone = Array.prototype.slice.call(nodes)
      console.log(nodes.length);//2
      
      document.body.appendChild(document.createElement('div'))
      console.log(nodes.length);//3
      console.log(clone.length);//2
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 27]

## 遍历节点 ##

### forOf 遍历迭代对象 ###

Nodelist与HTMLCollection是类数组的可迭代对象所以可以使用 `for...of` 进行遍历。

<div id="wgchen">wgchen.blog.csdn.net</div>
    <div name="willem">博客</div>
    <script>
      const nodes = document.getElementsByTagName('div')
      for (const item of nodes) {
        
        console.log(item)
      }
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 28]

### forEach 按顺序为数组中的每个元素调用一次函数 ###

`forEach()`方法按顺序为数组中的每个元素调用一次函数。  
注释：对于没有值的数组元素，不执行 `forEach()` 方法。

Nodelist节点列表也可以使用 forEach 来进行遍历，但HTMLCollection则不可以。

<div id="wgchen">wgchen.blog.csdn.net</div>
    <div name="willem">博客</div>
    <script>
      const nodes = document.querySelectorAll('div')
      nodes.forEach((node, key) => {
        
        console.log(node)
      })
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 29]

### call/apply ###

节点集合对象原型中不存在map方法，但可以借用Array的原型map方法实现遍历。

<div id="wgchen">wgchen.blog.csdn.net</div>
    <div name="willem">博客</div>
    <script>
      const nodes = document.querySelectorAll('div')
      Array.prototype.map.call(nodes, (node, index) => {
        
        console.log(node, index)
      })
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 30]  
当然也可以使用以下方式操作

<div id="wgchen">wgchen.blog.csdn.net</div>
    <div name="willem">博客</div>
    <script>
      const nodes = document.querySelectorAll('div');
      ;[].filter.call(nodes, node => {
        
        console.log(node)
      })
    </script>

### Array.from 将类数组转换为数组 ###

Array.from用于将类数组转为组件，并提供第二个迭代函数。  
所以可以借用Array.from实现遍历。

<div id="wgchen">wgchen.blog.csdn.net</div>
    <div name="willem">博客</div>
    <script>
      const nodes = document.querySelectorAll('div');
      Array.from(nodes, (node, index) => {
        
        console.log(node, index)
      })
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 31]

### 展开语法，使用点语法转换节点为数组 ###

<h1>wgchen.blog.csdn.net</h1>
    <h1>willem</h1>
    <script>
      let elements = document.getElementsByTagName('h1')
      console.log(elements)
    
      ;[...elements].map((item) => {
        
        item.addEventListener('click', function () {
        
          this.style.textTransform = 'uppercase'
        })
      })
    </script>

![在这里插入图片描述][bf86674b7dba4dfbb7c125dc5b6e468c.gif_pic_center]

## 节点关系 ##

节点是父子级嵌套与前后兄弟关系，使用DOM提供的API可以获取这种关系的元素。

文本和注释也是节点，所以也在匹配结果中。

### 基础知识 ###

节点是根据HTML内容产生的，所以也存在父子、兄弟、祖先、后代等节点关系，下例中的代码就会产生这种多重关系。

*  h1 与 ul 是兄弟关系
 *  span 与 li 是父子关系
 *  ul 与 span 是后代关系
 *  span 与 ul 是祖先关系

<h1>博客</h1>
    <ul>
      <li>
        <span>wgchen</span>
        <strong>wgchen.blog.csdn.net</strong>
      </li>
    </ul>

下面是通过节点关系获取相应元素的方法。

<table> 
 <thead> 
  <tr> 
   <th>节点属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>childNodes</td> 
   <td>获取所有子节点</td> 
  </tr> 
  <tr> 
   <td>parentNode</td> 
   <td>获取父节点</td> 
  </tr> 
  <tr> 
   <td>firstChild</td> 
   <td>第一个子节点</td> 
  </tr> 
  <tr> 
   <td>lastChild</td> 
   <td>最后一个子节点</td> 
  </tr> 
  <tr> 
   <td>nextSibling</td> 
   <td>下一个兄弟节点</td> 
  </tr> 
  <tr> 
   <td>previousSibling</td> 
   <td>上一个兄弟节点</td> 
  </tr> 
 </tbody> 
</table>

子节点集合与首、尾节点获取。

文本也是node，所以也会在匹配当中。

<div id="app">
      <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">技术文章</div>
      <div class="ycc">博客</div>
    </div>
    <script>
      const node = document.querySelector(`#app`)
      console.log(node.childNodes) //所有子节点
      console.log(node.firstChild) //第一个子节点是文本节点
      console.log(node.lastChild) //最后一个子节点也是文本节点
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 32]  
下面通过示例操作节点关联，文本也是node所以也会在匹配当中。

<div id="app">
      <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">技术文章</div>
      <div class="ycc">博客</div>
    </div>
    <script>
      const node = app.querySelector(`.willem`)
      console.log(node.parentNode) //div#app
      console.log(node.childNodes) //文本节点
      console.log(node.nextSibling) //下一个兄弟节点是文本节点
      console.log(node.previousSibling) //上一个节点也是文本节点
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 33]  
document 是顶级节点 html 标签的父节点是 document

### 父节点集合 ###

下例是查找元素的所有父节点

<div id="wgchen">wgchen.blog.csdn.net</div>
    
    <script>
    function parentNodes(node) {
        
      let nodes = []
      while ((node = node.parentNode)) nodes.push(node)
      return nodes
    }
    
    const el = document.getElementById('wgchen')
    const nodes = parentNodes(el)
    
    console.log(nodes)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 2]  
使用递归获取所有父级节点

<div>
      <ul>
        <li><span></span></li>
      </ul>
    </div>
    
    <script>
    const span = document.querySelector('span')
    
    function parentNodes(node) {
        
      const nodes = new Array(node.parentNode)
      if (node.parentNode) nodes.push(...parentNodes(node.parentNode))
      return nodes
    }
    
    const nodes = parentNodes(document.querySelector('span'))
    console.log(nodes)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 3]

### 后代节点集合 ###

获取所有的后代元素 SPAN 的内容

<div id="app">
      <span>wgchen.blog.csdn.net</span>
      <h2>
        <span>博客</span>
      </h2>
    </div>
    
    <script>
    function getChildNodeByName(el, name) {
        
      const items = []
      Array.from(el.children).forEach(node => {
        
        if (node.tagName == name.toUpperCase()) items.push(node)
        items.push(...getChildNodeByName(node, name))
      })
    
      return items
    }
    const nodes = getChildNodeByName(document, 'span')
    console.log(nodes)
    </script>

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

## 标签关系 ##

使用 childNodes 等获取的节点包括文本与注释，但这不是我们常用的，为此系统也提供了只操作元素的关系方法。

### 基础知识 ###

下面是处理标签关系的常用 API

<table> 
 <thead> 
  <tr> 
   <th>节点属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>parentElement</td> 
   <td>获取父元素</td> 
  </tr> 
  <tr> 
   <td>children</td> 
   <td>获取所有子元素</td> 
  </tr> 
  <tr> 
   <td>childElementCount</td> 
   <td>子标签元素的数量</td> 
  </tr> 
  <tr> 
   <td>firstElementChild</td> 
   <td>第一个子标签</td> 
  </tr> 
  <tr> 
   <td>lastElementChild</td> 
   <td>最后一个子标签</td> 
  </tr> 
  <tr> 
   <td>previousElementSibling</td> 
   <td>上一个兄弟标签</td> 
  </tr> 
  <tr> 
   <td>nextElementSibling</td> 
   <td>下一个兄弟标签</td> 
  </tr> 
  <tr> 
   <td>contains</td> 
   <td>返回布尔值，判断传入的节点是否为该节点的后代节点</td> 
  </tr> 
 </tbody> 
</table>

以下实例展示怎样通过元素关系获取元素

<div id="app">
      <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">博客</div>
      <div class="ycc"></div>
    </div>
    
    <script>
      const app = document.querySelector(`#app`)
      console.log(app.children) //所有子元素
      console.log(app.firstElementChild) //第一个子元素 div.wgchen
      console.log(app.lastElementChild) //最后一个子元素 div.ycc
    
      const houdunwang = document.querySelector('.willem')
      console.log(houdunwang.parentElement) //父元素 div#app
    
      console.log(houdunwang.previousElementSibling) //上一个兄弟元素 div.wgchen
      console.log(houdunwang.nextElementSibling) //下一个兄弟元素 div.ycc
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 4]  
html 标签的父节点是document，但父标签节点不存在。

### 按类名获取标签 ###

下例是按 className 来获取标签

<div>
      <ul>
        <li class="hd item">wgchen.blog.csdn.net</li>
        <li class="item">willem</li>
        <li class="hd">wgchen</li>
      </ul>
    </div>
    <script>
    function getTagByClassName(className, tag = document) {
        
      const items = []
      Array.from(tag.children).map(el => {
        
        if (el.className.includes(className)) items.push(el)
        items.push(...getTagByClassName(className, el))
      })
      return items
    }
    
    console.log(getTagByClassName('hd'))

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 34]

<div>
      <ul>
        <li class="hd item">wgchen.blog.csdn.net</li>
        <li class="item">willem</li>
        <li class="hd">wgchen</li>
      </ul>
    </div>
    <script>
    function getTagByClassName(className, tag = document) {
        
      const items = []
      Array.from(tag.children).map(el => {
        
        console.log(el);
        if (el.className.includes(className)) items.push(el)
        items.push(...getTagByClassName(className, el))
      })
      return items
    }
    
    console.log(getTagByClassName('hd'))
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 35]

## 标签获取 ##

系统提供了丰富的选择节点（NODE）的操作方法，下面我们来 一 一 说明。

### getElementById 根据元素的 id 属性获取一个元素节点对象 ###

使用 `ID` 选择是非常方便的选择具有ID值的节点元素，但注意ID应该是唯一的。

只能通过document对象上使用

<div id="wgchen">wgchen.blog.csdn.net</div>
    <script>
      const node = document.getElementById('wgchen')
      console.dir(node)
    </script>

![在这里插入图片描述][3b9b3492db5849ffb1ce7d6dd5fe9386.png]  
getElementById 只能通过 document 访问，不能通过元素读取拥有ID的子元素，下面的操作将产生错误。

<div id="app">
      wgchen.blog.csdn.net
      <div id="wgchen">博客</div>
    </div>
    <script>
      const app = document.getElementById('app')
      console.log(app);
    
      const node = app.getElementById('wgchen') //app.getElementById is not a function
      console.log(node)
    </script>

![在这里插入图片描述][516fead74edc45cea24a848570d6c46b.png]  
下面自定义函数来支持批量按ID选择元素

<div id="wgchen">wgchen.blog.csdn.net</div>
    <div id="app"></div>
    <script>
    function getByElementIds(ids) {
        
      return ids.map((id) => document.getElementById(id))
    }
    
    let nodes = getByElementIds(['wgchen', 'app'])
    console.dir(nodes)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 36]  
拥有 `ID` 的元素可做为 `WINDOW` 的属性进行访问

<div id="app">
      wgchen.blog.csdn.net
    </div>
    <script>
      console.log(app.innerHTML)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 37]  
如果声明了变量这种访问方式将无效，所以并不建议使用这种方式访问对象。

<div id="app">
      wgchen.blog.csdn.net
    </div>
    <script>
      let app = 'wgchen'
      console.log(app.innerHTML) // undefined
    </script>

### getElementsByName 返回带有指定名称的对象的集合 ###

使用 getElementByName 获取设置了 name 属性的元素，虽然在DIV等元素上同样有效，但一般用来对表单元素进行操作时使用。

*  返回 NodeList 节点列表对象
 *  NodeList 顺序为元素在文档中的顺序
 *  需要在 document 对象上使用

<div name="wgchen">wgchen.blog.csdn.net</div>
    <input type="text" name="username" />
    
    <script>
      const div = document.getElementsByName('wgchen')
      console.dir(div)
      
      const input = document.getElementsByName('username')
      console.dir(input)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 38]

### getElementsByTagName 用于按标签名获取元素 ###

使用 getElementsByTagName 用于按标签名获取元素

*  返回 HTMLCollection 节点列表对象
 *  是不区分大小的获取

<div name="wgchen">wgchen.blog.csdn.net</div>
    <div id="app"></div>
    <script>
      const divs = document.getElementsByTagName('div')
      console.dir(divs)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 5]  
通配符

可以使用通配符 `*` 获取所有元素

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>wgchen</title>
      <link rel="shortcut icon" href="#" />
      <meta name="keywords" content="wgchen.blog.csdn.net">
      <meta name="keywords" content="技术文章">
      <meta name="keywords" content="博客">
      <meta name="keywords" content="willem">
      <meta name="keywords" content="ycc">
    </head>
    <body>
    
    <div name="wgchen">wgchen.blog.csdn.net</div>
    <div id="app"></div>
    <script>
      const nodes = document.getElementsByTagName('*')
      console.dir(nodes)
    </script>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 6]  
某个元素也可以使用通配置符 `*` 获取后代元素，下面获取 id为 wgchen 的所有后代元素。

<div id="wgchen">
      <span>wgchen.blog.csdn.net</span>
      <span>博客</span>
    </div>
    
    <script>
      const nodes = document.getElementsByTagName('*').namedItem('wgchen').getElementsByTagName('*')
      console.dir(nodes)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 39]

### getElementsByClassName 按class样式属性值获取元素集合 ###

设置多个值时顺序无关，指包含这些class属性的元素。

<div class="wgchen willem ycc">wgchen.blog.csdn.net</div>
    <div class="willem">博客</div>
    
    <script>
      const nodes = document.getElementsByClassName('willem')
      console.log(nodes.length) //2
    
      //查找同时具有 willem 与 wgchen 两个class属性的元素
      const tags = document.body.getElementsByClassName('willem wgchen ')
      console.log(tags.length) //1
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 40]  
下面我们来自己开发一个与 getElementsByClassName 相同的功能函数

<div class="wgchen willem ycc">wgchen.blog.csdn.net</div>
    <div class="willem">博客</div>
    
    <script>
    
    function getByClassName(names) {
        
      //将用户参数转为数组，并过滤掉空值
      const classNames = names.split(/\s+/).filter(t => t)
    
      return Array.from(document.getElementsByTagName('*')).filter(tag => {
        
        // 提取标签的所有 class 值为数组
        return classNames.every(className => {
        
          const names = tag.className
            .toUpperCase()
            .split(/\s+/)
            .filter(t => t)
    
          //检索标签是否存在class
          return names.some(name => name == className.toUpperCase())
        })
      })
    }
    
    console.log(getByClassName('willem wgchen '))
    
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 41]

## 样式选择器 ##

在CSS中可以通过样式选择器修饰元素样式，在DOM操作中也可以使用这种方式查找元素。使用过jQuery库的朋友，应该对这种选择方式印象深刻。

使用 getElementsByTagName 等方式选择元素不够灵活，建议使用下面的样式选择器操作，更加方便灵活。

### querySelectorAll 找出所有匹配的节点后，返回对应的元素节点数组 ###

使用 querySelectorAll 根据CSS选择器获取 Nodelist 节点列表。

获取的NodeList节点列表是静态的，添加或删除元素后不变。

获取所有div元素

<div class="ycc">博客</div>
    <div id="app">
      <div class="wgchen willem">wgchen.blog.csdn.net</div>
      <div class="willem">willem.com</div>
    </div>
    
    <script>
      const app = document.getElementById('app')
      const nodes = app.querySelectorAll('div')
      console.log(nodes.length) //2
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 42]  
获取 id 为 app 元素的，class 为 wgchen 的后代元素

<div class="ycc">博客</div>
    <div id="app">
      <div class="wgchen willem">wgchen.blog.csdn.net</div>
      <div class="willem">willem.com</div>
    </div>
    <script>
      const nodes = document.querySelectorAll('#app .willem')
      console.log(nodes.length) //2
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 43]  
根据元素属性值获取元素集合

<div id="app">
      <div class="wgchen willem" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">willem.com</div>
    </div>
    <script>
      const nodes = document.querySelectorAll(`#app .willem[data='hd']`)
      console.log(nodes.length) //2
    </script>

再来看一些通过样式选择器查找元素

<div id="app">
      <div class="wgchen">wgchen.blog.csdn.net</div>
      <div class="willem">willem.com</div>
      <span>博客</span>
    </div>
    
    <script>
      //查找紧临兄弟元素
      console.log(document.querySelectorAll('.wgchen+div.willem'))
    
      //查找最后一个 div 子元素
      console.log(document.querySelector('#app div:last-of-type'))
    
      //查找第二个 div 元素
      console.log(document.querySelector('#app div:nth-of-type(2)').innerHTML)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 44]

### querySelector 找到一个后立刻返回找到的第一个节点对象，如果没有则返回null ###

querySelector 使用CSS选择器获取一个元素，下面是根据属性获取单个元素。

<div id="app">
      <div class="wgchen willem" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">博客</div>
    </div>
    <script>
      const node = app.querySelector(`#app .wgchen[data='hd']`)
      console.log(node)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 45]

### matches 用于检测元素是否是指定的样式选择器匹配 ###

Element.matches()  
如果元素被指定的选择器字符串选择，Element.matches() 方法返回true; 否则返回false。

用于检测元素是否是指定的样式选择器匹配，下面过滤掉所有name属性的 LI元素。

<div id="app">
      <li>wgchen</li>
      <li>博客</li>
      <li name="willem">wgchen.blog.csdn.net</li>
    </div>
    <script>
      const nodes = [...document.querySelectorAll('li')].filter(node => {
        
        return !node.matches(`[name]`)
      })
      console.log(nodes)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 46]

### closest ###

查找最近的符合选择器的祖先元素（包括自身），下例查找父级拥有 .comment类的元素。

<div class="comment">
      <ul class="comment">
        <li>wgchen.blog.csdn.net</li>
      </ul>
    </div>
    
    <script>
      const li = document.getElementsByTagName('li')[0]
      const node = li.closest(`.comment`)
      //结果为 ul.comment
      console.log(node)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 47]

### HTMLCollection 与 NodeList 的区别 ###

HTMLCollection 是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。

### DOM HTMLCollection ###

HTMLCollection 是 HTML 元素的集合。

HTMLCollection 对象类似一个包含 HTML 元素的数组列表。

getElementsByTagName() 方法返回的就是一个 HTMLCollection 对象。

## 标准属性 ##

元素的标准属性具有相对应的DOM对象属性。

*  操作属性区分大小写
 *  多个单词属性命名规则为第一个单词小写，其他单词大写
 *  属性值是多类型并不全是字符串，也可能是对象等
 *  事件处理程序属性值为函数
 *  style属性为CSSStyleDeclaration对象
 *  DOM对象不同生成的属性也不同

### 属性别名 ###

有些属性名与JS关键词冲突，系统已经起了别名。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>别名</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>class</td> 
   <td>className</td> 
  </tr> 
  <tr> 
   <td>for</td> 
   <td>htmlFor</td> 
  </tr> 
 </tbody> 
</table>

### 操作属性 ###

元素的标准属性可以直接进行操作，下面是直接设置元素的className。

<div id="app">
      <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">博客</div>
    </div>
    <script>
      const app = document.querySelector(`#app`)
      app.className = 'wgchen willem'
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 48]  
下面设置图像元素的标准属性

<img src="" alt="" />
    <script>
      let img = document.images[0]
      img.src = 'https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224'
      img.alt = 'wgchen'
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 49]  
使用 `hidden` 隐藏元素

<div id="app">wgchen.blog.csdn.net</div>
    <script>
      const app = document.querySelector('#app')
      app.addEventListener('click', function () {
        
        this.hidden = true
      })
    </script>

### 多类型 ###

大部分属性值是都是字符串，但并不是全部，下例中需要转换为数值后进行数据运算。

<input type="number" name="age" value="88" />
    
    <script>
      let input = document.getElementsByName('age').item(0)
      input.value = parseInt(input.value) + 100
    </script>

![在这里插入图片描述][52d297c470964ee396c09536d85cd524.png]  
下面表单 checked 属性值为 Boolean 类型

<label for="hot"> <input id="hot" type="checkbox" name="hot" />热门 </label>
    <script>
      const node = document.querySelector(`[name='hot']`)
      node.addEventListener('change', function () {
        
        console.log(this.checked)
      })
    </script>

![在这里插入图片描述][c16a938f4aae4600818aed8fdf2703d5.gif_pic_center]  
属性值并都与HTML定义的值一样，下面返回的 href 属性值是完整链接

<a href="#wgchen" id="home">博客</a>
    <script>
      const node = document.querySelector(`#home`)
      console.log(node.href)
    </script>

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

## 元素特征 ##

对于标准的属性可以使用DOM属性的方式进行操作，但对于标签的非标准的定制属性则不可以。但JS提供了方法来控制标准或非标准的属性。

可以理解为元素的属性分两个地方保存，DOM属性中记录标准属性，特征中记录标准和定制属性。

*  使用特征操作时属性名称不区分大小写
 *  特征值都为字符串类型

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>getAttribute</td> 
   <td>获取属性</td> 
  </tr> 
  <tr> 
   <td>setAttribute</td> 
   <td>设置属性</td> 
  </tr> 
  <tr> 
   <td>removeAttribute</td> 
   <td>删除属性</td> 
  </tr> 
  <tr> 
   <td>hasAttribute</td> 
   <td>属性检测</td> 
  </tr> 
 </tbody> 
</table>

特征是可迭代对象，下面使用 `for...of` 来进行遍历操作

<div id="app" content="博客" color="red">wgchen.blog.csdn.net</div>
    <script>
      const app = document.querySelector('#app')
      for (const {
         name, value } of app.attributes) {
        
        console.log(name, value)
      }
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 50]  
属性值都为字符串，所以数值类型需要进行转换

<input type="number" name="age" value="88" />
    <script>
      let input = document.getElementsByName('age').item(0)
      let value = input.getAttribute('value') * 1 + 100
      input.setAttribute('value', value)
    </script>

![在这里插入图片描述][ae04954cabee4c5997542039920ba8f5.png]  
使用 `removeAttribute` 删除元素的 class 属性，并通过 `hasAttribute` 进行检测删除结果。

<div class="willem">wgchen.blog.csdn.net</div>
    <script>
      let willem = document.querySelector('.willem')
      willem.removeAttribute('class')
      console.log(willem.hasAttribute('class')) //false
    </script>

特征值与HTML定义是一致的，这和属性值是不同的。

<a href="#wgchen" id="home">博客</a>
    <script>
      const node = document.querySelector(`#home`)
      
      // http://tt.cc/testData/test2.html#wgchen
      console.log(node.href)
      
      // #wgchen
      console.log(node.getAttribute('href'))
    </script>

### attributes ###

元素提供了attributes 属性可以只读的获取元素的属性

<div class="wgchen" data-content="博客">wgchen.blog.csdn.net</div>
    <script>
      let wgchen = document.querySelector('.wgchen')
      console.dir(wgchen.attributes['class'].nodeValue) //wgchen
      console.dir(wgchen.attributes['data-content'].nodeValue) //博客
    </script>

### 自定义特征 ###

虽然可以随意定义特征并使用 `getAttribute` 等方法管理，但很容易造成与标签的现在或未来属性重名。建议使用以data-为前缀的自定义特征处理，针对这种定义方式JS也提供了接口方便操作。

*  元素中以data-为前缀的属性会添加到属性集中
 *  使用元素的 dataset 可获取属性集中的属性
 *  改变 dataset 的值也会影响到元素上

下面演示使用属性集设置DIV标签内容

<div class="wgchen" data-content="博客" data-color="red">wgchen.blog.csdn.net</div>
    
    <script>
      let wgchen = document.querySelector('.wgchen')
      let content = wgchen.dataset.content
      console.log(content) //博客
      wgchen.innerHTML = `<span style="color:${
          wgchen.dataset.color}">${
          content}</span>`
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 51]  
多个单词的特征使用驼峰命名方式读取

<div class="wgchen" data-title-color="red">wgchen.blog.csdn.net</div>
    <script>
      let wgchen = document.querySelector('.wgchen')
      wgchen.innerHTML = `
        <span style="color:${
          wgchen.dataset.titleColor}">${
          wgchen.innerHTML}</span>
      `
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 52]  
改变 dataset 值也会影响到页面元素上

<div class="wgchen" data-title-color="red">wgchen.blog.csdn.net</div>
    <script>
      let wgchen = document.querySelector('.wgchen')
      wgchen.addEventListener('click', function () {
        
        this.dataset.titleColor = ['red', 'green', 'blue'][Math.floor(Math.random() * 3)]
        this.style.color = this.dataset.titleColor
      })
    </script>

![在这里插入图片描述][baaa6356eab84219bf22540dc2b745f0.gif_pic_center]

### 属性同步 ###

特征和属性是记录元素属性的两个不同场所，大部分更改会进行同步操作。

下面使用属性更改了className，会自动同步到了特征集中，反之亦然。

<div id="app" class="red">wgchen.blog.csdn.net</div>
    <script>
      const app = document.querySelector('#app')
      app.className = 'wgchen'
    
      console.log(app.getAttribute('class')) //wgchen
      
      app.setAttribute('class', 'blue')
      console.log(app.className) //blue
    </script>

下面对 input 值使用属性设置，但并没有同步到特征。

<input type="text" name="package" value="wgchen.blog.csdn.net" />
    <script>
      const package = document.querySelector(`[name='package']`)
      package.value = 'willem'
      console.log(package.getAttribute('value'))//wgchen.blog.csdn.net
    </script>

![在这里插入图片描述][ec7b3460a6494ed4b75e19fab898e0c5.png]  
但改变 input 的特征 value 会同步到 DOM 对象属性

<input type="text" name="package" value="wgchen.blog.csdn.net" />
    <script>
      const package = document.querySelector(`[name='package']`)
      package.setAttribute('value', 'wgchen')
      console.log(package.value) //wgchen
    </script>

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

## 创建节点 ##

创建节点的就是构建出DOM对象，然后根据需要添加到其他节点中。

### append 添加元素 ###

append 也是用于添加元素，同时他也可以直接添加文本等内容。

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>wgchen</title>
      <link rel="shortcut icon" href="#" />
    </head>
    <body>
    
    
    <script>
      document.body.append((document.createElement('div').innerText = '博客'))
      document.body.append('wgchen.blog.csdn.net')
    </script>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 53]

### createTextNode 创建文本对象并添加到元素中 ###

<div id="app"></div>
    <script>
      let app = document.querySelector('#app')
      let text = document.createTextNode('wgchen')
      app.append(text)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 54]

### createElement 创建标签节点对象 ###

使用 `createElement` 方法创建标签节点对象，创建 span 标签新节点并添加到 `div#app`。

<div id="app"></div>
    <script>
      let app = document.querySelector('#app')
      let span = document.createElement('span')
      span.innerHTML = 'wgchen.blog.csdn.net'
      app.append(span)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 55]  
使用 PROMISE 结合节点操作来加载外部 JAVASCRIPT 文件

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 56]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 57]  
`js('1.1.js')`  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 58]  
使用同样的逻辑来实现加载CSS文件

### cloneNode 和 document.importNode 用于复制节点对象操作 ###

*  cloneNode 是节点方法
 *  cloneNode 参数为 true 时递归复制子节点即深拷贝
 *  importNode 是 documet 对象方法

复制 `div#app` 节点并添加到 `body` 元素中

<div id="app">wgchen</div>
    <script>
      let app = document.querySelector('#app')
      let newApp = app.cloneNode(true)
      document.body.appendChild(newApp)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 59]  
`document.importNode`方法是部分IE浏览器不支持的，也是复制节点对象的方法。

*  第一个参数为节点对象
 *  第二个参数为 true 时递归复制

<div id="app">wgchen</div>
    <script>
      let app = document.querySelector('#app')
      let newApp = document.importNode(app, true)
      document.body.appendChild(newApp)
    </script>

## 节点内容 ##

### innerHTML 向标签中添加 html 内容 ###

inneHTML用于向标签中添加 html 内容，同时触发浏览器的解析器重绘DOM。

下例使用 innerHTML 获取和设置div内容  
innerHTML中只解析HTML标签语法，所以其中的 script 不会做为JS处理。

<div id="app">
      <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">博客</div>
    </div>
    <script>
      let app = document.querySelector('#app')
      console.log(app.innerHTML)
    
      app.innerHTML = '<h1>csdn博客</h1>'
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 60]  
重绘节点

使用innertHTML操作会重绘元素，下面在点击第二次就没有效果了

*  因为对 `#app` 内容进行了重绘，即删除原内容然后设置新内容
 *  重绘后产生的 `button` 对象没有事件
 *  重绘后又产生了新 `img` 对象，所以在控制台中可看到新图片在加载

<div id="app">
      <button>wgchen.blog.csdn.net</button>
      <img src="1.png" alt="" />
    </div>
    <script>
      const app = document.querySelector('#app')
      app.querySelector('button').addEventListener('click', function () {
        
        alert(this.innerHTML)
        this.parentElement.innerHTML += '<hr/>wgchen'
      })
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 61]

### outerHTML与innerHTML的区别是包含父标签 ###

*  outerHTML不会删除原来的旧元素
 *  只是用新内容替换替换旧内容，旧内容（元素）依然存在

下面将 `div#app` 替换为新内容

<div id="app">
      <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">博客</div>
    </div>
    <script>
      let app = document.querySelector('#app')
      console.log(app.outerHTML)
    
      app.outerHTML = '<h1>技术文章</h1>'
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 62]  
使用 innerHTML 内容是被删除然后使用新内容

<div id="app">
      wgchen.blog.csdn.net
    </div>
    <script>
      const app = document.querySelector('#app')
      console.log(app)
      
      app.innerHTML = '博客'
      console.log(app)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 63]  
而使用 outerHTML是保留旧内容，页面中使用新内容

<div id="app">
      wgchen.blog.csdn.net
    </div>
    <script>
      const app = document.querySelector('#app')
      console.log(app)
      
      app.outerHTML = '博客'
      console.log(app)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 64]  
![在这里插入图片描述][3aeadd8fea9a46f9b436aace8472b572.png]

### textContent与innerText是访问或添加文本内容到元素中 ###

*  textContent 部分IE浏览器版本不支持
 *  innerText部分FireFox浏览器版本不支持
 *  获取时忽略所有标签,只获取文本内容
 *  设置时将内容中的标签当文本对待不进行标签解析

获取时忽略内容中的所有标签

<div id="app">
      <h1>wgchen.blog.csdn.net</h1>
    </div>
    <script>
      let app = document.querySelector('#app')
      console.log(app.textContent)
      // wgchen.blog.csdn.net
    </script>

设置时将标签当文本对待，即转为HTML实体内容。

<div id="app">
      <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">博客</div>
    </div>
    <script>
      let app = document.querySelector('#app')
      app.textContent="<h1>技术文章</h1>"
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 65]

### outerText 设置(包括标签 || 不包括标签)对象的文本 ###

与innerText差别是会影响所操作的标签

<h1>wgchen.blog.csdn.net</h1>
    <script>
      let h1 = document.querySelector('h1')
      h1.outerText = '博客'
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 66]

### insertAdjacentText 将文本插入到元素指定位置 ###

将文本插入到元素指定位置，不会对文本中的标签进行解析，包括以下位置

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforebegin</td> 
   <td>元素本身前面</td> 
  </tr> 
  <tr> 
   <td>afterend</td> 
   <td>元素本身后面</td> 
  </tr> 
  <tr> 
   <td>afterbegin</td> 
   <td>元素内部前面</td> 
  </tr> 
  <tr> 
   <td>beforeend</td> 
   <td>元素内部后面</td> 
  </tr> 
 </tbody> 
</table>

添加文本内容到 `div#app` 前面

<div id="app">
      <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">技术文章</div>
    </div>
    <script>
      let app = document.querySelector('#app')
      let span = document.createElement('span')
      app.insertAdjacentText('beforebegin', '<h1>博客</h1>')
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 67]

## 节点管理 ##

现在我们来讨论下节点元素的管理，包括添加、删除、替换等操作。

### 推荐方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>append</td> 
   <td>节点尾部添加新节点或字符串</td> 
  </tr> 
  <tr> 
   <td>prepend</td> 
   <td>节点开始添加新节点或字符串</td> 
  </tr> 
  <tr> 
   <td>before</td> 
   <td>节点前面添加新节点或字符串</td> 
  </tr> 
  <tr> 
   <td>after</td> 
   <td>节点后面添加新节点或字符串</td> 
  </tr> 
  <tr> 
   <td>replaceWith</td> 
   <td>将节点替换为新节点或字符串</td> 
  </tr> 
 </tbody> 
</table>

#### append 在标签内容后面添加新内容 ####

<div id="app">
      wgchen.blog.csdn.net
    </div>
    <script>
      let app = document.querySelector('#app')
      app.append('- 技术文章')
    </script>
    
    // wgchen.blog.csdn.net - 技术文章

同时添加多个内容，包括字符串与元素标签

<div id="app">
      wgchen.blog.csdn.net
    </div>
    <script>
      let app = document.querySelector('#app')
      let h1 = document.createElement('h1')
      h1.append('博客')
      app.append('@', h1)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 68]

#### replaceWith 将标签替换为新内容 ####

<div id="app">
      wgchen
    </div>
    <script>
      let app = document.querySelector('#app')
      let h1 = document.createElement('h1')
      h1.append('.blog.csdn.net')
      app.replaceWith(h1)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 69]

#### 添加新元素h1到目标元素 `div#app` 里面 ####

<div id="app"></div>
    <script>
      let app = document.querySelector('#app')
      let h1 = document.createElement('h1')
      h1.innerHTML = 'wgchen.blog.csdn.net'
      app.append(h1)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 70]

#### 将h2移动到h1之前 ####

<h1>wgchen.blog.csdn.net@h1</h1>
    <h2>willem@h2</h2>
    <script>
      let h1 = document.querySelector('h1')
      let h2 = document.querySelector('h2')
      h1.before(h2)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 71]

#### 使用 remove方法可以删除节点 ####

<div id="app">
      wgchen.blog.csdn.net
    </div>
    <script>
      let app = document.querySelector('#app')
      app.remove()
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 72]

### insertAdjacentHTML 将html文本插入到元素指定位置 ###

将html文本插入到元素指定位置，浏览器会对文本进行标签解析，包括以下位置。

#### 在 `div#app` 前添加HTML文本 ####

<div id="app">
      <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">技术文章</div>
    </div>
    <script>
      let app = document.querySelector('#app')
      let span = document.createElement('span')
      app.insertAdjacentHTML('beforebegin', '<h1>博客</h1>')
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 73]

### insertAdjacentElement() 方法将指定元素插入到元素的指定位置，包括以下位置 ###

*  第一个参数是位置
 *  第二个参数为新元素节点

#### 在 `div#app` 前插入span标签 ####

<div id="app">
      <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
      <div class="willem">技术文章</div>
    </div>
    <script>
      let app = document.querySelector('#app')
      let span = document.createElement('span')
      span.innerHTML = '博客'
      app.insertAdjacentElement('beforebegin', span)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 74]

### 古老方法 ###

下面列表过去使用的操作节点的方法，现在不建议使用了。但在阅读老代码时可来此查看语法。

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>appendChild</td> 
   <td>添加节点</td> 
  </tr> 
  <tr> 
   <td>insertBefore</td> 
   <td>用于插入元素到另一个元素的前面</td> 
  </tr> 
  <tr> 
   <td>removeChild</td> 
   <td>删除节点</td> 
  </tr> 
  <tr> 
   <td>replaceChild</td> 
   <td>进行节点的替换操作</td> 
  </tr> 
 </tbody> 
</table>

### DocumentFragment ###

当对节点进行添加、删除等操作时，都会引起页面回流来重新渲染页面,即重新渲染颜色，尺寸，大小、位置等等。所以会带来对性能的影响。

#### 解决以上问题可以使用以下几种方式 ####

1、可以将DOM写成html字符串，然后使用innerHTML添加到页面中，但这种操作会比较麻烦，且不方便使用节点操作的相关方法。

2、使用 `createDocumentFragment` 来管理节点时，此时节点都在内存中，而不是DOM树中。对节点的操作不会引发页面回流,带来比较好的性能体验。

#### DocumentFragment 特点 ####

*  createDocumentFragment父节点为null
 *  继承自node所以可以使用NODE的属性和方法
 *  createDocumentFragment创建的是文档碎片，节点类型nodeType为 `11`。因为不在DOM树中所以只能通过JS进行操作
 *  添加 `createDocumentFragment` 添加到DOM后,就不可以再操作 `createDocumentFragment`元素了,这与DOM操作是不同的
 *  将文档DOM添加到createDocumentFragment时,会移除文档中的DOM元素
 *  createDocumentFragment创建的节点添加到其他节点上时，会将子节点一并添加
 *  createDocumentFragment是虚拟节点对象，不直接操作DOM所以性能更好
 *  在排序/移动等大量DOM操作时建议使用createDocumentFragment

## 表单控制 ##

表单是高频操作的元素，下面来掌握表单项的DOM操作。

### 表单查找 ###

JS为表单的操作提供了单独的集合控制

*  使用 `document.forms` 获取表单集合
 *  使用 form 的 name 属性获取指定 form 元素
 *  根据表单项的 name 属性使用 `form.elements.title`获取表单项
 *  也可以直接写成 `form.name` 形式，不需要 `form.elements.title`
 *  针对 `radio/checkbox` 获取的表单项是一个集合

<form action="" name="hd">
      <input type="text" name="title" />
    </form>
    <script>
      const form = document.forms.hd
      console.log(form.elements.title)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 75]  
通过表单项可以反向查找FORM

<form action="" name="hd">
      <input type="text" name="title" />
    </form>
    <script>
      const form = document.forms.hd
      console.log(form.title.form === form) //true
    </script>

## 样式管理 ##

通过DOM修改样式可以通过更改元素的class属性或通过style对象设置行样式来完成。

建议使用class控制样式，将任务交给CSS处理，更简单高效

### 批量设置 ###

使用JS的className可以批量设置样式

<div id="app" class="d-flex container">博客</div>
    <script>
      let app = document.getElementById('app')
      app.className = 'wgchen'
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 76]  
也可以通过特征的方式来更改

<div id="app" class="d-flex container">博客</div>
    <script>
      let app = document.getElementById('app')
      app.setAttribute('class', 'wgchen')
    </script>

### classList 对类单独进行控制 ###

如果对类单独进行控制使用 classList 属性操作

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>node.classList.add</td> 
   <td>添加类名</td> 
  </tr> 
  <tr> 
   <td>node.classList.remove</td> 
   <td>删除类名</td> 
  </tr> 
  <tr> 
   <td>node.classList.toggle</td> 
   <td>切换类名</td> 
  </tr> 
  <tr> 
   <td>node.classList.contains</td> 
   <td>类名检测</td> 
  </tr> 
 </tbody> 
</table>

#### 在元素的原有class上添加新class ####

<div id="app" class="d-flex container">博客</div>
    <script>
      let app = document.getElementById('app')
      app.classList.add('wgchen')
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 77]

#### 移除class列表中的部分class ####

<div id="app" class="d-flex container">博客</div>
    <script>
      let app = document.getElementById('app')
      app.classList.remove('container')
    </script>

#### 使用 `toggle` 切换类 ####

使用 `toggle` 切换类，即类已经存在时删除，不存在时添加

<div id="app" class="d-flex container">博客</div>
    <script>
      let app = document.getElementById('app')
      app.addEventListener('click', function () {
        
        this.classList.toggle('wgchen')
      })
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 78]

#### 使用contains检查class是否存在 ####

<div id="app" class="d-flex container">博客</div>
    <script>
      let app = document.getElementById('app')
      console.log(app.classList.contains('container')) //true
      console.log(app.classList.contains('wgchen')) //false
    </script>

### 设置行样式 ###

使用style对象可以对样式属性单独设置，使用cssText可以批量设置行样式。

#### 样式属性设置 ####

使用节点的style对象来设置行样式。

多个单词的属性使用驼峰进行命名。

<div id="app" class="d-flex container">博客</div>
    <script>
      let app = document.getElementById('app')
      app.style.backgroundColor = 'red'
      app.style.color = 'yellow'
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 79]

#### 批量设置行样式 ####

使用 cssText 属性可以批量设置行样式，属性名和写CSS一样不需要考虑驼峰命名

<div id="app" class="d-flex container">博客</div>
    <script>
      let app = document.getElementById('app')
      app.style.cssText = `background-color:red;color:yellow`
    </script>

也可以通过 `setAttribute` 改变style特征来批量设置样式

<div id="app" class="d-flex container">博客</div>
    <script>
      let app = document.getElementById('app')
      app.setAttribute('style', `background-color:red;color:yellow;`)
    </script>

### 获取样式 ###

可以通过style对象，`window.window.getComputedStyle` 对象获取样式属性，下面进行说明。

#### style 可以使用DOM对象的style属性读取行样式 ####

style对象不能获取行样式外定义的样式

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 80]

#### getComputedStyle 获取所有应用在元素上的样式属性 ####

使用 `window.getComputedStyle` 可获取所有应用在元素上的样式属性

*  函数第一个参数为元素
 *  第二个参数为伪类
 *  这是计算后的样式属性，所以取得的单位和定义时的可能会有不同

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 81]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/baca00e6395b4129b5914f1dc202cb13.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/422abe0b8e644e788b4a654b94a6e607.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/6f41d4bc743841ccb9e6789adcae9bad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/66352ee81c8d411fa4186efd3088968b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/572df6b266b545fe84b02186d5bb3a6a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[b16cdda91d794597a980e7d41e5ce049.png]: https://img-blog.csdnimg.cn/b16cdda91d794597a980e7d41e5ce049.png
[2fd054772ae247ecb814dd4db91dcd76.png]: https://img-blog.csdnimg.cn/2fd054772ae247ecb814dd4db91dcd76.png
[239fc2bdd155496b91a0f959722570c5.png]: https://img-blog.csdnimg.cn/239fc2bdd155496b91a0f959722570c5.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/195b82b892d8484cbf5374ad0722ff42.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/c640da9a47f8409ea343af6945a0d43c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/75b3cae50fb341fead8a2d74d9a50381.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[2aa7c44b3ce04755a7133c5e4f127f22.gif_pic_center]: https://img-blog.csdnimg.cn/2aa7c44b3ce04755a7133c5e4f127f22.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/ac2253f36ac643cd96871ccb1ef2e5f4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/76c2fb539a194aa49e25a28407f1dbc1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/54792ab831cb44d2ab0608658c11b62c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[559d15f979254fc5a67d5fce7bec129e.gif_pic_center]: https://img-blog.csdnimg.cn/559d15f979254fc5a67d5fce7bec129e.gif#pic_center
[53d74293fa844450a1b505d5757261ca.gif_pic_center]: https://img-blog.csdnimg.cn/53d74293fa844450a1b505d5757261ca.gif#pic_center
[ca475487a64a4fe3bfba8ee306ca2d13.png]: https://img-blog.csdnimg.cn/ca475487a64a4fe3bfba8ee306ca2d13.png
[50bf118372f3491695c5fc821cb7d571.png]: https://img-blog.csdnimg.cn/50bf118372f3491695c5fc821cb7d571.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/5677d57bfa0841eaa069f79aa90d4b89.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/b5fa582b5d9b4c669f78757ec7c900df.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/9cdc0e643efe4ff79e4fcc4521de4bad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/1b57892511c94cbea553fe20e6fc2e1c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/e43d470a65fc4f31815007112a3bdd7b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/9cee5e6ef1cf42dbb3347560d2069f2d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/768c2071d3824c95b8d665b02a5a9e4b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 15]: https://img-blog.csdnimg.cn/8920f856c5b54f16b2887182485a954f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 16]: https://img-blog.csdnimg.cn/b7ff2e72c4a2449381103eeca5bce1b2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 17]: https://img-blog.csdnimg.cn/cc0593f376534a3abecbca132b232504.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 18]: https://img-blog.csdnimg.cn/9c757a891dbf465fb2fa8a547b0577a4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 19]: https://img-blog.csdnimg.cn/fa0f7d8dc6af48248c2cb1ede857aa15.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 20]: https://img-blog.csdnimg.cn/6c4092262bb54b068bfdd58d331c48dd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 21]: https://img-blog.csdnimg.cn/57172c78f3d141ca8bdfe14d2be11b19.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[dbb67e509462457e9d3788085260a552.png]: https://img-blog.csdnimg.cn/dbb67e509462457e9d3788085260a552.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 22]: https://img-blog.csdnimg.cn/87aaa931beee4add8358888c9fa63549.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 23]: https://img-blog.csdnimg.cn/24faad9830cc4441ab5ba4ecd1d8dbf0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 24]: https://img-blog.csdnimg.cn/11cc34524e59492d8cfabdff0ef822a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 25]: https://img-blog.csdnimg.cn/d96e6cbbd7e34d7a91278c6b83e2b618.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 26]: https://img-blog.csdnimg.cn/53eb9771ca4c49a387ca6e536c438bd5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[51626497f36b41ce9985eefb83dfca0a.gif_pic_center]: https://img-blog.csdnimg.cn/51626497f36b41ce9985eefb83dfca0a.gif#pic_center
[1cccf6b19b0d47b2be1014ecbde86cb7.gif_pic_center]: https://img-blog.csdnimg.cn/1cccf6b19b0d47b2be1014ecbde86cb7.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 27]: https://img-blog.csdnimg.cn/ee0d474162eb46bdae9db9e9ea9d2b08.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 28]: https://img-blog.csdnimg.cn/22adfdbc0c384ef78c749adb27eaed53.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 29]: https://img-blog.csdnimg.cn/aa8e7b2ef3e64a0ea4bbfc71a22d8ae1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 30]: https://img-blog.csdnimg.cn/abac9c7798294c97aef923fa7231b267.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 31]: https://img-blog.csdnimg.cn/d56cf24b6e40459a8a06931ae825e4b4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[bf86674b7dba4dfbb7c125dc5b6e468c.gif_pic_center]: https://img-blog.csdnimg.cn/bf86674b7dba4dfbb7c125dc5b6e468c.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 32]: https://img-blog.csdnimg.cn/a1b5e8b758ad4c70ab55f0b9e9b370f8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 33]: https://img-blog.csdnimg.cn/324d238e0cb94ed78f471299e1318be6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/dba06166cd9a4e2fac9bfd4b63b7ab30.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/8b8ff4d98107406f839eb8af70c6cfde.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[b4bd1afa0c754d8ca01dbbfb64415861.png]: https://img-blog.csdnimg.cn/b4bd1afa0c754d8ca01dbbfb64415861.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/a69a6ebc2841492d8f5470b78d9b7bb2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 34]: https://img-blog.csdnimg.cn/28f68ca5e45348388d17ceedfb37555a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 35]: https://img-blog.csdnimg.cn/ccf19943dcee4322aabb922747d519ec.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[3b9b3492db5849ffb1ce7d6dd5fe9386.png]: https://img-blog.csdnimg.cn/3b9b3492db5849ffb1ce7d6dd5fe9386.png
[516fead74edc45cea24a848570d6c46b.png]: https://img-blog.csdnimg.cn/516fead74edc45cea24a848570d6c46b.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 36]: https://img-blog.csdnimg.cn/29759dc454d943cdad11efd3f13a893e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 37]: https://img-blog.csdnimg.cn/890499ed76c849319778e486b9223890.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 38]: https://img-blog.csdnimg.cn/5ceabca7aff541b487d9c197e01affd3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/dfc508d734ff41099ddee2990dc11768.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/3e3d964b9f3a4ec3860fc74fdf60a07f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 39]: https://img-blog.csdnimg.cn/3b845f3a72574f68bf44593d67a85b9e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 40]: https://img-blog.csdnimg.cn/de0d4d36aa3f47578fad3f8a537541c8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 41]: https://img-blog.csdnimg.cn/64874258f41948d5b4da5b9eaa7e0b4c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 42]: https://img-blog.csdnimg.cn/679fc94607aa455eb7d51ff791830f7d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 43]: https://img-blog.csdnimg.cn/fb522ea1c2f049d89eada3312d3ee106.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 44]: https://img-blog.csdnimg.cn/6fb2019967f74f0fb2b85b5569ab2e25.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 45]: https://img-blog.csdnimg.cn/5d78dcdfb0554319ba4a000dacf55ee9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 46]: https://img-blog.csdnimg.cn/c0ec70e11ab14c47b9021b5f196038fd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 47]: https://img-blog.csdnimg.cn/34462e419fb546e5b58f1738f38a9826.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 48]: https://img-blog.csdnimg.cn/d849148f7e7a42029cfb577f793e30f1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 49]: https://img-blog.csdnimg.cn/8cf3cb5d3f08437cb7d0c1a0397fdd2d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[52d297c470964ee396c09536d85cd524.png]: https://img-blog.csdnimg.cn/52d297c470964ee396c09536d85cd524.png
[c16a938f4aae4600818aed8fdf2703d5.gif_pic_center]: https://img-blog.csdnimg.cn/c16a938f4aae4600818aed8fdf2703d5.gif#pic_center
[a1a83b45d3084a9a89205951cbb254c7.png]: https://img-blog.csdnimg.cn/a1a83b45d3084a9a89205951cbb254c7.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 50]: https://img-blog.csdnimg.cn/5407fab72a244e1988ecb8b281e3358a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[ae04954cabee4c5997542039920ba8f5.png]: https://img-blog.csdnimg.cn/ae04954cabee4c5997542039920ba8f5.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 51]: https://img-blog.csdnimg.cn/3c8901fb4a8a410db6237d3b53f8980a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 52]: https://img-blog.csdnimg.cn/4eef5855c264481c9146d156b6b08955.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[baaa6356eab84219bf22540dc2b745f0.gif_pic_center]: https://img-blog.csdnimg.cn/baaa6356eab84219bf22540dc2b745f0.gif#pic_center
[ec7b3460a6494ed4b75e19fab898e0c5.png]: https://img-blog.csdnimg.cn/ec7b3460a6494ed4b75e19fab898e0c5.png
[f3b6b012d5734d5d820f97f8d133e60d.png]: https://img-blog.csdnimg.cn/f3b6b012d5734d5d820f97f8d133e60d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 53]: https://img-blog.csdnimg.cn/dad44a5bb32b4826aaf3897b6f0ccf74.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 54]: https://img-blog.csdnimg.cn/1f9a9a09b1bc4b5a93772a74f879d05a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 55]: https://img-blog.csdnimg.cn/54f4664cf8ec4dbe94e4ec567564e961.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 56]: https://img-blog.csdnimg.cn/a09eb45d851d4e28a516c8e824e80001.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 57]: https://img-blog.csdnimg.cn/a6e83313204740dea4e6067f675c439a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 58]: https://img-blog.csdnimg.cn/b3685e0462484ee28609028b70d739fd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 59]: https://img-blog.csdnimg.cn/d7a9f611b65d49d294598a38f5938899.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 60]: https://img-blog.csdnimg.cn/f24700038b10464fa9b98fdf0a49f208.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 61]: https://img-blog.csdnimg.cn/20e2d6e576e44772ada1cf703ec37994.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 62]: https://img-blog.csdnimg.cn/08b69bda2bad4d6baad06602ecdc1767.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 63]: https://img-blog.csdnimg.cn/77c0634c98a3450d98f8a7952965dfa5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 64]: https://img-blog.csdnimg.cn/c1b75b22401b4299a24b064a77230568.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[3aeadd8fea9a46f9b436aace8472b572.png]: https://img-blog.csdnimg.cn/3aeadd8fea9a46f9b436aace8472b572.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 65]: https://img-blog.csdnimg.cn/a42b0c8590e54860a93da93e4ccdfde3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 66]: https://img-blog.csdnimg.cn/0772547e18ca4e12a60a4782215c1b3e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 67]: https://img-blog.csdnimg.cn/1799097ec6db4f8691739d30ca351da5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 68]: https://img-blog.csdnimg.cn/4517104e0964400483f0641352fc0c34.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 69]: https://img-blog.csdnimg.cn/0100c554b4a44da0abdaf890dd5ec152.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 70]: https://img-blog.csdnimg.cn/ef7081938ae54b6fa1e2dc7aed002ed5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 71]: https://img-blog.csdnimg.cn/619f293da82a4df7b5283288e52f1a97.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 72]: https://img-blog.csdnimg.cn/e9741990233e468689b11e2c5b124c1f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 73]: https://img-blog.csdnimg.cn/0c8cad70df784e588afe251dc77c8814.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 74]: https://img-blog.csdnimg.cn/9e9997817af648cda6822d6c562e2b99.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 75]: https://img-blog.csdnimg.cn/727e80fb0a3a4c289ef770d8e6ec02a6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 76]: https://img-blog.csdnimg.cn/89dff50bc8c346569971f6dc8e6136b7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 77]: https://img-blog.csdnimg.cn/4af6849c291f4c5faba8a178eb62bb75.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 78]: https://img-blog.csdnimg.cn/521c26c725c242c98988531f5c56b53f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 79]: https://img-blog.csdnimg.cn/1ca4bbe8f3074ccdae125d4c31361e22.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 80]: https://img-blog.csdnimg.cn/64f1b5df40e3440a93b744143909ce2e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 81]: https://img-blog.csdnimg.cn/1ecaf65bb38b481e80c92f857674ae79.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16