getOuterHTML

• 源码地址： src\platforms\web\entry-runtime-with-compiler.js
• 描述：获取 HTML 中的内容

源码

/**  
 * Get outerHTML of elements, taking care  
 * of SVG elements in IE as well.  
 *  
 * 获取元素的outerHTML，同时还要处理IE中的SVG元素。  
 *   
 * @params { Element } el 元素  
 * @return { String } 整个 el 元素序列化后的 HTML 文本  
 */  
function getOuterHTML (el: Element): string {  
  if (el.outerHTML) {  
    return el.outerHTML  
  } else {  
    const container = document.createElement('div')  
    container.appendChild(el.cloneNode(true))  
    return container.innerHTML  
  }  
}

解析

[ Node.cloneNode ]

---

Node.cloneNode() 方法返回调用该方法的节点的一个副本

语法

var dupNode = node.cloneNode(deep)

• node：将要被克隆的节点

• dupNode：克隆生成的节点

• deep：（可选）是否采用深度克隆

• 如果为 true, 则该节点的所有后代节点也都会被克隆

  • 如果为 false, 则只克隆节点本身

注：
在 DOM4 规范中，如果省略参数,默认值为 true,也就是说默认是深度克隆。
在最新的规范中，该方法的行为已经改变了，其默认值变成了 false。
虽然该参数仍旧是可选的，但无论是为了向前兼容还是向后兼容考虑，都必须要为该方法设置 deep 参数

[ element.innerHTML ]

---

Element.innerHTML 属性设置或获取其元素后代的序列化 HTML 片段

如果一个 <div>,<span>，或 <noembed> 节点有一个文本子节点，
该节点包含字符（&），（<），（>），innerHTML 讲这些字符分别返回为 &,< 和 > 。
使用 Node.textContent 可获取一个这些文本节点内容的正确副本。

注： 如果要向一个元素中插入一段 HTML，而不是替换它的内容，那么应该使用 insertAdjacentHTML() 方法

[ element.outerHTML ]

---

Element.outerHTML 属性获取描述元素（包括其后代）的序列化 HTML 片段。

它也可以设置为用从给定字符串解析的节点替换元素。

注：要仅获取元素内容的 HTML 表示形式或替换元素的内容，请使用 innerHTML 属性

[ innerHTML 和 outerHTML 的区别]

---

• innerHTML：

  • 从对象的起始位置到终止位置的全部内容，不包括 HTML 标签。

• outerHTML:

  • 除了包含 innerHTML 的全部内容外，还包含对象标签本身。

示例：

<template>
  <div id="div">
    <div class="content1">
      <div class="content1-1">content1-1</div>
    </div>
    <div class="content2">
      <div class="content2-2">content2-2</div>
    </div>
  </div>
</template>

<script>
  const div = document.querySelector('#div');

  console.log(div.innerHTML);
  /**-->		
  		<div class="content1">
			<div class="content1-1">content1-1</div>
		</div>
		<div class="content2">
			<div class="content2-2">content2-2</div>
		</div>
  */
  
  console.log('outerHTML',div.outerHTML)
  /**-->     
        <div id="div">
            <div class="content1">
                <div class="content1-1">content1-1</div>
            </div>
            <div class="content2">
                <div class="content2-2">content2-2</div>
            </div>
        </div>
   */
 </script>

由示例可见，outerHTML 包含 #div 元素本身，而 innerHTML 只会输出 #div 元素的子节点。

源码解析

getOuterHTML 统一了不同浏览器 outerHTML 输出的结果

由于不是所有浏览器都支持 outerHTML，所以需要对该属性进行检测

if (el.outerHTML) { return el.outerHTML }

如果用户浏览器不支持 outerHTML 方法，则使用 innerHTML 实现该功能。

通过添加一个父元素的方式，获取整个 el 元素中的 DOM。

else {  
  const container = document.createElement('div')  
  container.appendChild(el.cloneNode(true))   
  return container.innerHTML  
}