探索Vue.js源码——实用的getOuterHTML()方法

最新推荐文章于 2022-11-03 17:52:00 发布

fewuliu

最新推荐文章于 2022-11-03 17:52:00 发布

阅读量1.2k

点赞数

分类专栏：深入浅出——探索Vue.js底层源码

本文链接：https://blog.csdn.net/qq_42049445/article/details/102531052

版权

深入浅出——探索Vue.js底层源码专栏收录该内容

16 篇文章 10 订阅

订阅专栏

前言

在JavaScript中，如果要获取一个DOM的HTML代码，需要这样：

	var DOM = documnet.getElementById('div1')
	DOM.innerHTML()

而在很多情况下，我们不仅需要获取该DOM包含的HTML代码，还需要这个DOM本身的HTML代码，那么需要这样：

	var DOM = documnet.getElementById('div1')
	DOM.outerHTML()

但是有时候，这个DOM如果外层不存在元素包裹着它，例如此时这个DOM只是一个普通的文件节点，那么这个DOM就不会有outerHTML属性，即会返回undefine，例如：

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>index</title>
	</head>
	<body>
		<div id="containter">11111</div>
	</body>
	<script>
		var container = document.getElementById('containter')
		console.log(container.childNodes[0].outerHTML)
	</script>
	</html>

而在Vue源码中针对这一问题，定义了getOuterHTML方法来解决这种情境。

getOuterHTML()

代码路径是在/src/platforms/web/entry-runtime-width-complier.js中：

	function getOuterHTML (el: Element): string {
	  // 如果元素的outerHTML存在
	  if (el.outerHTML) {
	    // 返回该元素及本身的所有HTML代码
	    return el.outerHTML
	  } else { // 如果该元素的outerHTML属性不存在
	    // 创建一个DIV
	    const container = document.createElement('div')
	    // 向DIV中添加这个el
	    container.appendChild(el.cloneNode(true))
	    // 此时返回container的innerHTML就可以得到该元素即本身的HTML代码
	    return container.innerHTML
	  }
	}

fewuliu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
探索Vue.js源码——实用的getOuterHTML()方法

前言在JavaScript中，如果要获取一个DOM的HTML代码，需要这样： var DOM = documnet.getElementById('div1') DOM.innerHTML()而在很多情况下，我们不仅需要获取该DOM包含的HTML代码，还需要这个DOM本身的HTML代码，那么需要这样： var DOM = documnet.getElementById('div1')...
复制链接

扫一扫